Nodes in a Clustered Bubble Chart with Text

[Aneesha Bakharia]

Hi

I am trying to combine these two examples:

Bubble chart with text - http://bl.ocks.org/d/1846692/

Clustered Bubble Chart - http://bl.ocks.org/d/1747543/

I can't seem to get the bubbles to show the text. The code is on Fiddler at http://jsfiddle.net/aneesha/5dyta/

var circle = svg.selectAll("circle")
.data(nodes)
.enter()
.append("a")
.attr("class", "bubble-node")
.attr("xlink:href", function(d) { return 'Javascript:alert(\"' + d.name+ '\")'; })
.text(function(d) { return d.name; })
.style("font-size", "24px")
.style("font-color", "#fff")
.attr("dy", ".3em")
.append("circle")
.attr("r", function(d) { return d.radius; })
.style("fill", function(d) { return d.color; })
.call(force.drag)



Many Thanks


Aneesha

[Kai Chang]

Use a <g> element to put multiple elements in the same location, such
as a <circle> and <text> element.

Take a look at the "node" variable in the Bubble Chart with Text
example. You'll need to save the selection of <g> elements as
variable, to append different kinds of elements. If you try to do it
as one long chain, that would place the <text> inside the <circle>
which is not valid SVG.

http://www.w3.org/TR/SVG/struct.html#Groups

[Aneesha Bakharia]

Hi 

Thanks - I've got the text displaying above the circle.

What do I need to do to get the force layout working on the g element?

I've tried altering the code but the layout does not work

http://jsfiddle.net/aneesha/5dyta/

Many thanks

Aneesha

[Kai Chang]

The <g> element is being positioned with the "transform" attribute
rather than "cx" and "cy", so update that instead. Also you can just
use d3.v3.js, no need to include geom or layout anymore:

http://jsfiddle.net/S9y9L/

On Fri, Nov 23, 2012 at 2:35 PM, Aneesha Bakharia

[Kai Chang]

*d3.v2.js rather

[Aneesha Bakharia]

Hi

Many thanks for your help.

I am onto my next step of trying to render pie charts instead of the circles.

Regards

Aneesha