Javascript 使用D3，语义缩放可以应用于放射状树吗？

我正在使用D3，我在尝试将语义缩放应用到它时遇到了困难

我已经花了一点时间在忙忙碌碌，试图让它发挥作用-所以我想我会在这里问一下，在我花更多时间之前看看这是否可能。。。我不确定语义缩放是否只是一种线性的东西

编辑-工作解决方案

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

---

由于径向树中对

d.x

和

d.y

的解释方式不同，简单的“语义缩放”方法（让行为对象和尺度进行所有计算）不起作用

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

（顺便说一句，我假设你只是想用普通的缩放放大一部分图形，而不是像杰森·戴维斯的例子那样重新计算角度。）

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

• 包含图形的
  元素上的平移将（0,0）坐标定位在绘图区域的中心

• 根据布局中的

  d.x

  值（始终介于0和360之间）计算的每个节点组上的旋转设置角度

• 然后（顺序很重要），每个节点组上的平移会根据布局中的

  d.y

  值沿旋转的基线将其移离中心，该值基于所需的圆半径进行缩放

请注意，radial tree示例执行树布局函数中的所有缩放操作（通过调用

size（）

方法）——不使用缩放

要放大圆的某一部分，您需要：

• 通过对
  元素应用变换，将布局中心转换到绘图中心以外的位置

• 或者通过对
  元素进行第二次变换来更改整个图像的比例（这也将缩放文本、圆圈大小等）

• 或者根据比例因子更改每个节点的水平平移

请注意，将节点的旋转角度单独保留

如果您不介意缩放文本和节点的大小，那么将转换应用到

元素相当简单

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

要获得中心的正确翻译，请执行以下操作：

• 在缩放功能中，使用

  d3.event.translate

  访问整个图形所需平移的（x，y）数组

• 使用此选项可以覆盖
  元素上的变换，记住对于（0,0）的缩放平移，您仍然希望
  元素的平移为（宽度/2，高度/2）。所以你需要一些类似的东西：

  svg.attr（“transform”、“translate”（+（width/2+d3.event.translate[0]）+
  
  “，”+（height/2+d3.event.translate[1]）+”）
  

• 如果要直接缩放
  元素，则必须将同一属性调用中的两个转换设置为一个长字符串，并且需要进行一些测试，以查看在转换之前或之后应用缩放是否更自然（

  scale（2）translate（50）

  等于

  translate（100）缩放（2）

  ，因为平移坐标也会缩放）。缩放因子可用作

  d3.event.scale

要使距离中心（“y”变量）的比例正确，请执行以下操作：

• 使用域

  [0,1]

  和范围

  [0，半径]

  创建径向刻度

• 将树布局的大小设置为“高度”为1，而不是直接使用半径

• 定位节点时，使用比例将布局中的

  d.y

  值（介于0和1之间）转换为变换中使用的实际径向距离

  node.attr（“转换”，函数（d）{return”旋转（“+（d.x-90）
  
  +）翻译（“+径向刻度（d.y）+”；}）

• 在缩放行为上，不要附加任何比例！尽管需要根据缩放调整径向比例，但您只需要调整比例，而不需要进行平移——所有平移将直接应用于定义圆心的
  元素

• 在缩放功能中，将径向比例域设置为

  [0，1/d3.event.scale]

  。换句话说，如果缩放行为告诉我们将图像缩放2，我们需要打印区域中心和边缘之间的距离（范围，您不会更改）表示树（域）中心和边缘之间的1/2距离

• 然后，使用与上述相同的语法重置各个节点组上的转换属性。（您需要将该匿名函数设置为命名函数，以便只需在代码的两部分中传入函数名。）

---

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

你看到了吗？是的，@Larskothoff，我已经读过了。这对m来说很容易