Question

我正在慢慢使用d3.js创建工作流设计器。我试图从样本中添加平移/缩放行为。关于如何使这个工作的任何想法？我已经部分工作了，非常粗暴地带着可怕的抖动，但是在我的沮丧中我修改了它而没有保存但是反正它很糟糕。

正在进行的工作流程

平移/缩放示例

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

将Pan Zoom添加到d3js强制定向

1 个答案: