score:3
your logic for determining the node's name to be used for getting the color from the scale is flawed:
(d.children ? d : d.parent).name
which translates to:
if i've got children then use my name, and if i've got no children then use my parent's name instead.
this, however, is not what you want. you are looking for
give me the name of my ancestor which is closest to the root without being the root itself.
there are various ways to implement this logic:
1. by recursion
to my eye this is the most elegant way to achieve what you are after.
function getrootmostancestorbyrecursion(node) {
return node.depth > 1 ? getrootmostancestorbyrecursion(node.parent) : node;
}
2. by iteration
you may also apply various kinds of iterations using all sorts of loops known to javascript.
function getrootmostancestorbywhileloop(node) {
while (node.depth > 1) node = node.parent;
return node;
}
the call to either of these functions will then replace the above mentioned erroneous statement.
.style("fill", function (d) { return colors(getrootmostancestorbyrecursion(d).name); })
depending on your amount of data and on how often this logic will get called, you might want to consider doing this once for your entire tree and store the rootmost parent's name on every node.
Source: stackoverflow.com
Related Query
- How to get corresponding colors from d3 sunburst parent to final child?
- How to get parent node from child in json using d3js as Force Layout?
- How to expand child from JSON, load data after click parent - D3.Js - force directed layout
- How to generate parent child relation data from networkx to work with d3.js?
- D3: How to stop child nodes from being attracted towards the center when parent is dragged in force-directed tree?
- Parent child JSON from CSV using Python sunburst
- Using D3 loaded with json file, How can get parent nodes value from json file?
- How to get data of parent node in d3.js
- How to get maximum value from an array of objects to use in d3.scale.linear().domain()
- In d3, how to get the interpolated line data from a SVG line?
- D3js: how to get Lat/Log geocoordinates from mouse click?
- d3.js: Passing data from parent to child nodes
- How to get the parent selection in d3?
- How can I connect two parent node into one child node and how to make a tooltip for each node in the tree pragmatically? in D3 js (SVG)
- How can i get the startAngle and endAngle of each arc in the sunburst example using d3.js?
- How to get translate property from a group?
- How to get the data from the c3.js
- How do I use d3.domain to get d3.min and d3.max from multiple columns in a JSON file?
- How to get value from the element using selection in d3
- How to get web element (id) from the element position in D3.js force graph
- How to get different shades of colors for a single color?
- d3.js: Passing data from parent node to child node onclick event
- How to get the specific JSON array from a value in that array
- How to get projected path definition strings (not SVG elements) from a GeoJSON dataset with D3?
- How to get text() from checkbox if is checked?
- How can I get a list of tree-ancestors and tree-descendants from this d3.js layout.tree?
- how to get data with tsv or csv to array in d3.js from a txt file?
- How to use python pandas to get intersection of sets from a csv file
- How do I get the index number from the array in d3?
- How to add colours to D3 js sunburst diagram from JSON-file?
More Query from same tag
- D3.js Tree View collapse not working in my application
- How can I change style class & content of text for ancestors in this d3.js tree?
- Need help using d3.js to create Stacked Bar Chart
- Graying out an image in D3js
- Typings Error when using D3 V4 on Angular 2 and Typescript V2
- networkD3 package: show node names of all connected nodes when hovering over
- Draw a map with d3 and topojson
- Best way to format a JSON for D3 Forced Directed
- Add attribute with nested entries in D3.js
- D3 left justify legend text
- Error while parsing date in d3
- How to get the axis ticks of Plotly's scatter plot to be shown in Latex using Python? --- [Python, Plotly, Latex Representation]
- Ordinal scale's rangeRoundBands()
- D3: Draw part of interpolated path with dashed stroke
- getting rid of the middle line on c3.js
- I am trying to load a JSON file to be used in a D3 plus visualization using jQuery
- D3.js In Action, code example not working
- Plotting points in D3.js
- math to svg coordinate translation in javascript
- loading csv into nvd3 to make discrete bar chart
- Changing rectangle dimensions in d3 zoom
- How to set margin or padding in canvas object in D3.js
- How to add hover (tooltip) to the D3. bubble motion chart?
- Reference line for line graph
- Possibility of creating reusable D3.js/jQuery data-attribute components or modules
- HTM/CSS interfering with D3.js
- d3 Error: <path> attribute d: Expected number date
- padding top in bar chart
- d3 tooltip. Collapsible tree. Error when .on(mouseover,function(....)) is called
- d3 multi line with mouse over cursor for both y AND x value