D3:如何在一组力布局节点上绘制多个凸壳？

// 创建力布局对象
var simulation = d3.forceSimulation()
  .nodes(nodes)
  .force("charge", d3.forceManyBody().strength(-20))
  .force("center", d3.forceCenter(width / 2, height / 2))
  .on("tick", ticked);

// 更新力布局
function ticked() {
  // 更新节点位置
  node.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });

  // 更新凸壳路径
  hullPaths.attr("d", function(d) { return "M" + d.join("L") + "Z"; });
}

// 创建凸壳生成器
var hull = d3.polygonHull();

// 为每个凸壳生成器绑定节点数据
var hullPaths = svg.selectAll(".hull")
  .data(groups)
  .enter().append("path")
    .attr("class", "hull");

// 生成凸壳路径
hullPaths.each(function(d) {
  hull.data(d)
    .sort(function(a, b) { return a[0] - b[0]; })
    .sort(function(a, b) { return a[1] - b[1]; });
  d3.select(this).datum(hull).attr("d", function(d) { return "M" + d.join("L") + "Z"; });
});

// 绘制凸壳
hullPaths.attr("fill", "none")
  .attr("stroke", "steelblue")
  .attr("stroke-width", 1);