在 d3.js 树上设置初始缩放级别（动态）

Question

我在这个例子之后建立了一棵树。现在我有了一些数据，初始缩放太接近，所以我想设置数据适合屏幕的初始缩放级别。我完全可以采用手动方法，在脚本中设置比例。当然，动态地制作它也非常好，（仅）取决于宽度（以便显示所有水平数据）。

这是脚本中的缩放功能：

function zoom() {
    svgGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

这是 ZoomListener 函数：

var zoomListener = d3.behavior.zoom().scaleExtent([0.1, 3]).on("zoom", zoom);

我已经在这里和那里阅读了一些文章（以及其他一些文章），但我不明白如何将这些解决方案实现到我的树中，因为我对 d3 和一般编程非常陌生。

在此先感谢您的帮助！:)

Answer 1

最后我自己通过更多文章找到了解决方案。这篇文章给出了有帮助的主要代码片段（在阅读了更多内容之后），但首先对我来说并没有得到充分的解释。

因此，使用给定示例树代码的解决方案如下：

要设置初始缩放级别，您需要向 g 元素添加一行，以便 ZoomListener 工作（它几乎位于脚本的底部），如下所示：

// Append a group which holds all nodes and which the zoom Listener can act upon.
var svgGroup = baseSvg.append("g")
    .attr("transform","translate(100,30)scale(.3,.3)");

我基本上只是向包含所有其他节点的 g 元素添加一个属性。该属性中设置的是初始缩放级别。平移值和比例相同似乎很重要（30/100 = 0.3 ;)）。否则它无法正常工作。

但现在的问题是，当我们第一次想要缩放或在树上移动时，它会跳回比例 1，这对用户来说不太好，因为他会因这种突然的跳跃而感到困惑。

为了获得流畅的用户体验，我只在上面提到的 ZoomListener 中添加了一小行，它看起来像这样（它的平移和缩放与以前相同）：

 var zoomListener = d3.behavior.zoom().translate([100,30]).scale(.3).scaleExtent([0.3, 3]).on("zoom", zoom);

现在初始缩放级别是硬编码的并且可以轻松调整 - 最棒的是：只需要两行：D

我会尝试一种动态的方法。当我有解决方案时，我将编辑此解决方案:)

编辑：我找到了一个动态解决方案 - 至少对于我的情况：当使用 php 创建（可自定义）树的数据时，我检查树的深度（一行中有多少个节点）。这个深度被写入SESSION中。在我的 javascript 中的树函数开始之前，我初始化并设置：

var depth_of_tree = window.SESSION.depth_of_tree;

初始比例为 1 除以深度 ln：

var initscale = 1 / Math.log(depth_of_tree); 

然后，我使用以下几行更改 ZoomListener：

//var initscale = .3;
var inittransx = 100;
var inittransy = inittransx*initscale;

// define the zoomListener which calls the zoom function on the "zoom" event constrained within the scaleExtents
var zoomListener = d3.behavior.zoom().translate([inittransx,inittransy]).scale(initscale).scaleExtent([0.3, 2]).on("zoom", zoom);

和：

// Append a group which holds all nodes and which the zoom Listener can act upon.
var svgGroup = baseSvg.append("g")
    .attr("transform","translate("+inittransx+","+inittransy+")scale("+initscale+","+initscale+")");

无论树有多深，这都会产生相当漂亮的尺度。（你可能需要玩一下数字）