我正在研究一个几何扳手的可视化。我的可视化有一个访问每个点的六边形。六边形由三条路径构成。现在，我的代码显示了一个六边形在每个节点上顺序出现和消失。这很好。但我想展示的是六边形从一个节点移动到下一个节点我必须在HTML中创建一个定制的SVG元素，或者将两组数据绑定到同一个图（1-要访问的位置，2-创建六边形的路径位置）。

plot = {
  const height = 600
  const width = 800
  const numPoints = 10
  let nodes = []

  for (let i = 0; i < numPoints; i++) {
    var x = Math.floor(Math.random() * (750 - 100) + 100)
    var y = Math.floor(Math.random() * (550 - 100) + 100)
    let point = {
        "x": x,
        "y": y
    }
    nodes.push(point)
  }

  const svg = d3
    .create("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("viewBox", [0, 0, width, height])
    .attr("class", "svg-bg");

  const rayLength = 200;

  const data = [{source: [-rayLength, 0], target: [rayLength,0]},
                {source: [-rayLength*Math.cos(Math.PI/3),-rayLength*Math.sin(Math.PI/3)],                       target: [rayLength*Math.cos(Math.PI/3),rayLength*Math.sin(Math.PI/3)]},
                {source: [rayLength*Math.cos(Math.PI/3),-rayLength*Math.sin(Math.PI/3)],                       target: [-rayLength*Math.cos(Math.PI/3),rayLength*Math.sin(Math.PI/3)]},]

  const local = d3.local();
  var group = svg.selectAll("g")
    .data(nodes)
    .enter()
    .append("g")
    .attr("transform", function (d,i) {
      local.set(this,i);return "translate(" + d.x + "," + d.y + ")"
    })

  var spanner = group.selectAll("path")
    .data(data)
    .enter()
    .append("path")
    .transition()
    .delay(function(d,i) {const p = local.get(this); return p*2000})
    .attr("d", function(d) {return "M"+d.source[0]+" "+d.source[1]+"L"+d.target[0]+" "+d.target[1]})
    .attr("stroke", "#D3D3D3")
    .transition()
    .delay(function(d,i) {const p = local.get(this); return 1500})
  .remove()

  var circles = group.append("circle")
    .attr("r",3)
    .attr("fill","black")

  return svg.node()
}