Toa*_*ums 1 javascript zoom d3.js
我正在使用D3 节点链接树,我在尝试应用语义缩放时遇到问题.
我已经花了一些时间烦恼,试图让它工作 - 所以我想我会问这里,看看它是否有可能在我花更多时间之前......我不确定语义缩放是否是线性的 - 只是一件事.
编辑 - 工作解决方案
这是我的工作解决方案.我没有在这里清理代码 - 但它应该给你一个想法.
由于径向树的不同方式d.x和d.y解释,简单的"语义缩放"方法,你让行为对象和尺度进行所有的计算,是行不通的.
由树布局计算的(x,y)坐标用于绘制径向树中距离中心的角度和距离.这些值不会直接转换为缩放行为创建的x和y坐标.因此,您不能只将缩放附加到缩放行为,在缩放时自动调整缩放域,然后使用缩放重新绘制点.
(PS我假设你只是想要一个普通的变焦来放大图形的一部分,而不是像Jason Davies的可缩放的旭日例子那样重新计算角度.)
回顾一下元素如何转换为初始布局:
<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.中心和树的边缘(域).
然后,使用与上面相同的语法重置各个节点组上的transformation属性.(您将要使该匿名函数成为命名函数,因此您只需在代码的两个部分中传入函数名称.)
所以,我不知道所有额外的代码是否都算作"语义缩放"了.但它应该缩放你的图表.如果你的小提琴工作,请回来留下链接!