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

Question

我正在使用D3 node link tree，并且尝试将语义缩放应用到它时遇到了麻烦。

我已经花了一些时间来尝试使它正常工作-所以我想在这里问一下，看看是否有可能在我花更多的时间之前...我不确定语义缩放是否是线性的-唯一的事情。

编辑-工作解决方案

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

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

Answer 1

由于在放射状树中解释d.x和d.y的方式不同，简单的“语义缩放”方法无法起作用，在这种方法中，让行为对象和比例尺执行所有计算。

由树布局计算的（x，y）坐标用于绘制径向树中的角度和与中心的距离。这些值不会直接转换为缩放行为创建的x和y坐标。因此，您不仅可以将比例尺附加到缩放行为上，还可以在缩放时自动调整比例尺域，然后使用比例尺重新绘制点。

（P.S.我假设您只是想使用普通缩放来放大图形的一部分，而不是像Jason Davies的zoomable sunburst示例那样重新计算角度。）

关于如何为初始布局转换元素的概述：


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


请注意，放射状树示例在树布局功能内进行了所有缩放（通过调用size()方法）—不使用缩放。

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


通过将变换应用于<g>元素，将布局的中心平移到绘图中心以外的其他位置。
通过在<g>元素上进行第二次变换来更改整个图像的比例（这还将缩放文本，圆圈大小等）。
或根据比例因子更改每个节点的水平平移。


请注意，您不必理会节点的旋转角度！

如果您不介意缩放文本和节点的大小，则将转换应用于<g>元素非常简单。

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

要正确获取中心翻译：


在缩放功能中，使用d3.event.translate访问整个图形所需翻译的（x，y）数组。
使用此方法可以覆盖<g>元素上的转换，请记住，对于（0,0）的缩放转换，您仍然希望<g>元素具有（width / 2，height / 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，而不是直接使用半径。
放置节点时，使用比例尺将布局中的d.y值（介于0和1之间）转换为转换中使用的实际径向距离。

node.attr("transform", function(d) { return "rotate(" + (d.x - 90)
+ ")translate(" + radialScale(d.y) + ")"; })
在缩放行为上，请勿附加任何比例！尽管您需要根据缩放比例来调整径向比例，但是您只想调整比例而不平移-所有平移将直接应用于定义圆心的<g>元素。
在缩放功能中，将径向比例的域设置为[0, 1/d3.event.scale]。换句话说，如果缩放行为告诉我们将图像缩放2倍，则我们希望绘图区域的中心和边缘之间的距离（该范围，您无需更改）代表该距离的1/2。树的中心和边缘（域）。
然后，使用与上述相同的语法在各个节点组上重置转换属性。 （您需要将该匿名函数命名为命名函数，以便您只需在代码的两个部分中都传入该函数名即可。）


因此，我不知道所有这些额外的代码是否也算作“语义缩放”了。但是它应该缩放您的图形。如果您的提琴工作正常，请返回并留下链接！