javascript - How to get corresponding colors from d3 sunburst parent to final child? -


i need create sunburst chart 4 separate targets. each target has assigned color , of target's children should inherit color. have set children take parent's color , works fine. issue children of child not inherit color of initial parent.

sunburst screenshot

this code using create visualization:

var colors = d3.scale.ordinal()      .range(["#62addb", "#7568ba", "#ff8f2b", "#6bc96d"]);     var json = getdata();  createvisualization(json);    // main function draw , set visualization, once have data.  function createvisualization(json) {        // basic setup of page elements.      initializebreadcrumbtrail();        d3.select("#togglelegend").on("click", togglelegend);        // bounding circle underneath sunburst, make easier detect      // when mouse leaves parent g.      vis.append("svg:circle")        .attr("r", radius)        .style("opacity", 0);        // efficiency, filter nodes keep large enough see.      var nodes = partition.nodes(json)        .filter(function (d) {            return (d.dx > 0.005); // 0.005 radians = 0.29 degrees        });        var uniquenames = (function (a) {          var output = [];          a.foreach(function (d) {              if (output.indexof(d.name) === -1) {                  output.push(d.name);              }          });          return output;      })(nodes);        // set domain of colors scale based on data      colors.domain(uniquenames);        // make sure done after setting domain      drawlegend();          var path = vis.data([json]).selectall("path")        .data(nodes)        .enter().append("svg:path")        .attr("display", function (d) { return d.depth ? null : "none"; })        .attr("d", arc)        .attr("fill-rule", "evenodd")        .style("fill", function (d) { return colors((d.children ? d : d.parent).name); })        .style("opacity", 1)        .on("mouseover", mouseover);        // add mouseleave handler bounding circle.      d3.select("#container").on("mouseleave", mouseleave);        // total size of tree = value of root node partition.      totalsize = path.node().__data__.value;  };      function getdata() {  return {      "name": "ref",      "children": [            { "name": "epic",                "children": [              { "name": "epic-a1", "size": 3 },              { "name": "epic-a2", "size": 3 }                ]            },              { "name": "ad",                "children": [              { "name": "ad-a1", "size": 3 },              { "name": "ad-a2", "size": 3 }                ]            },              { "name": "sap",                "children": [              { "name": "sap-a1", "size": 3 },              { "name": "sap-a2", "size": 3 }                ]            },              { "name": "oracle",                "children": [                  { "name": "oracle-a1", "size": 3 },                  { "name": "oracle-a2", "size": 3,                      "children": [                      { "name": "epic-b1", "size": 3 },                      { "name": "epic-b2", "size": 3 }                      ]                  }               ]            }        ]  };  };

your logic determining node's name used getting color scale flawed:

(d.children ? d : d.parent).name 

which translates to:

if i've got children use name, , if i've got no children use parent's name instead.

this, however, not want. looking

give me name of ancestor closest root without being root itself.

there various ways implement logic:

1. recursion

to eye elegant way achieve after.

function getrootmostancestorbyrecursion(node) {     return node.depth > 1 ? getrootmostancestorbyrecursion(node.parent) : node; } 

2. iteration

you may apply various kinds of iterations using sorts of loops known javascript.

function getrootmostancestorbywhileloop(node) {     while (node.depth > 1) node = node.parent;     return node; } 

the call either of these functions replace above mentioned erroneous statement.

.style("fill", function (d) { return colors(getrootmostancestorbyrecursion(d).name); }) 

depending on amount of data , on how logic called, might want consider doing once entire tree , store rootmost parent's name on every node.


Comments

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

java - Android – MapFragment overlay button shadow, just like MyLocation button -