4

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

桑基 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)"); 会做的。实际上，我得到了垂直对齐但不合适的节点的值。我无法理解其背后的逻辑。任何想法，将不胜感激...

4

1 回答 1

14

我将引导您完成几个实验（所有实验都附带 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");

实验一

（点击 jsfiddle）

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

      .attr("dy", 5)

结果在这里：

在此处输入图像描述

实验二

（点击 jsfiddle）

现在让我们尝试添加此代码（我故意使用 45 度以便更容易发现旋转的工作原理）：

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

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

在此处输入图像描述

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

在此处输入图像描述

实验三

（点击 jsfiddle）

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

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

我得到了这个：

在此处输入图像描述

但是，我无法让价值标签的顶部朝向左侧。另外，听说这个方法有一些火狐兼容性问题，所以放弃了。

解决方案

（点击 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) +
       ")";});

结果是：

在此处输入图像描述

于 2014-05-03T07:13:46.387 回答