D3.js 语义缩放和平移示例不起作用

Question

我正在尝试为 D3.js 实现一个版本的 SVG 语义缩放和平移示例，发现 here。根据 Mike Bostock (here) 的建议，我正在尝试使用 Dendrogram / 树（例如 here）来执行此操作。目标就像这个 jsFiddle 一样，其他线程之一mentioned，除了没有奇怪的节点/路径取消链接行为。我的个人尝试位于here。

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

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 是 here。
• 任何故障排除提示或想法为什么平移只能部分起作用？

感谢大家的帮助！

Answer 1

你有一个非常好的实现，但由于一个主要的错字而脱轨：

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. 您需要在图形重绘后根据现有节点的相对移动更新缩放矢量。否则，在打开/关闭节点后再次尝试缩放时会出现突然的跳跃。