如何在Sankey图（D3.JS）中的节点上垂直对齐文本？

Question

我在http://bost.ocks.org/mike/sankey/修改了D3.Js中的Sankey图的Mike Bostok示例，以显示每个节点的值，如下所示：

Sankey http://uweb.cs.uvic.ca/~maleh2/sankey.png

node.append("text")
    .attr("class","nodeValue");

///align vertically??
node.selectAll("text.nodeValue")
    .attr("x", sankey.nodeWidth() / 2)
    .attr("y", function (d) { return (d.dy / 2) })
    .text(function (d) { return formatNumber(d.value); })
    .attr("text-anchor", "middle");
    //.attr("transform", "rotate(-90)")

来自Mike的示例和我的修改的所有代码都在jsfiddle（ http://jsfiddle.net/4xNK5/ ）。 我的问题是如何垂直显示节点的值？ 我假设一个简单的.attr（“transform”，“rotate（-90）”）; 会做的。 实际上，我得到的节点的值垂直对齐但不合适。 我无法理解它背后的逻辑。 任何想法，将不胜感激...

Answer 1

我将引导您完成几个实验（所有这些都伴随着jsfiddles），它将指导您解决问题。

初始点

（ 点击查看jsfiddle ）

这是您的问题中略有修改的示例：

它已被修改，以便它包含JavaScript而不是JSON文件中的数据，并且它还包含来自Sankey插件的代码。 这只是为了在JsFiddle中有工作示例。 您当然可以调整它以满足您的数据等需求......

关键代码在这里，正如您已经提到的：

  node.selectAll("text.nodeValue")
      .attr("x", sankey.nodeWidth() / 2)
      .attr("y", function (d) { return (d.dy / 2) })
      .text(function (d) { return formatNumber(d.value); })
      .attr("text-anchor", "middle");

---

实验1

（ 点击查看jsfiddle ）

我真的很困扰节点的值和名称没有对齐，所以我添加了这个稍微向下移动值的代码：

      .attr("dy", 5)

结果如下：

---

实验2

（ 点击查看jsfiddle ）

现在让我们尝试添加这个代码（我故意使用45度来更容易地发现旋转的工作方式）：

      .attr("transform", "rotate(-45)")

令人惊讶的是，我们得到了：

如果我们检查firebug或类似工具中的html / svg，我们会注意到这种旋转行为的原因是值标签实际上是其他容器的一部分:(并且旋转中心不是标签的中心，而是起源于那个容器）

---

实验3

（ 点击查看jsfiddle ）

在这个实验中，我想避免使用旋转。 我想使用svg text属性writing-mode ，如下所示：

      .style("writing-mode", "tb")

我得到了这个：

但是，我无法将值标签定位为左上角。 另外，我听说这种方法有一些Firefox兼容性问题，所以我放弃了。

---

解

（ 点击查看jsfiddle ）

在上面的实验之后，我的结论是应该首先进行旋转，并且应该应用该平移，以便已经旋转的值标签被移动到节点的中心。 由于此转换是数据相关的，因此代码应如下所示：

  node.selectAll("text.nodeValue")
      .text(function (d) { return formatNumber(d.value); })
      .attr("text-anchor", "middle")
      .attr("transform", function (d) {
           return "rotate(-90) translate(" +
                       (-d.dy / 2) +
                       ", " +
                       (sankey.nodeWidth() / 2 + 5) +
       ")";});

结果是：