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

Question

遵循此 example，为什么在以下代码中不在多边形上触发拖动事件？

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>

是不是因为更新功能？我试过没有嵌套在 g 元素中的圆圈，但它仍然不起作用。我猜这是因为范围界定，但不明白为什么它在示例中有效但在此处无效。（另外，不确定为什么节点似乎需要在 tick 函数中再次绑定）。

目标是使用 d3 voronoi 和力模拟轻松地针对拖动、工具提示、鼠标悬停和其他事件的节点，并动态更新节点（和链接）。

Answer 1

why isn't drag event triggering on the polygons

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

如果您想保留 none 作为多边形的填充，请在 css:

中使用此行

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

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

Why isn't the d3 voronoi polygon drag event triggering on polygons in force simulation?

voronoi

polygon

drag

d3.js

force-layout