如何在Sankey图（D3.JS）中的节点上垂直对齐文本？ [英] How to align text vertically on a node within a Sankey diagram (D3.JS)?

问题描述

我在）

我真的很烦，因为节点的值和名称不对齐，所以我添加了这个代码稍微向下移动值：

  .attr（dy，5）
  

结果如下：

---

实验2

（）

在这个实验中，我想避免使用旋转。我想使用svg文本属性写模式，如下所示：

  .style（writing-mode，tb）
  

p>

但是，我不能得到值标签的方向与它的顶部到左边。此外，我听说此方法有一些Firefox兼容性问题，所以我放弃了。

---

解决方案

（点击jsfiddle ）

在上面的实验之后，我的结论是应该首先完成旋转，应该应用翻译，以便将已经旋转的值标签移动到节点的中心。因为这个翻译是数据依赖的，代码应该看起来像这样：

  node.selectAll（text.nodeValue）
 .text（function（d）{return formatNumber（d.value）;}）
 .attr（text-anchor，middle）
 .attr （d）{
 returnrotate（-90）translate（+ 
（-d.dy / 2）+ 
，+ 
（sankey.nodeWidth / 2 + 5）+ 
）;}）; 
  

结果是：

I have modified Mike Bostok example of a Sankey diagram in D3.Js from http://bost.ocks.org/mike/sankey/ to display the value of each node as this:

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)")

All code from Mike's example and my modification is at jsfiddle (http://jsfiddle.net/4xNK5/). My question is how can I display the value of the node vertically? I assumed a simple .attr("transform", "rotate(-90)"); would do it. Indeed, I get the value of the node aligned vertically BUT out of place. I cannot make sense of the logic behind it. Any ideas would be appreciated...

解决方案

I am going to walk you through several experiments (all with accompanied jsfiddles) that will guide you to the solution of your problem.

Starting Point

(click for jsfiddle)

This is slightly modified example from your question:

It has been modified so that it contains data in JavaScript instead of in JSON file, and also it contains code from Sankey plugin. This is done just in order to have working example in JsFiddle. You can of course adjust it to suit your needs with respect to data etc...

The key code is here, as you already mentioned:

  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");

---

Experiment 1

(click for jsfiddle)

I was really bothered that values and names of nodes are not aligned, so I added this code that slightly moves values downwards:

      .attr("dy", 5)

The result is here:

---

Experiment 2

(click for jsfiddle)

Now lets try to add this code (I used 45 degrees on purpose to easier spot how rotation works):

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

Surprisingly, we get this:

And if we examine the html/svg in firebug or similar tool, we'll notice that the reason for such rotation behavior is that value labels are actually part of other container: (and center of rotation is not center of label, but origin of that container)

---

Experiment 3

(click for jsfiddle)

In this experiment, I wanted to avoid using rotation at all. I wanted to use svg text property writing-mode, like this:

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

And I got this:

However, I couldn't get value labels to be oriented with its top to the left. Also, I heard this method has some Firefox compatibility problems, so I gave it up.

---

Solution

(click for jsfiddle)

After experiments above, my conclusion was that rotation should be done first, and that translation should be applied so that already rotated value labels are moved to the center of nodes. Since this translation is data-dependent, the code should look like this:

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

The result is:

这篇关于如何在Sankey图（D3.JS）中的节点上垂直对齐文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！