Question

我有一个D3的集群图的简单修改版本，我试图回应鼠标点击。它适用于节点之间的链接，但不适用于节点本身。在我看来，我正在处理线和节点（svg圆圈）相同，但节点不起作用......但当然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");
  });

Answer 1

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

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

注释掉或删除CSS中的pointer-events:none;行，以允许节点成为"click"事件的目标。

d3点击圈子不起作用

1 个答案: