如何使用 voronoi 多边形修改 d3 力布局以触发分组元素上的事件？

Question

目标是结合d3力模拟、g元素和voronoi多边形，使节点上的触发事件更容易，例如拖拽、鼠标悬停、工具提示等带有可以dynamically modified. This follows the d3 Circle Dragging IV example的图形。

在下面的代码中，当给g元素和clippath元素添加clip path属性时：

为什么拖动不触发单元格？
为什么节点变模糊了路径在边缘丢失样式？
如何解决此问题以拖动节点并在其上触发事件（如鼠标悬停）？

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"),
    paths = svg.append("g").attr("class", "paths"),
    path = paths.selectAll("path");

var voronoi = d3.voronoi()
 .x(function(d) { return d.x; })
 .y(function(d) { return d.y; })
 .extent([[0, 0], [width, height]]);
  
var update = function() {

  node = nodes.selectAll("g").data(data);
    var nodeEnter = node.enter()
   .append("g")
   .attr("class", "node")
    .attr("clip-path", function(d, i) { return "url(#clip-" + i + ")"; });
  nodeEnter.append("circle");
  nodeEnter.append("text")
    .text(function(d, i) { return i; });  
  node.merge(nodeEnter); 
  
  path = paths.selectAll(".path")
  .data(data)
  .enter().append("clipPath")
    .attr("id", function(d, i) { return "clip-" + i; })
    .append("path")
    .attr("class", "path");
  
  simulation.nodes(data);
  simulation.restart();

}();
  
function ticked() {
 var node = nodes.selectAll("g");
  var diagram = voronoi(node.data()).polygons();
  
  paths.selectAll("path")
    .data(diagram)
    .enter()
    .append("clipPath")
    .attr("id", function(d, i) { return "clip-" + i; })
    .append("path")
    .attr("class", "path");

  paths.selectAll("path")
    .attr("d", function(d) { return d == null ? null : "M" + d.join("L") + "Z"; });
  
  node.call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .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;
}

path {
  fill: none;
  stroke: #999;
  pointer-events: all;
}

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

（单独的问题，但是像在 Circle Dragging IV 元素中那样将路径嵌套在 g 元素中会导致路径不希望地定位到图形的一侧。）

在中，使用多边形而不是路径和剪切路径，我可以进行拖动，但我正在尝试使用剪切路径版本作为比较，但不确定有什么区别，除了clippath 似乎是 Mike Bostock（d3 创作者）的首选。

Answer 1

如果目标是：

is to combine d3 force simulation, g elements, and voronoi polygons to make trigger events on nodes easier, such as dragging, mouseovers, tooltips and so on with a graph that can be dynamically updated.

我将从您的代码细节中退一步，尝试实现目标。我将使用两个主要来源（您参考的一个）来尝试到达那里（这样做可能会偏离基地）。

来源一：Mike Bostock's block circle dragging example.

来源二：Mike Bostock's Force-directed Graph example.

我希望这种方法至少有助于实现您的目标（我接受它的部分原因是我在阅读您的代码片段时遇到了困难）。它应该作为一个最小的例子和概念证明很有用。

和你一样，我将使用圆形拖动示例作为基础，然后我将尝试合并力导向示例。

需要导入的力导向图的关键部分正在定义模拟：

var simulation = d3.forceSimulation()

正在分配节点：

 simulation
      .nodes(circle)
      .on("tick", ticked);

(原为.nodes(graph.nodes))

指示在报价单上做什么：

force.nodes(circles)
 .on('tick',ticked);

勾选函数：

function ticked() {
    circle.selectAll('circle')
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }

（我们不需要 link 部分，我们想要更新圆圈（而不是名为节点的变量）

以及落在拖动事件中的部分。

如果我们将所有这些导入到一个片段中（组合拖动事件，添加一个打勾的函数，我们得到：

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    radius = 32;
    
var simulation = d3.forceSimulation()
    .force("charge", d3.forceManyBody())

