How to add text to a Bubble chart

[Gavin]

Hi all,
I hope a good weekend was had by all?

I have been play with D3, quite impressed. 
I have been slowly expanding on the three little bubbles example to create a bubble chart. 

The only thing I cant seem to do is add text to the bubble, I have tried using various source including some answers here, and while my limited javascript knowledge suggests they should work, or at least I think I can see how they should work, I either get a black bubble or no text at all.

Here is my code:

    function doVisual() {
        var cxOffset = Math.round(Math.random() * 100);
        var cyOffset = Math.round(Math.random() * visualisationHeight);
   
        var tBubble = sampleSVG.selectAll("circle").data(data);
       
        tBubble.enter().append("circle")
                       .attr("cx", function(d) { return d.id + cxOffset; })
                       .attr("cy", cyOffset)
                       .attr("r", 0)
                       .transition()
                       .attr("r", function(d) { return getBubbleSize(d.size); } );

        tBubble.append("svg:text")
               .attr("text-anchor", "middle")
               .attr("dx", function(d) { return d.id + cxOffset; })
               .attr("dy", cyOffset)
               .text(function(d) { return d.name; } );

        tBubble
             .style("stroke", "gray")
             .style("fill", "white")
             .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
             .on("mouseout", function(){d3.select(this).style("fill", "white");});
    }

This is taken from here, I am assuming that tBubble.append("svg:text") will have access to and be using the same data item as the .enter above it.

Any help or pointers would be great.

Thanks
Gavin

[Gavin]

Additionally I am using this as my version of D3:

<script src="http://d3js.org/d3.v2.js"></script>

I actual think the bulk of the code is based upon a tuturial  I found via google, three little circles and thinking in joins.

Thanks

[Chris Michael]

Hi Gavin

What actual svg gets created as a result of your code? I often find I get similar problems (eg all black shapes etc). When this happens I inspect the DOM to see what has been created. I can then usually spot the problem (eg missing fill attribute etc), and then from that work out what I need to change in the d3 code.

Chris

[Kai Chang]

Try appending both the circle and text elements to a g element for each bubble:

https://developer.mozilla.org/en/SVG/Element/g

[jerome cukier]

exactly.

In svg you can only append elements to containers which, for virtually every element, are the root svg element, or g elements. 

This is a big difference with protovis for instance.

you'd want to position your nodes with transform - translate, like so: 

var nodes=tBubble.enter()

    .append("g").attr("transform", function(d) { return "translate("+(d.id + cxOffset)+","+cyOffest+")"; })

then you can add your circles and texts directly on top without worrying about positioning any more.

nodes

    .append("circle")

    .attr("r", 0)
    .transition()
    .attr("r", function(d) { return getBubbleSize(d.size); } ); 

nodes

    .append("text")

    .attr("r", 0)

    .attr("text-anchor", "middle")

    .text(function(d) { return d.name; } ); 

BTW, you don't need to type "svg:text" in full with the current versions of d3.

[Gavin]

Thanks Guys, thats perfect!!

I blame it on being 2am, but I saw the g element here and half my head went, "dont worry its to do with the type of the graph they are
trying to make" the other was "thats important, its an svg element".  But its been 12 years since I have actual done any svg.

I am trying to build a mock up for work to point out why using a visualisation is better for the user then a data grid.

In any case, thank you.

PS, thanks the tip re "svg:text"