Search code examples
javascriptsvgd3.jssunburst-diagram

Change hover over of d3.js sunburst chart so that name of segment is appended rather than %

I'm trying to adjust this example http://bl.ocks.org/kerryrodden/7090426:

So that the #explanation div in the middle of the chart gives the name of the segment that is hovered over instead of the %. Heres the script

     function mouseover(d) {

  var percentage = (100 * d.value / totalSize).toPrecision(3);
  var percentageString = percentage + "%";
  if (percentage < 0.1) {
    percentageString = "< 0.1%";
  }

  d3.select("#percentage")
      .text(percentageString);

  d3.select("#explanation")
      .style("visibility", "");

  var sequenceArray = getAncestors(d);
  updateBreadcrumbs(sequenceArray);

Thank you kindly for you assistance

Solution

  • All you need to do is set the name as content of the explanation:

    d3.select("#explanation")
  .text(d.name);

    Complete demo here.