0

我正在尝试为 D3.js 实现一个版本的 SVG Semantic Zoom and Pan 示例，在此处找到。按照 Mike Bostock（此处）的建议，我正在尝试使用 Dendrogram / 树（此处为示例）来执行此操作。目标就像其他线程之一提到的这个 jsFiddle ，除了没有奇怪的节点/路径取消链接行为。我的个人尝试位于此处。

我在使用 Mike 的代码的 Firebug 中遇到错误，关于“无法翻译（NaN，NaN）”，因此我将缩放功能中的代码更改为如下所示。但是，行为很奇怪。现在 1）我的路径不缩放/移动，2）我只能从右下角--左上角平移节点（如果我尝试从左下角--右上角平移，节点仍然沿着 LR-UL 移动方向）。

var vis = d3.select("#tree").append("svg:svg")
              .attr("viewBox", "0 0 600 600")
              .attr("width", w + m[1] + m[3])
              .attr("height", h + m[0] + m[2])
              .append("svg:g")
              .attr("transform", "translate(" + m[3] + "," + m[0] + ")")
              .call(d3.behavior.zoom().x(x).y(y).scaleExtent([1,8]).on("zoom",zoom));

// zoom in / out
function zoom() {
    var nodes = vis.selectAll("g.node");
    nodes.attr("transform", transform);
}

function transform(d) {
    return "translate(" + x(d.y) + "," + y(d.x) + ")";
}

我尝试遵循上面提到的 Google Groups 线程和jsFiddle中给出的其他解决方案，但我没有取得太大进展。在我的代码中包含来自 jsFiddle 的路径链接和 translate() 函数让我可以缩放路径——除了 1）它们垂直翻转（某处 x 和 y 转置无法正常工作）；2）路径不以与节点相同的速率缩放（可能与＃1有关），因此它们变得“未链接”；3）当我平移时，路径现在向各个方向平移，但节点不移动。当我单击一个节点展开树时，路径会重新调整并自行修复，因此更新代码似乎工作得更好（但我不知道如何识别/复制其中的工作部分）。在这里查看我的代码。

function zoom(d) {
    var nodes = vis.selectAll("g.node");
    nodes.attr("transform", transform);

    // Update the links...
    var link = vis.selectAll("path.link");
    link.attr("d", translate);
}

function transform(d) {
    return "translate(" + x(d.y) + "," + x(d.x) + ")";
}

function translate(d) {
    var sourceX = x(d.target.parent.y);
    var sourceY = y(d.target.parent.x);
    var targetX = x(d.target.y);
    var targetY = (sourceX + targetX)/2;
    var linkTargetY = y(d.target.x0);
    var result = "M"+sourceX+","+sourceY+" C"+targetX+","+sourceY+" "+targetY+","+y(d.target.x0)+" "+targetX+","+linkTargetY+"";
    //console.log(result);

   return result;

我的问题是：

  • 我可以查看树形图/树上的缩放/平移的任何工作示例吗？
  • 使用我上面的代码，任何人都可以确定路径在哪里/如何被翻转？我在绘制 SVG Cubic Bezier 曲线的 translate() 函数中尝试了各种排列，但似乎没有任何效果。同样，我的 jsFiddle 在这里。
  • 为什么平移只能部分起作用的任何故障排除提示或想法？

谢谢你们每一个人的帮助！

4

1 回答 1

2

你有一个很好的实现，但由于一个主要的错字而出轨：

function transform(d) {
    return "translate(" + x(d.y) + "," + x(d.x) + ")";
}

本来应该

function transform(d) {
    return "translate(" + x(d.y) + "," + y(d.x) + ")";
}

为了让你的路径不翻转，你可能不应该反转 y 轴：

y = d3.scale.linear().domain([0, h]).range([h, 0])

变成

y = d3.scale.linear().domain([0, h]).range([0, h])

修复在这里：http: //jsfiddle.net/6kEpp/2/。但是为了将来参考，您可能应该让您的 x 轴对 x 值进行操作，而 y 轴对 y 值进行操作，否则您只会让自己感到困惑。

完善您的实施的最后评论：

  1. 从默认渲染（或在打开/关闭节点之后）到缩放实现的贝塞尔绘图中有一点跳跃。你只需要使那些相同的贝塞尔函数，当你玩它时感觉会好很多。
  2. 您需要在图形重绘后根据现有节点的相对移动更新缩放矢量。否则，在打开/关闭节点后再次尝试缩放时会出现突然的跳跃。
于 2013-02-25T18:52:37.400 回答