Looking for a way to display labels on sunburst chart (could not find a working example)

问题

Thanks to someone's help (Brandon), I've been able to add tooltips to the sunburst charts. I am still looking for a way to display the label of a path on the sunburst chart (and then have the dual mode tooltip + text).

The example that I'd like to improve is provided on jsfiddle.net/trakkasure/UPqX5/

I am looking for the code to add to the following code section:

path = svg.data([getData()]).selectAll("path") 
    .data(partition.nodes)
    .enter().append("svg:path")  
    .attr("d", arc)  
    .style("fill", function(d) { return color((d.children ? d : d.parent).name); })  
    .on("click", magnify)  
    .on("mouseover", function(d) {  
    tooltip.show([d3.event.clientX,d3.event.clientY],'<div>'+d.name+'</div>  <div>'+d.value+'</div>')
    })  
    .on('mouseout',function(){  
    tooltip.cleanup()
    })              
    .each(stash);

And I'd like to see the labels as shown on the example is provided on http://bl.ocks.org/910126. I can not get that example to work for me (I'm still new to D3)

I do recognize that there might be too much text on that chart, but in my scenario it is not a problem.

Can someone help me understand how to display all these labels on the chart?

回答1:

Simply append svg:text elements to the canvas:

path.append("svg:text")
  .attr("transform", function(d) { return "rotate(" + (d.x + d.dx / 2 - Math.PI / 2) / Math.PI * 180 + ")"; })
  .attr("x", function(d) { return d.y; })
  .attr("dx", "6") // margin
  .attr("dy", ".35em") // vertical-align
  .text(function(d) { return d.name; });

However, in my edit, this will break your magnify function, so i create an svg group to hold together each pair of path and text. In my opinion, elements are better organized this way, easier to query in the future.

Note that you need to modify your magnify function to also animate the text, as for now it only animate the path and leave the text at their original position.

group = svg.data([getData()]).selectAll("path")
  .data(partition.nodes)
  .enter().append('svg:g');

//path variable is required by magnify function
path = group.append("svg:path")
  .attr("d", arc)
  .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
  .on("click", magnify)
  .on("mouseover", function(d) {
    tooltip.show([d3.event.clientX,d3.event.clientY],'<div>'+d.name+'</div><div>'+d.value+'</div>')
  })
  .on('mouseout',function(){
    tooltip.cleanup()
  }) 
  .each(stash);

// you may need to assign the result to a variable, 
// for example to animate the text in your magnify function, 
// as shown in the path variable above
group.append("svg:text")
  .attr("transform", function(d) { return "rotate(" + (d.x + d.dx / 2 - Math.PI / 2) / Math.PI * 180 + ")"; })
  .attr("x", function(d) { return d.y; })
  .attr("dx", "6") // margin
  .attr("dy", ".35em") // vertical-align
  .text(function(d) { return d.name; });

Code was taken from your given example, however I edited the x attribute into .attr("x", function(d) { return d.y; }) to properly position the text based on your data structure (the example uses Math.sqrt(d.y)). I also modify the text function to return d.name

here is the jsFiddle

来源：https://stackoverflow.com/questions/13317534/looking-for-a-way-to-display-labels-on-sunburst-chart-could-not-find-a-working

标签

javascript

d3.js

label

hierarchy

sunburst-diagram