放大力导向图中的定义

Question

我目前正在实现一个 d3JS 力定向图，我为其创建了一个标记定义，并将其附加到链接（路径）。

问题是，当我使用缩放功能时，标记就会消失，当我平移时也会发生同样的情况。

如何使标记在力导向图中保持相对位置？

这是我的缩放代码：

this.zoom = d3.zoom().on('zoom', (e) => {
        const transform = e.transform;
        this.chart.selectAll("path").attr('transform', transform);
        this.chart.selectAll("circle").attr('transform', transform);
        this.chart.selectAll("marker").attr('transform', transform);
      });

      this.chart.call(this.zoom);

& 这是相关的标记定义和代码：

//link arrow
      this.chart.append("defs").selectAll("marker")
        .data(["dominating"])
        .enter().append("marker")
        .attr('markerUnits', 'userSpaceOnUse')
        .attr("id", function (d) {
          return d;
        })
        .attr("viewBox", "0 -5 10 10")
        .attr("refX", 30)
        .attr("refY", 0)
        .attr("markerWidth", 4)
        .attr("markerHeight", 5)
        .attr("orient", "auto-start-reverse")
        .append("path")
        .attr("d", "M0,-5L10,0L0,5")
        .attr("fill", "red");

this.link = this.link
        .data(edges, d => [d.source, d.target])
        .join(enter => enter.insert("path", "circle")
          .attr("fill", "none")
          .attr("stroke-width", 1)
          .attr("stroke", red)
          .attr("marker-end", "url(#dominating)"));

提前致谢！

Answer 1

我找到了一个似乎有效的解决方案。 基本上，我们不是放大某些元素，而是放大整个图表。

//you need to add an inbetween element where you append all other elements (nodes,links, etc)
this.scene = this.chart.append("g");

//we apply the zoom on the child element
this.zoom = d3.zoom().on('zoom', (e) => {
    this.scene.attr("transform", e.transform);
});
this.chart.call(this.zoom);

希望这有帮助！