带有 div 和 d3 缩放的 d3 力图

Question

您好 Stackoverflow 社区！ 我无法让 d3 zoom 在我的 d3force 有向图中工作。我可以实现它正在缩放和平移，但这样做会破坏节点和链接之间的对齐，我不知道如何修复它......我创建了一个小提琴来展示我的意思。 https://jsfiddle.net/5jgrf5h8/5/

这是我执行缩放的代码：

svg.call(d3.zoom()
  //.scaleExtent([1 / 2, 4])
  .on("zoom", zoomed))
.on("dblclick.zoom", null);
//.on("wheel.zoom", null);

function zoomed() {
  //link.attr("transform", d3.event.transform);
  link.attr("transform", "translate(" + d3.event.transform.x + "," + d3.event.transform.y + ") scale(" + d3.event.transform.k + ")");
  node.style("transform", "translate(" + d3.event.transform.x + "px," + d3.event.transform.y + "px) scale(" + d3.event.transform.k + ")");

  simulation.alphaTarget(0.001).restart();
  simulation.alphaTarget(0);
}

Answer 1

当您在 div 节点上应用 CSS scale 时，它的原点是 0,0，而不是它们当前所在位置的原点。

试试这个：

function zoomed() {

    // apply CSS scale with respect to current position
    node.each(function(d){
    var self = d3.select(this),
            x = self.style("left"),
        y = self.style("top");
    self.style("transform-origin", "-" + x + " -" + y);
  })

  link.attr("transform", "translate(" + d3.event.transform.x + "," + d3.event.transform.y + ") scale(" + d3.event.transform.k + ")");
  node.style("transform", "translate(" + d3.event.transform.x + "px," + d3.event.transform.y + "px) scale(" + d3.event.transform.k + ")");

  simulation.alphaTarget(0.001).restart();
  simulation.alphaTarget(0);
}

---

更新fiddle here