javascript - 带 div 和 d3 缩放的 d3 力图

Question

Stackoverflow 社区您好!我在 d3force 定向图中无法使用 d3 Zoom。我可以实现它的缩放和平移，但这样做会破坏节点和链接之间的对齐，我不知道如何修复它......我创建了一个 fiddle 来显示我的意思。 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