var circles = d3.range(20).map(function() {
  return {
    x: Math.round(Math.random() * (width - radius * 2) + radius),
    y: Math.round(Math.random() * (height - radius * 2) + radius)
  };
});

var color = d3.scaleOrdinal()
    .range(d3.schemeCategory20);

var voronoi = d3.voronoi()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .extent([[-1, -1], [width + 1, height + 1]]);

var circle = svg.selectAll("g")
  .data(circles)
  .enter().append("g")
    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

var cell = circle.append("path")
  .data(voronoi.polygons(circles))
    .attr("d", renderCell)
    .attr("id", function(d, i) { return "cell-" + i; });

circle.append("clipPath")
    .attr("id", function(d, i) { return "clip-" + i; })
  .append("use")
    .attr("xlink:href", function(d, i) { return "#cell-" + i; });

circle.append("circle")
    .attr("clip-path", function(d, i) { return "url(#clip-" + i + ")"; })
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", radius)
    .style("fill", function(d, i) { return color(i); });
    
simulation
    .nodes(circles)
    .on("tick", ticked);

function ticked() {
  circle.selectAll('circle')
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });
}

function dragstarted(d) {
  d3.select(this).raise().classed("active", true);
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d3.select(this).select("circle").attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
  cell = cell.data(voronoi.polygons(circles)).attr("d", renderCell);
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d, i) {
  d3.select(this).classed("active", false);
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

function renderCell(d) {
  return d == null ? null : "M" + d.join("L") + "Z";
}

path {
  pointer-events: all;
  fill: none;
  stroke: #666;
  stroke-opacity: 0.2;
}

.active circle {
  stroke: #000;
  stroke-width: 2px;
}

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

明显的问题是除非有拖动，否则单元格不会更新。为了解决这个问题，我们只需要将在拖动时更新单元格的行放在打勾的函数中，这样它就会在打勾时更新：

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    radius = 32;
    
var simulation = d3.forceSimulation()
    .force("charge", d3.forceManyBody())

var circles = d3.range(20).map(function() {
  return {
    x: Math.round(Math.random() * (width - radius * 2) + radius),
    y: Math.round(Math.random() * (height - radius * 2) + radius)
  };
});

var color = d3.scaleOrdinal()
    .range(d3.schemeCategory20);

var voronoi = d3.voronoi()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .extent([[-1, -1], [width + 1, height + 1]]);

var circle = svg.selectAll("g")
  .data(circles)
  .enter().append("g")
    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

var cell = circle.append("path")
  .data(voronoi.polygons(circles))
    .attr("d", renderCell)
    .attr("id", function(d, i) { return "cell-" + i; });

circle.append("clipPath")
    .attr("id", function(d, i) { return "clip-" + i; })
  .append("use")
    .attr("xlink:href", function(d, i) { return "#cell-" + i; });

circle.append("circle")
    .attr("clip-path", function(d, i) { return "url(#clip-" + i + ")"; })
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", radius)
    .style("fill", function(d, i) { return color(i); });

circle.append("text")
    .attr("clip-path", function(d, i) { return "url(#clip-" + i + ")"; })
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; })
    .attr("dy", '0.35em')
    .attr("text-anchor", function(d) { return 'middle'; })
    .attr("opacity", 0.6)
    .style("font-size", "1.8em")
    .style("font-family", "Sans-Serif")
    .text(function(d, i) { return i; })
    
simulation
    .nodes(circles)
    .on("tick", ticked);

function ticked() {
  circle.selectAll('circle')
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });

  circle.selectAll('text')
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; });
    
  cell = cell.data(voronoi.polygons(circles)).attr("d", renderCell);
}

