score:0
Ok, so what Pierre Capo said was right. I added var packableData = {id:"parent", values:data};
to the data I am receiving and that will set the parent in the hierarchy when you pass it to d3.hierarchy()
score:1
Remember that you want to have a tree. A tree needs to have a root element and every node needs 2 things : an unique id, and a field which links to his parent's id.
For instance, with the data that you have, by adding an id field and assuming that "group" represent the parent node, you can transform your flat data into a hierarchical one :
var data = [
{"id":"0", "group":null, "price":"36599.88", "cy":"44260"},
{"id":"1", "group":"0", "price":"36599.88", "cy":"44260"},
{"id":"2", "group":"0","price":"36599.88", "cy":"44260"},
{"id":"3", "group":"0","price":"36599.88", "cy":"44260"},
{"id":"4", "group":"0","price":"36599.88", "cy":"44260"},
{"id":"5", "group":"1","price":"1241.88", "cy":"44260"},
{"id":"6", "group":"2","price":"36595429.88", "cy":"44260"},
{"id":"7", "group":"3","price":"12124.88", "cy":"44260"},
{"id":"8", "group":"4","price":"6264.88", "cy":"44260"},
];
const tree = d3
.stratify()
.id(d => d.id)
.parentId(d => d.group)(data);
console.log(tree);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
Note that the node with the "group":null
is the root node (by definition a root node is the starting node of your tree, so it doesn't have any parent).
Source: stackoverflow.com
Related Query
- D3.js nest function, cannot get data into hierarchy
- D3: use nest function to turn flat data with parent key into a hierarchy
- D3.js v6.2 - get data index in listener function - selection.on('click', listener)
- How do I get rickshaw to aggregate data into weeks instead of days
- reformatted data into JSON from CSV, can't get parsing right in D3
- trying to get MySQL data into nested json file for d3?
- Cannot get treemap to render with new JSON data
- map function to get radius data from csv for d3 force layout
- Cannot get d3 selection's updated data when key is used
- How to get D3 csv data into a different variable
- Is there a way to get specified data through click event using tooltip function in d3 v6.1.1
- How to get mouseenter function to display data
- Once I put a function into defer() in D3, the data structure inside console.log changed in other function
- get data into correct format to create an area chart
- Using crossfilter with dc.js and d3.js - how to get csv year data into date format?
- How to get data of parent node in d3.js
- How/Where do I get geoJSON data for states, provinces, and administrative regions of non-US countries?
- D3.js: Get an array of the data attached to a selection?
- d3js: make new parent data descend into child nodes
- Cannot import data from csv file in d3
- In d3, how to get the interpolated line data from a SVG line?
- D3.JS get reference to bound data of clicked object
- Calling a function once when data enters in d3
- What object type is the instance element parameter pass into the link function of an angular directive?
- Get data from rest service using D3
- How can I get "call" to execute for each data element in D3?
- Is d3.json() function can get json object?
- Dynamically loading external data from database into d3.js
- NVD3 - How to refresh the data function to product new data on click
- d3.js undefined data value in callback function click event
More Query from same tag
- Dynamically create nodes in D3.js
- Horizontal bar chart exit method not working
- tooltip responsive inside a div - not showing
- Javascript - How to pass original object to callback function
- Making a drop down menu from csv data in JS
- How to re-sort a barchart into it's initial state after sorting in d3js
- Tick labels in d3.js scatter plot chart getting cut off in Firefox 13.0.1
- How to get the parent selection in d3?
- Transitioning between shapes with javascript or d3.js
- Iteratively appending links to a D3 force directed network visualization
- D3 ColorBrewer Coloring on Dynamic Scales
- Date-axis for d3.js
- D3.js - layouts - value accessor
- Fill a grid with empty rectangles in D3.js?
- TypeError: Cannot read property 'select' of undefined in d3
- How to create legend d3?
- Code to add mouseover functionality to line chart
- Dynamically change opacity of links and nodes in d3 force graph based on radio button filter
- Adding tool tip to collapse graph
- multipart post request with d3.json()/d3.xhr()
- Y-Axis is Disappearing
- Stacked-to-Grouped Bars Transition
- Troubles viewing Git Gist on bl.ocks.org
- d3JS: Plot lower-density data version of a large data set when zoomed out on line/area chart
- Filtering in JavaScript with radio button using D3 library
- is it possible to pass custom parametrs to tween?
- Giving an element more than one event handler by selecting it using different selectors
- Pass a JavaSscript constructor property into mouseover function & still use d3.select(this)
- Creating a D3 line graph with points
- Create trapezoid using d3 svg.area