javascript - 将 Pan Zoom 添加到 d3js force directed

Question

我正在慢慢地使用 d3.js 制作工作流设计器。我正在尝试从示例中添加平移/缩放行为。关于如何让它工作的任何想法？我已经让它部分工作了，非常粗暴，伴随着可怕的抖动，但令我沮丧的是，我在没有保存的情况下修改了它，尽管它很差。

进行中的工作流

http://jsfiddle.net/3ckG5/27/

平移/缩放示例

http://bl.ocks.org/benzguo/4370043

鼠标按下

  if (!mousedown_node && !mousedown_link) {
    // allow panning if nothing is selected
    svg.call(d3.behavior.zoom().on("zoom"), rescale);
    return;
  }  

鼠标弹起

  if (!mousedown_node && !mousedown_link) {
    // allow panning if nothing is selected
    force.start();
    svg.call(d3.behavior.zoom().on("zoom"), null);
    return;
  } 

附加事件

为力导向图创建背景。

var svg = d3.select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height);

调用缩放函数的行为

svg.call(d3.behavior.zoom().on("zoom", rescale))
    .on("dblclick.zoom", null)
    .on("mousemove", mousemove)
    .on("mousedown", mousedown)
    .on("mouseup", mouseup);

回调缩放事件

// rescale g
function rescale() {
  var trans=d3.event.translate;
  var scale=d3.event.scale;

  svg.attr("transform",
      "translate(" + trans + ")"
      + " scale(" + scale + ")");
}

Answer 1

您遇到的问题是您正在平移和缩放 SVG Canvas ，而您真正想要做的是平移和缩放保存网络的 g 元素。

不过请记住，当您缩放 g 元素时，它会缩放其中每个元素的笔画宽度，因此您需要根据当前缩放级别重新调整笔画宽度 (只需将所需笔划宽度除以当前比例值即可)。

您可以在此处看到一个具有强制布局的工作平移和缩放: http://bl.ocks.org/emeeks/9357371