D3 Force-Directed Tree Set Depth of nodes
I'm working on creating a force-directed tree (this is different from just a regular tree layout!). So far, I have a basic force-directed graph, but I would like to to compute the depth of each of the nodes based on their distance from the root node, then have them gravitate toward a particular y axis towards that depth.
I would like it to look similar to the example here
I already know I have to modify my data to have a hierarchical structure as below:
var children_data = {
"id": "A",
"children": [
{"id": "G"},
{"id": "E"},
{"id": "C"},
{"id": "H"},
{"id": "B",
"children": [
{"id": "F"},
{"id": "D"},
]},
]
};
But beyond that I'm missing something. I did try to add the following to my tick function (before that flattening my source data and trying to add a depth):
var ky = 1.2 * e.alpha;
links.forEach(function(d, i) {
d.target.y += (d.target.depth * 120 - d.target.y) * ky;
});
and to add the depth to each node, where node was defined as flattened(children_data):
function flatten(json) {
var nodes = ;
function recurse(node, depth) {
if (node.children) {
node.children.forEach(function(child) {
recurse(child, depth + 1);
});
}
node.depth = depth;
nodes.push(node);
}
recurse(json, 1);
return nodes;
}
But I keep getting errors on the tree layout. My very basic and broken JSFiddle is here. It's specifically breaking on line 70,
var links = d3.tree().links(flatten(children_data));
javascript d3.js force-layout
asked Nov 16 '18 at 23:55
KateJeanKateJean
23829
|
show 2 more comments
I'm working on creating a force-directed tree (this is different from just a regular tree layout!). So far, I have a basic force-directed graph, but I would like to to compute the depth of each of the nodes based on their distance from the root node, then have them gravitate toward a particular y axis towards that depth.
I would like it to look similar to the example here
I already know I have to modify my data to have a hierarchical structure as below:
var children_data = {
"id": "A",
"children": [
{"id": "G"},
{"id": "E"},
{"id": "C"},
{"id": "H"},
{"id": "B",
"children": [
{"id": "F"},
{"id": "D"},
]},
]
};
But beyond that I'm missing something. I did try to add the following to my tick function (before that flattening my source data and trying to add a depth):
var ky = 1.2 * e.alpha;
links.forEach(function(d, i) {
d.target.y += (d.target.depth * 120 - d.target.y) * ky;
});
and to add the depth to each node, where node was defined as flattened(children_data):
function flatten(json) {
var nodes = ;
function recurse(node, depth) {
if (node.children) {
node.children.forEach(function(child) {
recurse(child, depth + 1);
});
}
node.depth = depth;
nodes.push(node);
}
recurse(json, 1);
return nodes;
}
But I keep getting errors on the tree layout. My very basic and broken JSFiddle is here. It's specifically breaking on line 70,
var links = d3.tree().links(flatten(children_data));
javascript d3.js force-layout
asked Nov 16 '18 at 23:55
KateJeanKateJean
23829
1
Possible duplicate of tree.links() for D3 v4
– Martin Zeitler
Nov 17 '18 at 2:19
I'm specifically looking for a force-directed graph that is made to look like a tree. The example you linked specifically is for a tree layout. I'm looking for a solution like the one here: mbostock.github.io/d3/talk/20110921/depth-foci.html
– KateJean
Nov 17 '18 at 2:59
1
the error is the same - caused by running v2 or v3 code against the v4 library. the solution is to port the script to the current API, while the linked question explains the difference.
– Martin Zeitler
Nov 17 '18 at 4:24
Ah! this definitely got me closer! it got rid of the first error (THANK YOU) but I'm still getting a bug on the var ky = 1.2 * e.alpha; links.forEach(function(d, i) { d.target.y += (d.target.depth * 120 - d.target.y) * ky; }); bit of code. I'm getting a 'TypeError:cannot read alpha of undefined'. Am I doing something here that is not kosher with v4? my JSFiddle has been updated
– KateJean
Nov 17 '18 at 5:57
thateevent should be passed into the function scope withforce.on("tick", function(e) {}...then it should be defined, within the scope of that function.
– Martin Zeitler
Nov 17 '18 at 6:36
|
show 2 more comments
I'm working on creating a force-directed tree (this is different from just a regular tree layout!). So far, I have a basic force-directed graph, but I would like to to compute the depth of each of the nodes based on their distance from the root node, then have them gravitate toward a particular y axis towards that depth.
I would like it to look similar to the example here
I already know I have to modify my data to have a hierarchical structure as below:
var children_data = {
"id": "A",
"children": [
{"id": "G"},
{"id": "E"},
{"id": "C"},
{"id": "H"},
{"id": "B",
"children": [
{"id": "F"},
{"id": "D"},
]},
]
};
But beyond that I'm missing something. I did try to add the following to my tick function (before that flattening my source data and trying to add a depth):
var ky = 1.2 * e.alpha;
links.forEach(function(d, i) {
d.target.y += (d.target.depth * 120 - d.target.y) * ky;
});
and to add the depth to each node, where node was defined as flattened(children_data):
function flatten(json) {
var nodes = ;
function recurse(node, depth) {
if (node.children) {
node.children.forEach(function(child) {
recurse(child, depth + 1);
});
}
node.depth = depth;
nodes.push(node);
}
recurse(json, 1);
return nodes;
}
But I keep getting errors on the tree layout. My very basic and broken JSFiddle is here. It's specifically breaking on line 70,
var links = d3.tree().links(flatten(children_data));
javascript d3.js force-layout
asked Nov 16 '18 at 23:55
KateJeanKateJean
23829
I'm working on creating a force-directed tree (this is different from just a regular tree layout!). So far, I have a basic force-directed graph, but I would like to to compute the depth of each of the nodes based on their distance from the root node, then have them gravitate toward a particular y axis towards that depth.
I would like it to look similar to the example here
I already know I have to modify my data to have a hierarchical structure as below:
var children_data = {
"id": "A",
"children": [
{"id": "G"},
{"id": "E"},
{"id": "C"},
{"id": "H"},
{"id": "B",
"children": [
{"id": "F"},
{"id": "D"},
]},
]
};
But beyond that I'm missing something. I did try to add the following to my tick function (before that flattening my source data and trying to add a depth):
var ky = 1.2 * e.alpha;
links.forEach(function(d, i) {
d.target.y += (d.target.depth * 120 - d.target.y) * ky;
});
and to add the depth to each node, where node was defined as flattened(children_data):
function flatten(json) {
var nodes = ;
function recurse(node, depth) {
if (node.children) {
node.children.forEach(function(child) {
recurse(child, depth + 1);
});
}
node.depth = depth;
nodes.push(node);
}
recurse(json, 1);
return nodes;
}
But I keep getting errors on the tree layout. My very basic and broken JSFiddle is here. It's specifically breaking on line 70,
var links = d3.tree().links(flatten(children_data));
javascript d3.js force-layout
javascript d3.js force-layout
asked Nov 16 '18 at 23:55
KateJeanKateJean
23829
asked Nov 16 '18 at 23:55
KateJeanKateJean
23829
edited Nov 17 '18 at 3:11
KateJean
asked Nov 16 '18 at 23:55
KateJeanKateJean
23829
asked Nov 16 '18 at 23:55
KateJeanKateJean
23829
asked Nov 16 '18 at 23:55
KateJeanKateJean
23829
23829
1
Possible duplicate of tree.links() for D3 v4
– Martin Zeitler
Nov 17 '18 at 2:19
I'm specifically looking for a force-directed graph that is made to look like a tree. The example you linked specifically is for a tree layout. I'm looking for a solution like the one here: mbostock.github.io/d3/talk/20110921/depth-foci.html
– KateJean
Nov 17 '18 at 2:59
1
the error is the same - caused by running v2 or v3 code against the v4 library. the solution is to port the script to the current API, while the linked question explains the difference.
– Martin Zeitler
Nov 17 '18 at 4:24
Ah! this definitely got me closer! it got rid of the first error (THANK YOU) but I'm still getting a bug on the var ky = 1.2 * e.alpha; links.forEach(function(d, i) { d.target.y += (d.target.depth * 120 - d.target.y) * ky; }); bit of code. I'm getting a 'TypeError:cannot read alpha of undefined'. Am I doing something here that is not kosher with v4? my JSFiddle has been updated
– KateJean
Nov 17 '18 at 5:57
thateevent should be passed into the function scope withforce.on("tick", function(e) {}...then it should be defined, within the scope of that function.
– Martin Zeitler
Nov 17 '18 at 6:36
|
show 2 more comments
1
Possible duplicate of tree.links() for D3 v4
– Martin Zeitler
Nov 17 '18 at 2:19
I'm specifically looking for a force-directed graph that is made to look like a tree. The example you linked specifically is for a tree layout. I'm looking for a solution like the one here: mbostock.github.io/d3/talk/20110921/depth-foci.html
– KateJean
Nov 17 '18 at 2:59
1
the error is the same - caused by running v2 or v3 code against the v4 library. the solution is to port the script to the current API, while the linked question explains the difference.
– Martin Zeitler
Nov 17 '18 at 4:24
Ah! this definitely got me closer! it got rid of the first error (THANK YOU) but I'm still getting a bug on the var ky = 1.2 * e.alpha; links.forEach(function(d, i) { d.target.y += (d.target.depth * 120 - d.target.y) * ky; }); bit of code. I'm getting a 'TypeError:cannot read alpha of undefined'. Am I doing something here that is not kosher with v4? my JSFiddle has been updated
– KateJean
Nov 17 '18 at 5:57
thateevent should be passed into the function scope withforce.on("tick", function(e) {}...then it should be defined, within the scope of that function.
– Martin Zeitler
Nov 17 '18 at 6:36
1
1
Possible duplicate of tree.links() for D3 v4
– Martin Zeitler
Nov 17 '18 at 2:19
Possible duplicate of tree.links() for D3 v4
– Martin Zeitler
Nov 17 '18 at 2:19
I'm specifically looking for a force-directed graph that is made to look like a tree. The example you linked specifically is for a tree layout. I'm looking for a solution like the one here: mbostock.github.io/d3/talk/20110921/depth-foci.html
– KateJean
Nov 17 '18 at 2:59
I'm specifically looking for a force-directed graph that is made to look like a tree. The example you linked specifically is for a tree layout. I'm looking for a solution like the one here: mbostock.github.io/d3/talk/20110921/depth-foci.html
– KateJean
Nov 17 '18 at 2:59
1
1
the error is the same - caused by running v2 or v3 code against the v4 library. the solution is to port the script to the current API, while the linked question explains the difference.
– Martin Zeitler
Nov 17 '18 at 4:24
the error is the same - caused by running v2 or v3 code against the v4 library. the solution is to port the script to the current API, while the linked question explains the difference.
– Martin Zeitler
Nov 17 '18 at 4:24
Ah! this definitely got me closer! it got rid of the first error (THANK YOU) but I'm still getting a bug on the var ky = 1.2 * e.alpha; links.forEach(function(d, i) { d.target.y += (d.target.depth * 120 - d.target.y) * ky; }); bit of code. I'm getting a 'TypeError:cannot read alpha of undefined'. Am I doing something here that is not kosher with v4? my JSFiddle has been updated
– KateJean
Nov 17 '18 at 5:57
Ah! this definitely got me closer! it got rid of the first error (THANK YOU) but I'm still getting a bug on the var ky = 1.2 * e.alpha; links.forEach(function(d, i) { d.target.y += (d.target.depth * 120 - d.target.y) * ky; }); bit of code. I'm getting a 'TypeError:cannot read alpha of undefined'. Am I doing something here that is not kosher with v4? my JSFiddle has been updated
– KateJean
Nov 17 '18 at 5:57
that
e event should be passed into the function scope with force.on("tick", function(e) {} ...then it should be defined, within the scope of that function.– Martin Zeitler
Nov 17 '18 at 6:36
that
e event should be passed into the function scope with force.on("tick", function(e) {} ...then it should be defined, within the scope of that function.– Martin Zeitler
Nov 17 '18 at 6:36
|
show 2 more comments
0
active
oldest
votes
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%2f53346870%2fd3-force-directed-tree-set-depth-of-nodes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53346870%2fd3-force-directed-tree-set-depth-of-nodes%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
1
Possible duplicate of tree.links() for D3 v4
– Martin Zeitler
Nov 17 '18 at 2:19
I'm specifically looking for a force-directed graph that is made to look like a tree. The example you linked specifically is for a tree layout. I'm looking for a solution like the one here: mbostock.github.io/d3/talk/20110921/depth-foci.html
– KateJean
Nov 17 '18 at 2:59
1
the error is the same - caused by running v2 or v3 code against the v4 library. the solution is to port the script to the current API, while the linked question explains the difference.
– Martin Zeitler
Nov 17 '18 at 4:24
Ah! this definitely got me closer! it got rid of the first error (THANK YOU) but I'm still getting a bug on the var ky = 1.2 * e.alpha; links.forEach(function(d, i) { d.target.y += (d.target.depth * 120 - d.target.y) * ky; }); bit of code. I'm getting a 'TypeError:cannot read alpha of undefined'. Am I doing something here that is not kosher with v4? my JSFiddle has been updated
– KateJean
Nov 17 '18 at 5:57
that
eevent should be passed into the function scope withforce.on("tick", function(e) {}...then it should be defined, within the scope of that function.– Martin Zeitler
Nov 17 '18 at 6:36