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

【问题标题】：set initial zoom level at d3.js tree (dynamically)在 d3.js 树上设置初始缩放级别（动态）
【发布时间】：2018-07-05 23:38:08
【问题描述】：

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

这是脚本中的缩放功能：

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

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

提前感谢您的帮助！ :)

【问题讨论】：

标签： d3.js

【解决方案1】：

最后我自己找到了一个解决方案，还有更多文章。 this article 给出了有帮助的主要代码 sn-ps（在阅读了更多内容之后），这对我来说首先解释得不够充分。

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

要设置初始缩放级别，您需要在 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+")");

无论树有多深，这都会产生非常好的比例。（你可能需要玩一下数字）

【讨论】：