将平移缩放添加到 d3js 强制定向

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 画布，而您真正想要做的是平移和缩放包含网络的 g 元素。

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

您可以在此处看到具有强制布局的有效平移和缩放功能： http://bl.ocks.org/emeeks/9357371