How to text-overflow in d3.js

Question

I'm using d3.js and I have some circles and some text related to each circle. I want the overflowed text to be ellipsised.

I've tried with css

white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 

But it doesn't work. How should I do?

 node.append("text").attr("id", "text")
     .attr("dx", function(d) { return (d.size * (-100)) ;})
     .attr("dy", function(d) { 
          if(flag==1) {
              flag=0; return -(d.size * 57);
          } else{
              flag=1; return ((d.size * 100) + 5);
          }
     })
     .text( function(d){ return d.name;})
     .style("opacity", 1);