How to use d3.js Hierarchy with custom data structure?
I have been attempting to load a small dataset into d3.js for use with some other d3 aspects. It only has a depth of two, but I'm struggling to get D3 to load it properly. I've tried the following, which in my mind should work?
let hierarchy = d3
.hierarchy()
.children(d => d.foods)
.sum(d => d.total)
The data sample in question is:
let data = {
'SetA': {
foods: [
{ food: 'Apple', total: 1 },
{ food: 'Banana', total: 1 },
{ food: 'Orange', total: 3 }
], label: 'fruits', size: 3
},
'SetB': {
foods: [
{ food: 'Potato', total: 2 },
{ food: 'Carrot', total: 4 }
], label: 'vegetables', size: 2
}
}
javascript d3.js
asked Nov 24 '18 at 19:01
AvuvoAvuvo
83
add a comment |
I have been attempting to load a small dataset into d3.js for use with some other d3 aspects. It only has a depth of two, but I'm struggling to get D3 to load it properly. I've tried the following, which in my mind should work?
let hierarchy = d3
.hierarchy()
.children(d => d.foods)
.sum(d => d.total)
The data sample in question is:
let data = {
'SetA': {
foods: [
{ food: 'Apple', total: 1 },
{ food: 'Banana', total: 1 },
{ food: 'Orange', total: 3 }
], label: 'fruits', size: 3
},
'SetB': {
foods: [
{ food: 'Potato', total: 2 },
{ food: 'Carrot', total: 4 }
], label: 'vegetables', size: 2
}
}
javascript d3.js
asked Nov 24 '18 at 19:01
AvuvoAvuvo
83
add a comment |
I have been attempting to load a small dataset into d3.js for use with some other d3 aspects. It only has a depth of two, but I'm struggling to get D3 to load it properly. I've tried the following, which in my mind should work?
let hierarchy = d3
.hierarchy()
.children(d => d.foods)
.sum(d => d.total)
The data sample in question is:
let data = {
'SetA': {
foods: [
{ food: 'Apple', total: 1 },
{ food: 'Banana', total: 1 },
{ food: 'Orange', total: 3 }
], label: 'fruits', size: 3
},
'SetB': {
foods: [
{ food: 'Potato', total: 2 },
{ food: 'Carrot', total: 4 }
], label: 'vegetables', size: 2
}
}
javascript d3.js
asked Nov 24 '18 at 19:01
AvuvoAvuvo
83
I have been attempting to load a small dataset into d3.js for use with some other d3 aspects. It only has a depth of two, but I'm struggling to get D3 to load it properly. I've tried the following, which in my mind should work?
let hierarchy = d3
.hierarchy()
.children(d => d.foods)
.sum(d => d.total)
The data sample in question is:
let data = {
'SetA': {
foods: [
{ food: 'Apple', total: 1 },
{ food: 'Banana', total: 1 },
{ food: 'Orange', total: 3 }
], label: 'fruits', size: 3
},
'SetB': {
foods: [
{ food: 'Potato', total: 2 },
{ food: 'Carrot', total: 4 }
], label: 'vegetables', size: 2
}
}
javascript d3.js
javascript d3.js
asked Nov 24 '18 at 19:01
AvuvoAvuvo
83
asked Nov 24 '18 at 19:01
AvuvoAvuvo
83
asked Nov 24 '18 at 19:01
AvuvoAvuvo
83
asked Nov 24 '18 at 19:01
AvuvoAvuvo
83
asked Nov 24 '18 at 19:01
AvuvoAvuvo
83
83
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You probably want to name and organize your data following what d3.hierarchy is expecting, look at documentation here
The returned node and each descendant has the following properties:
node.data - the associated data, as specified to the constructor.
node.depth - zero for the root node, and increasing by one for each descendant generation.
node.height - zero for leaf nodes, and the greatest distance from any descendant leaf for internal nodes.
node.parent - the parent node, or null for the root node.
node.children - an array of child nodes, if any; undefined for leaf nodes.
node.value - the summed value of the node and its descendants; optional, see node.sum and node.count.
So your data should be like:
let data = {
name: 'root',
children: [{
name: 'foods A',
children: [
{
name: 'fruits',
children: [
{ name: 'Apple', size: 1 },
{ name: 'Banana', size: 1 },
{ name: 'Orange', size: 3 },
],
label: 'fruits',
size: 3,
}]},
{
name: 'foods B',
children: [
{
name: 'vegetables',
children: [
{ name: 'Potato', size: 2 },
{ name: 'Carrot', size: 4 }
],
label: 'vegetables',
size: 2
}]
}]
}
answered Nov 25 '18 at 0:37
cal_br_marcal_br_mar
69638
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53461442%2fhow-to-use-d3-js-hierarchy-with-custom-data-structure%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You probably want to name and organize your data following what d3.hierarchy is expecting, look at documentation here
The returned node and each descendant has the following properties:
node.data - the associated data, as specified to the constructor.
node.depth - zero for the root node, and increasing by one for each descendant generation.
node.height - zero for leaf nodes, and the greatest distance from any descendant leaf for internal nodes.
node.parent - the parent node, or null for the root node.
node.children - an array of child nodes, if any; undefined for leaf nodes.
node.value - the summed value of the node and its descendants; optional, see node.sum and node.count.
So your data should be like:
let data = {
name: 'root',
children: [{
name: 'foods A',
children: [
{
name: 'fruits',
children: [
{ name: 'Apple', size: 1 },
{ name: 'Banana', size: 1 },
{ name: 'Orange', size: 3 },
],
label: 'fruits',
size: 3,
}]},
{
name: 'foods B',
children: [
{
name: 'vegetables',
children: [
{ name: 'Potato', size: 2 },
{ name: 'Carrot', size: 4 }
],
label: 'vegetables',
size: 2
}]
}]
}
answered Nov 25 '18 at 0:37
cal_br_marcal_br_mar
69638
add a comment |
You probably want to name and organize your data following what d3.hierarchy is expecting, look at documentation here
The returned node and each descendant has the following properties:
node.data - the associated data, as specified to the constructor.
node.depth - zero for the root node, and increasing by one for each descendant generation.
node.height - zero for leaf nodes, and the greatest distance from any descendant leaf for internal nodes.
node.parent - the parent node, or null for the root node.
node.children - an array of child nodes, if any; undefined for leaf nodes.
node.value - the summed value of the node and its descendants; optional, see node.sum and node.count.
So your data should be like:
let data = {
name: 'root',
children: [{
name: 'foods A',
children: [
{
name: 'fruits',
children: [
{ name: 'Apple', size: 1 },
{ name: 'Banana', size: 1 },
{ name: 'Orange', size: 3 },
],
label: 'fruits',
size: 3,
}]},
{
name: 'foods B',
children: [
{
name: 'vegetables',
children: [
{ name: 'Potato', size: 2 },
{ name: 'Carrot', size: 4 }
],
label: 'vegetables',
size: 2
}]
}]
}
answered Nov 25 '18 at 0:37
cal_br_marcal_br_mar
69638
add a comment |
You probably want to name and organize your data following what d3.hierarchy is expecting, look at documentation here
The returned node and each descendant has the following properties:
node.data - the associated data, as specified to the constructor.
node.depth - zero for the root node, and increasing by one for each descendant generation.
node.height - zero for leaf nodes, and the greatest distance from any descendant leaf for internal nodes.
node.parent - the parent node, or null for the root node.
node.children - an array of child nodes, if any; undefined for leaf nodes.
node.value - the summed value of the node and its descendants; optional, see node.sum and node.count.
So your data should be like:
let data = {
name: 'root',
children: [{
name: 'foods A',
children: [
{
name: 'fruits',
children: [
{ name: 'Apple', size: 1 },
{ name: 'Banana', size: 1 },
{ name: 'Orange', size: 3 },
],
label: 'fruits',
size: 3,
}]},
{
name: 'foods B',
children: [
{
name: 'vegetables',
children: [
{ name: 'Potato', size: 2 },
{ name: 'Carrot', size: 4 }
],
label: 'vegetables',
size: 2
}]
}]
}
answered Nov 25 '18 at 0:37
cal_br_marcal_br_mar
69638
You probably want to name and organize your data following what d3.hierarchy is expecting, look at documentation here
The returned node and each descendant has the following properties:
node.data - the associated data, as specified to the constructor.
node.depth - zero for the root node, and increasing by one for each descendant generation.
node.height - zero for leaf nodes, and the greatest distance from any descendant leaf for internal nodes.
node.parent - the parent node, or null for the root node.
node.children - an array of child nodes, if any; undefined for leaf nodes.
node.value - the summed value of the node and its descendants; optional, see node.sum and node.count.
So your data should be like:
let data = {
name: 'root',
children: [{
name: 'foods A',
children: [
{
name: 'fruits',
children: [
{ name: 'Apple', size: 1 },
{ name: 'Banana', size: 1 },
{ name: 'Orange', size: 3 },
],
label: 'fruits',
size: 3,
}]},
{
name: 'foods B',
children: [
{
name: 'vegetables',
children: [
{ name: 'Potato', size: 2 },
{ name: 'Carrot', size: 4 }
],
label: 'vegetables',
size: 2
}]
}]
}
answered Nov 25 '18 at 0:37
cal_br_marcal_br_mar
69638
answered Nov 25 '18 at 0:37
cal_br_marcal_br_mar
69638
answered Nov 25 '18 at 0:37
cal_br_marcal_br_mar
69638
answered Nov 25 '18 at 0:37
cal_br_marcal_br_mar
69638
69638
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53461442%2fhow-to-use-d3-js-hierarchy-with-custom-data-structure%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