function dragstarted(d) {
  d3.select(this).raise().classed("active", true);
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d3.select(this).select("circle").attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
  cell = cell.data(voronoi.polygons(circles)).attr("d", renderCell);
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d, i) {
  d3.select(this).classed("active", false);
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

function renderCell(d) {
  return d == null ? null : "M" + d.join("L") + "Z";
}

path {
  pointer-events: all;
  fill: none;
  stroke: #666;
  stroke-opacity: 0.2;
}

.active circle {
  stroke: #000;
  stroke-width: 2px;
}

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

更新：更新节点：

添加和删除节点至少对我来说是复杂的。主要问题是上面的代码在拖动事件中使用 d3.selection.raise() 重新排列了 svg 组，如果仅使用数据元素增量，这可能会弄乱我的剪辑路径排序。与从数组中间删除项目一样，这会导致单元格、组和圆圈之间的配对问题。这种配对是主要挑战 - 以及确保任何附加节点都在正确的父节点中并以正确的顺序排列。

为了解决配对问题，我在数据中使用了一个新的属性作为标识符，而不是增量。其次，我在添加时对单元格进行了一些特定的操作：确保它们在正确的父级中并且单元格出现在 DOM 中的圆圈上方（使用 d3.selection.lower()).

注意：我没有设法移除圆圈并使 voronoi 保持典型更新周期的好方法，所以我只是为每次移除重新创建 - 因为据我所知 Voronoi 是重新计算每个报价单，这应该不是问题。

结果是（点击remove/add，点击按钮切换remove/add）：

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    radius = 32;

var n = 0;
var circles = d3.range(15).map(function() {
  return {
 n: n++,
    x: Math.round(Math.random() * (width - radius * 2) + radius),
    y: Math.round(Math.random() * (height - radius * 2) + radius)
  };
});

// control add/remove
var addNew = false;
d3.select('#control').append('input')
 .attr('type','button')
 .attr('value', addNew ? "Add" : "Remove")
 .on('click', function(d) {
  addNew = !addNew;
  d3.select(this).attr('value', addNew ? "Add" : "Remove")
  d3.selectAll('g').on('click', (addNew) ? add : remove);
 });
 

var color = d3.scaleOrdinal()
    .range(d3.schemeCategory20);

var voronoi = d3.voronoi()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .extent([[-1, -1], [width + 1, height + 1]]);

var circle = svg.selectAll("g")
  .data(circles)
  .enter().append("g")
  .attr('id',function(d) { return 'g-'+d.n })
  .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended))
  .on('click', (addNew) ? add : remove);

var cell = circle.append("path")
  .data(voronoi.polygons(circles))
    .attr("d", renderCell)
 .attr("class","cell")
    .attr("id", function(d) {  return "cell-" + d.data.n; });

circle.append("clipPath")
    .attr("id", function(d) { return "clip-" + d.n; })
  .append("use")
    .attr("xlink:href", function(d) { return "#cell-" + d.n; });


circle.append("circle")
    .attr("clip-path", function(d) { return "url(#clip-" + d.n + ")"; })
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", radius)
    .style("fill", function(d) { return color(d.n); });
 
circle.append("text")
    .attr("clip-path", function(d, i) { return "url(#clip-" + i + ")"; })
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; })
    .attr("dy", '0.35em')
    .attr("text-anchor", function(d) { return 'middle'; })
    .attr("opacity", 0.6)
    .style("font-size", "1.8em")
    .style("font-family", "Sans-Serif")
    .text(function(d) { return d.n; })
 
var simulation = d3.forceSimulation()
   .nodes(circles)
   .force('charge', d3.forceManyBody());
    

simulation.nodes(circles)
 .on('tick',ticked);
 
     
function ticked() {
circle.selectAll('circle')
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  
circle.selectAll('text')
  .attr("x", function(d) { return d.x; })
  .attr("y", function(d) { return d.y; });  

cell = cell.data(voronoi.polygons(circles)).attr("d", renderCell);

}

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
 d.fx = d.x;
 d.fy = d.y;
}

function dragged(d) {
  d3.select(this).select("circle").attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
  cell = cell.data(voronoi.polygons(circles)).attr("d", renderCell);
  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;
}




