Svg D3.js语义缩放和平移示例不工作

我正在尝试为D3.js实现SVG语义缩放和平移示例的一个版本。我正试图用Mike Bostock（）推荐的树状图/树（示例）来实现这一点。目标与其他线程中的一个类似，只是没有奇怪的节点/路径取消链接行为。我的个人企图被找到了

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

我试着遵循谷歌群组线程中提到的其他解决方案，但我没有取得多大进展。在我的代码中包含来自JSFIDLE的路径链接和一个translate（）函数，让我可以缩放路径——除了1）它们垂直翻转（x和y转置不正常的地方）；2） 路径的缩放速度与节点的缩放速度不同（可能与#1有关），因此它们变得“未链接”；3）平移时，路径现在向所有方向平移，但节点不移动。当我点击一个节点展开树时，路径会重新调整并修复自身，因此更新代码似乎工作得更好（但我不知道如何识别/复制它的工作部分）。查看我的代码

我的问题是：

• 在树状图/树上是否有缩放/平移的工作示例可供我查看
• 有了上面的代码，谁能确定路径在哪里/如何翻转？我在绘制SVG三次贝塞尔曲线的translate（）函数中尝试了各种排列，但似乎没有任何效果。再说一次，我的JSFIDLE是
• 任何故障排除提示或想法为什么平移只能部分工作

---

谢谢大家的帮助

您有一个非常好的实现，但由于一个主要的输入错误而脱轨：

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])

修复程序位于此处：。但作为将来的参考，你可能应该让你的x轴对x值进行运算，y轴对y值进行运算，否则你会把自己搞糊涂的

完善您的实施的最后一句话：

从默认渲染（或打开/关闭节点之后）到缩放实现，bezier图形中有一点跳跃。你只需要让它们具有相同的贝塞尔函数，当你使用它时，它会感觉好多了

在图形重新绘制自身后，需要根据现有节点的相对移动来更新缩放向量。否则，在打开/关闭节点后再次尝试缩放时，将突然跳转

---

嗨，安德鲁，很抱歉登记的时间太晚了。谢谢你的捕捉——你的小提琴真的很好（而且比我的小提琴变焦得更平稳！），是的，我完全搞不清楚x和y之间的关系。。。

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

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