How to align text vertically on a node inside a Sankey diagram (D3.JS)?

Question

I changed the Mike Bostock example of the Sankey diagram in D3.Js from http://bost.ocks.org/mike/sankey/ to display the value of each node like 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 the code is from Mike's example, and my modification is in jsfiddle ( http://jsfiddle.net/4xNK5/ ). My question is: how can I display the node value vertically? I adopted a simple .attr ("transform", "rotate (-90)"); would do that. Indeed, I get a node value aligned vertically with BUT inappropriate. I can not understand the logic of this. Any ideas would be appreciated ...

Answer 1

( jsfiddles), .

( jsfiddle)

:

, JavaScript, JSON, Sankey. , JsFiddle. , , ..

key code , :

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

, :

html/svg firebug , , , : ( , )

---

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

: