d3点击圆圈不起作用

我有一个D3的集群图的简单的修改版本，我试图回应鼠标点击。它适用于节点之间的链接，但不适用于节点本身。它看起来像我对待线和节点（svg圈）一样，但节点不工作...但当然D3本身正在产生这些线...d3点击圆圈不起作用

我有一个非常简单的演示它的JSFiddle在：http://jsfiddle.net/gaelicmichael1965/c2XWg/8/

发生了什么事？我当然会感谢任何可以提供的帮助。

var nodes = tree.nodes(flareData), 
    links = tree.links(nodes); 

    // Create all of the link paths (using diagonal projection) 
    // Uses D3 functions to create SVG elements 
var link = vis.selectAll(".link") 
    .data(links) 
.enter().append("path") 
    .attr("class", "link") 
    .attr("d", diagonal) 
    .on("click", function(d, index) { 
      console.log("Selected line"); 
    }); 

    // Create all of the g-elements that contain node svg-elements 
var node = vis.selectAll(".node") 
    .data(nodes) 
    .enter() 
    .append("circle") 
    .attr("class", "node") 
    .attr("r", 4.5) 
    .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; }) 
    // In actuality, will need to access property of d 
    .style("fill", function(d, index) { return fillColors[index%4] }) 
    .on("click", function(d, index) { 
     console.log("Selected node"); 
    });

来源

2014-07-21 user3780094

你的问题源于你的CSS。特别是，你被关闭pointer events为节点，这意味着鼠标触发事件（如"click"）不处理：

.node { 
    font-size: 12px; 
    pointer-events: none; /*Comment out or remove this line*/ 
}

注释掉或删除pointer-events:none;线在你的CSS允许节点是您的"click"事件的目标。

来源

2014-07-21 18:34:45 mdml

谢谢！我当然是从D3复制这个，并没有注意到！ – user3780094

@ user3780094：很高兴帮助！如果你觉得它解决了你的问题，请随时[接受我的回答]（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work）。 – mdml

d3点击圆圈不起作用

回答

相关问题