append text to sunburst example

[joergP]

Hi,

I desperately try to append some text to the sunburst example. Could
anybody give me a hint how to append text to the segments of
http://mbostock.github.com/d3/ex/sunburst.html
?

I tried a lot but for me it's not understable how this should work.

[Steven Endres]

Hi Joerg,

I'm not sure exactly what you want, but here is how you might do this. Change the d3.json function to something like:

d3.json("flare.json", function(json) {

  var path = vis.data([json]).selectAll("path")

      .data(partition.nodes)

    .enter().append("svg:path")

      .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring

      .attr("d", arc)

      .attr("fill-rule", "evenodd")

      .style("stroke", "#fff")

      .style("fill", function(d) { return color((d.children ? d : d.parent).name); })

 .each(stash);

   var text = vis.data([json]).selectAll("text")

   .data(partition.nodes)

.enter().append("svg:text")

 .attr("x", r * Math.cos(d.x + d.dx/2) )

      .attr("y", r * Math.sin(d.x + d.dx/2))

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

      .text(d.x);

  d3.select("#size").on("click", function() {

    path

        .data(partition.value(function(d) { return d.size; }))

      .transition()

        .duration(1500)

        .attrTween("d", arcTween);

    d3.select("#size").classed("active", true);

    d3.select("#count").classed("active", false);

  });

  d3.select("#count").on("click", function() {

    path

        .data(partition.value(function(d) { return 1; }))

      .transition()

        .duration(1500)

        .attrTween("d", arcTween);

    d3.select("#size").classed("active", false);

    d3.select("#count").classed("active", true);

  });

});

If you look at the resulting page in debug mode, you should see all the path elements and text elements in the dom. If your goal is to have text show up when the user hovers over each segment, then use selectors in the CSS instead of javascript events.

Steve

[Mike Bostock]

Try searching the examples on the wiki?

https://github.com/mbostock/d3/wiki

Mike

[Odanga Madung]

Hi Steve have any ideas on how you can help with my stack overflow question? Its similar to the one above http://t.co/SQlc8QhQlP

[Frank Guerino]

Hi,

You may want to take a look at Radial Wheel example.  It places text at the angle of the pie slice.

I hope it helps.

FG

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.