javascript - 如何在D3的“可缩放冰柱布局”中旋转文本标签？

我已在此处提供的“可缩放冰柱布局”示例中添加了标签：http://bl.ocks.org/mbostock/1005873

我使用以下命令根据可用空间旋转标签：

.attr("transform", function (d) {
     return (x(d.x + d.dx) - x(d.x)) > 50 ?
          ("translate(" + (x(d.x + d.dx / 2)) + "," + (y(d.y + d.dy / 2)) + ")rotate(0)") :
          ("translate(" + (x(d.x + d.dx / 2)) + "," + (y(d.y + d.dy / 2)) + ")rotate(90)"); })

如果空间太小而无法保持水平，则会旋转标签90'。

我想知道如何获得每个d的旋转值？

最佳答案

您可以抽象出确定旋转角度的代码，将表达式简化为：

function rotation(d, x) {
    return (x(d.x + d.dx) - x(d.x)) > 50 ? 0 : 90;
}

// ...
.attr("transform", function (d) {
      return "translate(" + [(x(d.x + d.dx / 2)), (y(d.y + d.dy / 2))] + ")" +
             "rotate(" + rotation(d, x) + ")";
})

然后，每当需要绑定到数据d的点的旋转值时，都调用rotation(d, x)。

关于javascript - 如何在D3的“可缩放冰柱布局”中旋转文本标签？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20621130/