javascript - 旋转 D3 SVG 以对齐特定 Angular

Question

我正在使用 D3 创建一些数据的边缘层次模型。

我想要做的是点击一个边缘节点并让它与红线对齐。

到目前为止，我尝试过计算中间节点 (x,y) 位置与边缘节点 (x,y) 位置之间的 Angular 差。这没有给我正确的结果。

我认为正确的方法是获取节点的 Angular (相对于中间)。虽然我在做这件事时遇到了很多麻烦，因为我找不到哪个属性存储了这些信息。边缘层次结构基于此:

http://bl.ocks.org/mbostock/7607999

文本由以下代码生成:

node = node
      .data(nodes.filter(function(n) { return !n.children; }))
    .enter().append("text")
      .attr("class", "node")
      .attr("dy", ".31em")
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + (d.y + 8) + ",0)" + (d.x < 180 ? "" : "rotate(180)"); })
      .style("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
      .text(function(d) { return d.key; })
      .on("mouseover", mouseovered)
      .on("mouseout", mouseouted);

任何信息都会有很大帮助。谢谢

Answer 1

负责旋转整个轮子的线如下:

.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + (d.y + 8) + ",0)" + (d.x < 180 ? "" : "rotate(180)"); })

当d.x=270时，数据与红线对齐。在您的情况下，调用“原点”所选数据(必须位于红线上的数据)，您需要给出 d.x - origin.x + 270 的 Angular 。

要使值保持在 0 到 360 之间，可以使用以下技巧:

(d.x - origin.x + 270 +360) % 360

所以我认为最简单的方法是在数据中添加一个“Angular ”字段，然后用它代替 d.x。

node = node
      .data(nodes.filter(function(n) { return !n.children; }))
    .enter().append("text")
      .attr("class", "node")
      .attr("dy", ".31em")
      .each(function(d) { d.angle =   (d.x - origin.x + 270 +360) % 360 })
      .attr("transform", function(d) { return "rotate(" + d.angle - 90 + ")translate(" + (d.y + 8) + ",0)" + (d.angle < 180 ? "" : "rotate(180)"); })
      .style("text-anchor", function(d) { return d.angle < 180 ? "start" : "end"; })
      .text(function(d) { return d.key; })
      .on("mouseover", mouseovered)
      .on("mouseout", mouseouted);