function remove () {

 d3.select(this).raise(); 
 var id = d3.select(this).attr('id').split('-')[1];
 id = +id;
 
 // Get the clicked item:
 var index = circles.map(function(d) {
  return d.n;
 }).indexOf(id);
 
 circles.splice(index,1);
 
 // Update circle data:
 var circle = svg.selectAll("g")
   .data(circles);
   
 circle.exit().remove();
 circle.selectAll("clipPath").exit().remove();
 circle.selectAll("circle").exit().remove();
 circle.selectAll("text").exit().remove();

 //// Update voronoi:
 d3.selectAll('.cell').remove();
 cell = circle.append("path")
   .data(voronoi.polygons(circles))
   .attr("d", renderCell)
   .attr("class","cell")
   .attr("id", function(d) {  return "cell-" + d.data.n; });
 
 simulation.nodes(circles)
  .on('tick',ticked);
}

function add() {
 // Add circle to circles:
 var coord = d3.mouse(this);
 var newIndex = d3.max(circles, function(d) { return d.n; }) + 1;
 circles.push({x: coord[0], y: coord[1], n: newIndex });
 
 // Enter and Append: 
 circle = svg.selectAll("g").data(circles).enter()
 
 var newCircle = circle.append("g")
   .attr('id',function(d) { return 'g-'+d.n })
   .call(d3.drag()
   .on("start", dragstarted)
   .on("drag", dragged)
   .on("end", dragended))
   .on('click',add)

 cell = circle.selectAll("path")
  .data(voronoi.polygons(circles)).enter();
  
 cell.select('#g-'+newIndex).append('path')
   .attr("d", renderCell)
   .attr("class","cell")
   .attr("id", function(d) { return "cell-" + d.data.n; });

 newCircle.data(circles).enter();
 
 newCircle.append("clipPath")
  .attr("id", function(d) { return "clip-" + d.n; })
     .append("use")
  .attr("xlink:href", function(d) { return "#cell-" + d.n; });

 newCircle.append("circle")
  .attr("clip-path", function(d) { return "url(#clip-" + d.n + ")"; })
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("r", radius)
  .style("fill", function(d) { return color(d.n); });
  
 newCircle.append("text")
      .attr("clip-path", function(d) { return "url(#clip-" + d.n + ")"; })
      .attr("x", function(d) { return d.x; })
      .attr("y", function(d) { return d.y; })
      .attr("dy", '0.35em')
      .attr("text-anchor", function(d) { return 'middle'; })
      .attr("opacity", 0.6)
      .style("font-size", "1.8em")
      .style("font-family", "Sans-Serif")
      .text(function(d) { return d.n; })
   
 cell = d3.selectAll('.cell');
  
 d3.select("#cell-"+newIndex).lower(); // ensure the path is above the circle in svg.
 
 simulation.nodes(circles)
   .on('tick',ticked);

}

function renderCell(d) {
  return d == null ? null : "M" + d.join("L") + "Z";
}

.cell {
  pointer-events: all;
  fill: none;
  stroke: #666;
  stroke-opacity: 0.2;
}

.active circle {
  stroke: #000;
  stroke-width: 2px;
}

