Question

我正在学习d3.js，我找到了Knowledge Center。我做了一些改变，没什么特别的。但是，我想为它添加一个缩放，这会带来很多麻烦。

以下是我到目前为止（代码也可在下面找到）：this example

（参见我做过和想做的评论）

我正在使用此方法进行缩放和平移：

securityUtility

效果很好，但是当我第一次使用变焦或平移时，整个svg会回到（0,0）坐标。

我发现以下属性负责首先将svg居中（请参阅我所做或想要做出的更改的评论）：

.call(d3.behavior.zoom().on("zoom", function () {
        svg.attr("transform", "translate(" + d3.event.translate[0] + "," + d3.event.translate[1] + ")" + " scale(" + d3.event.scale + ")")}))

因此，当我进行缩放时，这部分代码将无效，中心将变为（0,0）。

然后我使用了这个代码片段，但是把它放在svg的“Links”部分，它会使链接部分居中，而不是在缩放后错误地重新定位。

我现在要做的是以相同的方式对文本进行居中（它们是在“节点”部分生成的。有一个属性可以生成每个文本的位置。

我的问题是如何将文本居中，以便缩放/平移正常工作，或者如何使svg不在（0,0）处重新定位。如果这种缩放/面板方法不起作用，我应该使用哪一种（我想要无限缩放/缩小，而不是最大/最小）。

以下是相同的代码，但链接已重新定位，文档未居中：https://fiddle.jshell.net/4w65nbq9/3/

以下代码已删除其样式以缩短其时间（请参阅注释）：

.attr("transform", "translate(" + radius*1.5 + "," + radius + ")")

Answer 1

我发现了问题所在。简单的解决方案是在svg变换之后添加一个额外的.append（g），如下所示：

localhost://abc.com/abc/campaign-timeline?campaign=67

d3.js缩放+平移中心改变了

1 个答案: