为什么 d3 Voronoi 多边形拖动事件不会在力模拟中的多边形上触发？

Question

遵循此示例，为什么在以下代码中的多边形触发拖放事件？

var data = [
  {
    "index" : 0,
      "vx" : 0,
        "vy" : 0,
          "x" : 842,
            "y" : 106
  },
    {
      "index" : 1,
        "vx" : 0,
          "vy" : 0,
            "x" : 839,
              "y" : 56
    },
     {
        "index" : 2,
          "vx" : 0,
            "vy" : 0,
              "x" : 771,
                "y" : 72
      }
]
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
  
var simulation = d3.forceSimulation(data)
	.force("charge", d3.forceManyBody())
	.force("center", d3.forceCenter(width / 2, height / 2))
	.on("tick", ticked);
  
var nodes = svg.append("g").attr("class", "nodes"),
    node = nodes.selectAll("g"),
    polygons = svg.append("g").attr("class", "polygons"),
    polygon = polygons.selectAll("polygon");
var voronoi = d3.voronoi()
	.x(function(d) { return d.x; })
	.y(function(d) { return d.y; })
	.extent([[0, 0], [width, height]]);
  
var update = function() {
  polygon = polygons.selectAll("polygon")
    .data(data).enter()
    .append("polygon")
    .call(d3.drag()
               .on("start", dragstarted)
               .on("drag", dragged)
               .on("end", dragended));
  node = nodes.selectAll("g").data(data);
    var nodeEnter = node.enter()
  	.append("g")
  	.attr("class", "node");
  nodeEnter.append("circle");
  nodeEnter.append("text")
    .text(function(d, i) { return i; })
    .style("display", "none");
  node.merge(nodeEnter);
  
  
  simulation.nodes(data);
  simulation.restart();
}();
  
function ticked() {
	var node = nodes.selectAll("g");
  var diagram = voronoi(node.data()).polygons();
	polygon = polygons.selectAll("polygon");  
  
  node.call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));  
    
  polygon
    .attr("points", function(d, i) { return diagram[i]; });
    
  polygon.call(d3.drag()
               .on("start", dragstarted)
               .on("drag", function(d) { console.log("drag"); })
               .on("end", dragended));
  node
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")" });
}
function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}
function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}
function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

svg {
  border: 1px solid #888888;  
}
circle {
  r: 3;
  cursor: move;
  fill: black;
}
.node {
  pointer-events: all;
}
.polygons {
  fill: none;
  stroke: #999;
}
text {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.1/d3.min.js"></script>
<svg width="400" height="200"></svg>

是因为更新功能吗？我已经尝试了它，而没有嵌套的圆元素，但它仍然不起作用。我猜这是因为范围是因为范围，但还不知道为什么它在示例中起作用，但在这里不起作用。（另外，不确定为什么该节点似乎需要在tick函数中再次绑定）。

目的是使用D3 Voronoi和强制模拟来轻松定位节点以拖动，工具提示，鼠标和其他事件，并动态更新节点（和链接）。

Answer 1

为什么不拖动事件在多边形上触发

由于填充，拖动事件发生在您用作示例的bl.ock中。通过将填充更改为多边形上的 none，只有在您单击轮廓。

时，拖动事件才会触发。

如果您想将none保留为多边形的填充，则在CSS中使用此行：

.polygon {
    fill: none;
    pointer-events: all;
    ...