rotating text independently for different nodes in treemap

[Devang Mundhra]

Hi,

In an attempt to experiment with the best way to display hierarchical information, I am trying to modify the treemap example in how it displays the text, but not able to quite do it.

The attempt is to rotate the text by 90 degrees when dy > dx. 

I have tried selectively changing the css property (-webkit/mox-transform) for the particular divs to rotate them by 90 degrees and then add the text but that didn't work.

Next, I tried to add the text as a separate svg:text element for each node but that doesn't seem to be working either. - http://bl.ocks.org/948964

Any suggestions?

Thanks,

Devang

[Mike Bostock]

> Next, I tried to add the text as a separate svg:text element for each node
> but that doesn't seem to be working either. - http://bl.ocks.org/948964

The problem here is that you're adding svg:text elements directly to a
DIV. SVG elements have to be inside an svg:svg container (conceptually
it represents an SVG "image"); they can't be interspersed with HTML
elements.

The two possible approaches are:

1. HTML, using CSS3 transforms.

2. SVG, using SVG's "transform" attribute.

Here's an example of #1, using -webkit-transform:

d3.select("body").style("-webkit-transform", "rotateZ(5deg)");

The -webkit-transform origin defaults to the center of the element. So
if you want to rotate text inside of an HTML div this way, you'll need
to add a child div that is centered both horizontally and vertically,
and then rotated. This is, of course, a giant pain in CSS:

d3.select("body").append("div")
.style("position", "absolute")
.style("display", "table-row")
.style("top", "50px")
.style("left", "50px")
.style("background", "steelblue")
.append("div")
.style("display", "table-cell")
.style("vertical-align", "middle")
.style("text-align", "center")
.style("-webkit-transform", "rotateZ(90deg)")
.style("width", "200px")
.style("height", "200px")
.style("color", "white")
.text("Hello, world!");

Also, since -webkit-transform is only supported on WebKit, and all the
browsers that support the other vendor-specific CSS3 transforms
support SVG, I'd recommend approach #2: implement your treemap in SVG
rather than HTML. Here's an example:

http://bl.ocks.org/972398

You can then modify this example to apply a "transform" attribute to
the svg:text elements when you append them. You'll want to replace the
"x" and "y" attributes with the "transform" attribute: translate(x,y)
then rotate(90) for vertical text.

Mike