使用D3，语义缩放可以应用于径向树吗？

Question

我使用的是D3 节点链接树，我很难将语义缩放应用于它。

我已经花了一段时间的时间，试图让它工作-所以我想我要问这里，看看它是否可能在我花更多的时间.我不确定语义缩放是否是一种线性的东西。

编辑-工作解决方案

这是我的解决方案。我没有清理这里的代码-但它应该给你一个想法。

http://codepen.io/toadums/pen/wjovC

Answer 1

由于d.x和d.y在径向树中的解释方式不同，所以简单的“语义缩放”方法--让行为对象和尺度来完成所有的计算--是行不通的。

由树布局计算的(x，y)坐标用于绘制径向树中距离中心的角度和距离。这些值不会直接转换为缩放行为创建的x和y坐标。所以你不能只是把你的天平附加到你的缩放行为上，让缩放域在缩放时自动调整，然后用缩放重绘你的点。

(P.S.我假设你只是想用普通的缩放来放大图表的一部分，而不是像Jason的可放大的太阳爆发例子那样重新计算角度。)

简要介绍如何将元素转换为初始布局：

• 包含图形的<g>元素的转换，该元素将(0,0)坐标放置在绘图区域的中心。
• 根据布局的d.x值计算的每个节点组上的旋转(总是在0到360之间)设置角度。
• 然后(顺序是重要的)，在每个节点组上的一个平移将其从中心移开，沿着旋转的基线，根据根据所需圆的半径进行缩放的布局的d.y值。

请注意，径向树示例执行树布局函数中的所有缩放(通过调用size()方法) --不使用刻度。

为了放大圆圈的一个部分，您需要：

• 通过将转换应用到<g>元素，将布局的中心转换到绘图中心以外的地方。
• 或者更改整个图像的比例(这也会缩放文本、圆圈大小等)。在<g>元素上进行第二次转换
• 或根据比例因子更改每个节点的水平平移。

请注意，您没有考虑节点的旋转角度！

如果您不介意缩放文本和节点的大小，那么将转换应用到<g>元素是相当简单的。

如果要缩放布局而不增加单个元素的大小，则需要更改布局中心距离的计算方法。

为了使中心的翻译正确：

• 在缩放函数中，使用d3.event.translate访问整个图形所需转换的(x，y)数组。
• 使用此方法对<g>元素进行转换，记住对于缩放转换(0,0)，您仍然希望<g>元素的转换为(宽度/2，高度/2)。所以你需要这样的东西： svg.attr("transform", "translate(" + (width/2 + d3.event.translate[0]) + "," + (height/2 + d3.event.translate[1]) + ")" );
• 如果要直接缩放<g>元素，则必须在相同的属性调用中设置两个转换，作为一个长字符串，并且需要进行一些测试，以确定在转换之前或之后应用缩放是否更自然(scale(2) translate(50)等于translate(100) scale(2)，因为转换坐标也会被缩放)。刻度因子可用为d3.event.scale。

要使距中心的距离("y“变量)的缩放正确：

• 使用域[0,1]和范围[0,radius]创建径向刻度。
• 将树布局的大小设置为“高度”为1，而不是直接使用半径。
• 在定位节点时，使用缩放将布局(在0到1之间)的d.y值转换为转换中使用的实际径向距离。 node.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + radialScale(d.y) + ")"; })
• 在你的变焦行为，不要附加任何鳞片！尽管您需要根据缩放来调整径向刻度，但是您只想调整刻度，而不是转换它--所有的转换都将直接应用于定义圆心的<g>元素。
• 在缩放函数中，将径向比例尺的域设置为[0, 1/d3.event.scale]。换句话说，如果缩放行为告诉我们缩放图像2，我们希望绘图区域的中心和边缘之间的距离(不改变范围)表示1/2 --树的中心和边缘之间的距离(域)。
• 然后，使用与上面相同的语法重置单个节点组上的转换属性。(您将希望使该匿名函数成为一个命名函数，这样您就可以在代码的两个部分中传递函数名。)

所以，我不知道这些额外的代码是否还算“语义缩放”。但它应该放大你的图形。如果你的小提琴工作，回来，留下一个链接！