D3.js语义缩放和pan示例不工作

Question

我正在尝试为D3.js实现Semantic和Pan示例的一个版本，找到了这里。我正在尝试使用Dendrogram / tree (例如这里)来实现这一点，这是Mike (这里)推荐的。目标就像这个jsFiddle，就是其他线程之一的提到过，除非没有奇怪的节点/路径断开行为。我个人的尝试是定位这里。

我在Mike的代码中遇到了一个错误，关于“无法翻译(NaN，NaN)"，所以我将缩放函数中的代码更改为如下所示。不过，这种行为很奇怪。现在，我的路径不会缩放/移动，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中提到的上图和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三次Bezier曲线的translate()函数中的各种排列，但是似乎没有什么是正确的。同样，我的jsFiddle是这里。
• 任何疑难解答提示或想法，为什么平移只部分工作？

谢谢大家的帮助！

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. 从默认呈现(或在打开/关闭节点之后)到缩放实现，bezier绘图有一点混乱。你只需要做同样的bezier函数，当你玩它的时候，它会感觉好多了。
2. 您需要根据现有节点的相对移动，在图形重绘自身之后更新缩放矢量。否则，当您在打开/关闭节点后再次缩放时，会出现突然跳转。