Question

我在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非常环保编程一般。

提前感谢您的帮助！：）

Answer 1

最后，我自己找到了一些解决方案。 this article提供了帮助（在阅读了更多内容之后）的主要代码片段，这对我来说是不够的。

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

要设置初始缩放级别，您需要在g-element中添加一行，以便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+")");

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

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

1 个答案: