D3.js语义缩放和平移示例不起作用 [英] D3.js semantic zoom and pan example not working

问题描述

我正在尝试为D3.js实现SVG语义缩放和平移示例的版本，请在此处.我正在尝试按照Mike Bostock(<<此处)的树状图/树进行此操作. a href ="https://groups.google.com/forum/?fromgroups=#!topic/d3-js/A8eROvFjOVI" rel ="nofollow">此处).目标就像这样的jsFiddle，其他线程之一提到了，除非没有怪异的节点/路径未链接行为.我的个人尝试位于此处.

I am trying to implement a version of the SVG Semantic Zoom and Pan example for D3.js, found here. I am trying to do this with a Dendrogram / tree (example here), as recommended by Mike Bostock (here). The goal is like this jsFiddle that one of the other threads mentioned, except without the weird node / path unlinking behavior. My personal attempt is located here.

我在使用Mike的代码的Firebug中遇到一个错误，关于无法翻译(NaN，NaN)"，因此我将缩放功能中的代码更改为以下所示.但是，这种行为很奇怪.现在1)我的路径无法缩放/移动，2)我只能从右下-左上平移节点(如果尝试从左下-右上平移，则节点仍沿LR-UL移动方向).

I was getting an error in Firebug with Mike's code, about "cannot translate(NaN,NaN)", so I changed the code in the zoom function to what is shown below. However, the behavior is weird. Now 1) my paths don't zoom / move, and 2) I can only pan the nodes from Lower Right--Upper Left (if I try panning from Lower Left--Upper Right, the nodes still move along the LR-UL direction).

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) + ")";
}

我尝试遵循 jsFiddle 一样，但是我没有取得太大进展.在我的代码中包括来自jsFiddle的路径链接和一个translate()函数，使我可以缩放路径-除了1)它们是垂直翻转的(x和y换位不正确)； 2)路径无法以与节点相同的速率缩放(可能与#1相关)，因此它们变为未链接"； 3)当我平移时，路径现在可以在所有方向平移，但是节点不会移动.当我单击节点以展开树时，路径会重新调整并自行修复，因此更新代码似乎可以更好地工作(但我不知道如何识别/复制其工作部分).请参阅我的代码此处.

I tried following the other solutions given in the Google Groups thread mentioned above and the jsFiddle, but I don't make much progress. Including the path links from the jsFiddle in my code and a translate() function lets me scale the paths--except 1) they flip vertically (somewhere x and y transposition isn't working right); 2) the paths don't zoom at the same rate as the nodes (perhaps related to #1), so they become "unlinked"; and 3) when I pan, the paths now pan in all directions, but the nodes don't move. When I click on a node to expand the tree, the paths re-adjust and fix themselves, so the update code seems to work better (but I don't know how to identify / copy the working parts of that). See my code 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是此处.
• 任何故障排除提示或想法为何只能部分平移?

谢谢大家的帮助！

推荐答案

您有一个很好的实现，但由于一个主要的错字而出轨了:

You had a pretty good implementation that was derailed by one major typo:

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

应该是

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

要使路径不翻转，您应该不应该反转y轴:

To have your paths not flip you should have probably not reversed the y-axis:

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值上运行，否则您将真的感到困惑.

Fixes are here: http://jsfiddle.net/6kEpp/2/. But for future reference, you should probably have your x-axis operate on x-values, and y-axis operate on y-values, or you're just going to really confuse yourself.

最后的评论以完善您的实现:

1. 从默认渲染(或在打开/关闭节点之后)到缩放实现之间，贝塞尔曲线图中有些跳跃.您只需要使它们具有相同的贝塞尔曲线功能，并且在使用它时会感觉好很多.
2. 您需要根据现有节点的相对运动，在图形重绘后更新缩放向量.否则，当您打开/关闭节点后再次尝试缩放时，将会突然跳动.

这篇关于D3.js语义缩放和平移示例不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！