Why is d3.select().style() not applied to <div>-elements?

Question

I've been staring at this for a while now and I just can't figure out what I'm doing wrong. I'm basically trying to make my own implementation of this example: http://vallandingham.me/building_a_bubble_cloud.htm

In a similar fashion as the article I have a DOM structure that looks like this

<div id="d3">
    <div id="labels">
        <div class="label">Label</div>
    </div>
    <svg> << SVG-stuff >> </svg>
</div>

As far as I understand it, in the article the label divs are positioned with the .style() function inside d3's tick function. Thusly:

d3.selectAll(".label")
   .style("left", function(d) { return d.x - (d.dx / 2) + "px"; })
   .style("left", function(d) { return d.x - (d.dx / 2) + "px"; })

BUT: when this is run, no styles are applied to the elements!

What is it that I am missing? How come this works in the example?

Answer 1

In case anyone else sees this in the future, make SURE the style you are trying to apply is valid. I was trying to set a element's "text-anchor" style to "right", and it just wouldn't go! Turns out it's "end", not "right".

Answer 2

Well im happy to answer this one myself, just in case someone else is confused about .style()

The problem in the above case is that d.dx is undefined which means the function doesn't return anything.

I simply didn't realize that if this is the case, not even <div style="left: ; rigt: ;"> is applied.

.style()does indeed work on div elements anywhere in the DOM, as long as it's arguments are defined:

.style("left", function(d) { return d.x + "px"; })