svg {
  background: #eeeeee;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

<div id="control"> </div>
<svg width="960" height="500"></svg>

就你问题的具体部分而言，我发现你问题前两个项目符号中的拖动和剪辑路径问题主要是配对剪辑路径、单元格和圆圈以及找到正确的问题向图表添加新元素的方式 - 我希望我在上面演示过。

我希望这是最后一个片段更接近您遇到的具体问题，我希望上面的代码是清晰的 - 但它可能从清晰简洁的 Bostockian 到其他一些较低的标准。

Answer 2

Block版本。

为什么在单元格上拖动不触发？
- 因为如果cell属性有fill:none，那么它肯定有pointer-events:all.
为什么节点变模糊，路径失去样式边缘？
- 因为剪辑路径的目标是 g 元素位置而不是圆圈位置。
如何解决这个问题以拖动节点并触发事件他们喜欢鼠标悬停？
- 使用路径属性指针事件：全部，path { pointer-events: all; }
- select 所需的子元素，如圆形，或文本，在拖动或勾选事件中定位 parent.select(child).attr('d' function(d) { ..do stuff.. });
- 使用节点 ID 作为引用来简化数据数组更新或删除node.data(data, function(d) { return d.id; })

感谢安德鲁·里德的帮助。

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    color = d3.scaleOrdinal(d3.schemeCategory10);

var a = {id: "a"},
    b = {id: "b"},
    c = {id: "c"},
    data = [a, b, c],
    links = [];

var simulation = d3.forceSimulation(data)
    .force("charge", d3.forceManyBody().strength(-10))
    .force("link", d3.forceLink(links).distance(200))
  .force("center", d3.forceCenter(width / 2, height / 2))
    .alphaTarget(1)
    .on("tick", ticked);

var link = svg.append("g").attr("class", "links").selectAll(".link"),
    node = svg.append("g").attr("class", "nodes").selectAll(".node");
    
var voronoi = d3.voronoi()
 .x(function(d) { return d.x; })
 .y(function(d) { return d.y; })
 .extent([[-1, 1], [width + 1, height + 1]]);

update();

d3.timeout(function() {
  links.push({source: a, target: b}); // Add a-b.
  links.push({source: b, target: c}); // Add b-c.
  links.push({source: c, target: a}); // Add c-a.
  update();
}, 1000);

d3.interval(function() {
  data.pop(); // Remove c.
  links.pop(); // Remove c-a.
  links.pop(); // Remove b-c.
  update();
}, 5000, d3.now());

d3.interval(function() {
  data.push(c); // Re-add c.
  links.push({source: b, target: c}); // Re-add b-c.
  links.push({source: c, target: a}); // Re-add c-a.
  update();
}, 5000, d3.now() + 1000);

function update() {

  node = node.data(data, function(d) { return d.id; });
  node.exit().remove();
  var nodeEnter = node.enter().append("g")
   .attr("class", "node")
    .on("mouseover", mouseover)
    .on("mouseout", mouseout);
  nodeEnter.append("circle").attr("fill", function(d) { return color(d.id); }).attr("r", 8);
  nodeEnter.append("text")
    .attr("dx", 12)
    .attr("dy", ".35em")
   .text(function(d) { return d.id; });
  nodeEnter.append("path").attr("class", "path");
  nodeEnter.call(d3.drag()
                 .on("start", dragstarted)
                 .on("drag", dragged)
                 .on("end", dragended));
  node = node.merge(nodeEnter);


  // Apply the general update pattern to the links.
  link = link.data(links, function(d) { return d.source.id + "-" + d.target.id; });
  link.exit().remove();
  link = link.enter().append("line").merge(link);

  // Update and restart the simulation.
  simulation.nodes(data);
  simulation.force("link").links(links);
  simulation.alpha(1).restart();
}

function mouseover(d) {
 d3.select(this).raise().classed("active", true);
}

function mouseout(d) {
 d3.select(this).raise().classed("active", false);
}

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d3.select(this).select("circle").attr("cx", d.fx = d3.event.x).attr("cy", d.fy = d3.event.y);
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

function ticked() {
  node.select("circle")
   .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });
    
  node.select("path")
   .data(voronoi.polygons(data))
    .attr("d", function(d) { return d == null ? null : "M" + d.join("L") + "Z"; });
    
  node.select("text")
   .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")" });

  link.attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });
}

path {
  pointer-events: all;
  fill: none;
  stroke: #666;
  stroke-opacity: 0.2;
}

.active path {
  fill: #111;  
  opacity: 0.05;
}

.active text {
  visibility: visible;
}

.active circle {
  stroke: #000;
  stroke-width: 1.5px;
}

svg {
  border: 1px solid #888;  
}

.links {
  stroke: #000;
  stroke-width: 1.5;
}

.nodes {
  stroke-width: 1.5;
}

text {
  pointer-events: none;
  font: 1.8em sans-serif;
  visibility: hidden;
}

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

如何使用 voronoi 多边形修改 d3 力布局以触发分组元素上的事件？

How to modify a d3 force layout with voronoi polygons to trigger events on grouped elements?

voronoi

drag

d3.js

force-layout

clip-path

更新：更新节点：