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.
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
Post a Comment