Drawing link with d3 and d3-flextree plugin
I'm (still) trying to make an orgchart with D3 and d3-flextree plugin. I struggle drawing the links between the nodes. The "equation" I use consider the middle of the node (as I understand it) whereas I'd like to draw from the end of a node.
I think my mistake is in my drawing-link function
function diagonal(s, d) {
path = `M ${s.x} ${s.y}
L ${s.x} ${(s.y + d.y) * 0.5},
${d.x} ${(s.y + d.y) * 0.5 },
${d.x} ${d.y}`
return path
}
It's hard to explain so I made a JSFiddle: https://jsfiddle.net/ymv5sr9k/11/
In this exemple all links are the way I want thanks to right padding, but as soon as the nodeSize change (see the big node) it's all broken. I guess I need a more general drawing-link function but I can't figure it out
Thanks for reading,
Zoom
d3.js
edited Nov 17 '18 at 6:53
Fuzzyma
3,01821336
asked Nov 13 '18 at 14:13
ZoomZoom
53
|
show 1 more comment
I'm (still) trying to make an orgchart with D3 and d3-flextree plugin. I struggle drawing the links between the nodes. The "equation" I use consider the middle of the node (as I understand it) whereas I'd like to draw from the end of a node.
I think my mistake is in my drawing-link function
function diagonal(s, d) {
path = `M ${s.x} ${s.y}
L ${s.x} ${(s.y + d.y) * 0.5},
${d.x} ${(s.y + d.y) * 0.5 },
${d.x} ${d.y}`
return path
}
It's hard to explain so I made a JSFiddle: https://jsfiddle.net/ymv5sr9k/11/
In this exemple all links are the way I want thanks to right padding, but as soon as the nodeSize change (see the big node) it's all broken. I guess I need a more general drawing-link function but I can't figure it out
Thanks for reading,
Zoom
d3.js
edited Nov 17 '18 at 6:53
Fuzzyma
3,01821336
asked Nov 13 '18 at 14:13
ZoomZoom
53
where is the mid bottom relative to the box center?
– rioV8
Nov 13 '18 at 15:37
I am not sure that I understand the question, when I said center it's because I multiply by 0.5 in the path equation. Is it what you talk about ?
– Zoom
Nov 13 '18 at 15:40
you calculate the mid point between the centers of the nodes, I talk about the node box
– rioV8
Nov 13 '18 at 16:05
I think I understood something ^^ What I do : I draw from nodeParent to nodeChild. this result in : topParentBox to topChildBox. So I know that I rather want => bottomParentBox to topChildBox. It's probably something like : (nodeParent + nodeSize) to nodeChild. But I dont successfully acces to nodeSize AND all my attempts to change the equation resulted in non-sense. I hope it's not to confuse... Thank you for your time, I'm really grateful !
– Zoom
Nov 13 '18 at 16:22
if you need some data in some objects put it in so you can use it in the link calculation
– rioV8
Nov 13 '18 at 19:00
|
show 1 more comment
I'm (still) trying to make an orgchart with D3 and d3-flextree plugin. I struggle drawing the links between the nodes. The "equation" I use consider the middle of the node (as I understand it) whereas I'd like to draw from the end of a node.
I think my mistake is in my drawing-link function
function diagonal(s, d) {
path = `M ${s.x} ${s.y}
L ${s.x} ${(s.y + d.y) * 0.5},
${d.x} ${(s.y + d.y) * 0.5 },
${d.x} ${d.y}`
return path
}
It's hard to explain so I made a JSFiddle: https://jsfiddle.net/ymv5sr9k/11/
In this exemple all links are the way I want thanks to right padding, but as soon as the nodeSize change (see the big node) it's all broken. I guess I need a more general drawing-link function but I can't figure it out
Thanks for reading,
Zoom
d3.js
edited Nov 17 '18 at 6:53
Fuzzyma
3,01821336
asked Nov 13 '18 at 14:13
ZoomZoom
53
I'm (still) trying to make an orgchart with D3 and d3-flextree plugin. I struggle drawing the links between the nodes. The "equation" I use consider the middle of the node (as I understand it) whereas I'd like to draw from the end of a node.
I think my mistake is in my drawing-link function
function diagonal(s, d) {
path = `M ${s.x} ${s.y}
L ${s.x} ${(s.y + d.y) * 0.5},
${d.x} ${(s.y + d.y) * 0.5 },
${d.x} ${d.y}`
return path
}
It's hard to explain so I made a JSFiddle: https://jsfiddle.net/ymv5sr9k/11/
In this exemple all links are the way I want thanks to right padding, but as soon as the nodeSize change (see the big node) it's all broken. I guess I need a more general drawing-link function but I can't figure it out
Thanks for reading,
Zoom
d3.js
d3.js
edited Nov 17 '18 at 6:53
Fuzzyma
3,01821336
asked Nov 13 '18 at 14:13
ZoomZoom
53
edited Nov 17 '18 at 6:53
Fuzzyma
3,01821336
asked Nov 13 '18 at 14:13
ZoomZoom
53
edited Nov 17 '18 at 6:53
Fuzzyma
3,01821336
edited Nov 17 '18 at 6:53
Fuzzyma
3,01821336
edited Nov 17 '18 at 6:53
Fuzzyma
3,01821336
3,01821336
asked Nov 13 '18 at 14:13
ZoomZoom
53
asked Nov 13 '18 at 14:13
ZoomZoom
53
asked Nov 13 '18 at 14:13
ZoomZoom
53
53
where is the mid bottom relative to the box center?
– rioV8
Nov 13 '18 at 15:37
I am not sure that I understand the question, when I said center it's because I multiply by 0.5 in the path equation. Is it what you talk about ?
– Zoom
Nov 13 '18 at 15:40
you calculate the mid point between the centers of the nodes, I talk about the node box
– rioV8
Nov 13 '18 at 16:05
I think I understood something ^^ What I do : I draw from nodeParent to nodeChild. this result in : topParentBox to topChildBox. So I know that I rather want => bottomParentBox to topChildBox. It's probably something like : (nodeParent + nodeSize) to nodeChild. But I dont successfully acces to nodeSize AND all my attempts to change the equation resulted in non-sense. I hope it's not to confuse... Thank you for your time, I'm really grateful !
– Zoom
Nov 13 '18 at 16:22
if you need some data in some objects put it in so you can use it in the link calculation
– rioV8
Nov 13 '18 at 19:00
|
show 1 more comment
where is the mid bottom relative to the box center?
– rioV8
Nov 13 '18 at 15:37
I am not sure that I understand the question, when I said center it's because I multiply by 0.5 in the path equation. Is it what you talk about ?
– Zoom
Nov 13 '18 at 15:40
you calculate the mid point between the centers of the nodes, I talk about the node box
– rioV8
Nov 13 '18 at 16:05
I think I understood something ^^ What I do : I draw from nodeParent to nodeChild. this result in : topParentBox to topChildBox. So I know that I rather want => bottomParentBox to topChildBox. It's probably something like : (nodeParent + nodeSize) to nodeChild. But I dont successfully acces to nodeSize AND all my attempts to change the equation resulted in non-sense. I hope it's not to confuse... Thank you for your time, I'm really grateful !
– Zoom
Nov 13 '18 at 16:22
if you need some data in some objects put it in so you can use it in the link calculation
– rioV8
Nov 13 '18 at 19:00
where is the mid bottom relative to the box center?
– rioV8
Nov 13 '18 at 15:37
where is the mid bottom relative to the box center?
– rioV8
Nov 13 '18 at 15:37
I am not sure that I understand the question, when I said center it's because I multiply by 0.5 in the path equation. Is it what you talk about ?
– Zoom
Nov 13 '18 at 15:40
I am not sure that I understand the question, when I said center it's because I multiply by 0.5 in the path equation. Is it what you talk about ?
– Zoom
Nov 13 '18 at 15:40
you calculate the mid point between the centers of the nodes, I talk about the node box
– rioV8
Nov 13 '18 at 16:05
you calculate the mid point between the centers of the nodes, I talk about the node box
– rioV8
Nov 13 '18 at 16:05
I think I understood something ^^ What I do : I draw from nodeParent to nodeChild. this result in : topParentBox to topChildBox. So I know that I rather want => bottomParentBox to topChildBox. It's probably something like : (nodeParent + nodeSize) to nodeChild. But I dont successfully acces to nodeSize AND all my attempts to change the equation resulted in non-sense. I hope it's not to confuse... Thank you for your time, I'm really grateful !
– Zoom
Nov 13 '18 at 16:22
I think I understood something ^^ What I do : I draw from nodeParent to nodeChild. this result in : topParentBox to topChildBox. So I know that I rather want => bottomParentBox to topChildBox. It's probably something like : (nodeParent + nodeSize) to nodeChild. But I dont successfully acces to nodeSize AND all my attempts to change the equation resulted in non-sense. I hope it's not to confuse... Thank you for your time, I'm really grateful !
– Zoom
Nov 13 '18 at 16:22
if you need some data in some objects put it in so you can use it in the link calculation
– rioV8
Nov 13 '18 at 19:00
if you need some data in some objects put it in so you can use it in the link calculation
– rioV8
Nov 13 '18 at 19:00
|
show 1 more comment
1 Answer
1
active
oldest
votes
Problem solved! As i said in the comments, I needed to move the horizontal line. I added nodeSize in my two y "control points". And nodeSize is actually source.y - destination.y - padding. This is my final equation:
function diagonal(s, d) {
var nodeSize = s.y - d.y - 30
return "M" + s.x + "," + s.y
+ "L" + s.x + "," + (d.y + s.y + nodeSize) / 2
+ " " + d.x + "," + (d.y + s.y + nodeSize) / 2
+ " " + d.x + "," + d.y;
};
Thank you for your time!
edited Nov 14 '18 at 11:54
bfontaine
8,89174170
answered Nov 14 '18 at 10:13
ZoomZoom
53
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%2f53282956%2fdrawing-link-with-d3-and-d3-flextree-plugin%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
Problem solved! As i said in the comments, I needed to move the horizontal line. I added nodeSize in my two y "control points". And nodeSize is actually source.y - destination.y - padding. This is my final equation:
function diagonal(s, d) {
var nodeSize = s.y - d.y - 30
return "M" + s.x + "," + s.y
+ "L" + s.x + "," + (d.y + s.y + nodeSize) / 2
+ " " + d.x + "," + (d.y + s.y + nodeSize) / 2
+ " " + d.x + "," + d.y;
};
Thank you for your time!
edited Nov 14 '18 at 11:54
bfontaine
8,89174170
answered Nov 14 '18 at 10:13
ZoomZoom
53
add a comment |
Problem solved! As i said in the comments, I needed to move the horizontal line. I added nodeSize in my two y "control points". And nodeSize is actually source.y - destination.y - padding. This is my final equation:
function diagonal(s, d) {
var nodeSize = s.y - d.y - 30
return "M" + s.x + "," + s.y
+ "L" + s.x + "," + (d.y + s.y + nodeSize) / 2
+ " " + d.x + "," + (d.y + s.y + nodeSize) / 2
+ " " + d.x + "," + d.y;
};
Thank you for your time!
edited Nov 14 '18 at 11:54
bfontaine
8,89174170
answered Nov 14 '18 at 10:13
ZoomZoom
53
add a comment |
Problem solved! As i said in the comments, I needed to move the horizontal line. I added nodeSize in my two y "control points". And nodeSize is actually source.y - destination.y - padding. This is my final equation:
function diagonal(s, d) {
var nodeSize = s.y - d.y - 30
return "M" + s.x + "," + s.y
+ "L" + s.x + "," + (d.y + s.y + nodeSize) / 2
+ " " + d.x + "," + (d.y + s.y + nodeSize) / 2
+ " " + d.x + "," + d.y;
};
Thank you for your time!
edited Nov 14 '18 at 11:54
bfontaine
8,89174170
answered Nov 14 '18 at 10:13
ZoomZoom
53
Problem solved! As i said in the comments, I needed to move the horizontal line. I added nodeSize in my two y "control points". And nodeSize is actually source.y - destination.y - padding. This is my final equation:
function diagonal(s, d) {
var nodeSize = s.y - d.y - 30
return "M" + s.x + "," + s.y
+ "L" + s.x + "," + (d.y + s.y + nodeSize) / 2
+ " " + d.x + "," + (d.y + s.y + nodeSize) / 2
+ " " + d.x + "," + d.y;
};
Thank you for your time!
edited Nov 14 '18 at 11:54
bfontaine
8,89174170
answered Nov 14 '18 at 10:13
ZoomZoom
53
edited Nov 14 '18 at 11:54
bfontaine
8,89174170
edited Nov 14 '18 at 11:54
bfontaine
8,89174170
edited Nov 14 '18 at 11:54
bfontaine
8,89174170
8,89174170
answered Nov 14 '18 at 10:13
ZoomZoom
53
answered Nov 14 '18 at 10:13
ZoomZoom
53
answered Nov 14 '18 at 10:13
ZoomZoom
53
53
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%2f53282956%2fdrawing-link-with-d3-and-d3-flextree-plugin%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
where is the mid bottom relative to the box center?
– rioV8
Nov 13 '18 at 15:37
I am not sure that I understand the question, when I said center it's because I multiply by 0.5 in the path equation. Is it what you talk about ?
– Zoom
Nov 13 '18 at 15:40
you calculate the mid point between the centers of the nodes, I talk about the node box
– rioV8
Nov 13 '18 at 16:05
I think I understood something ^^ What I do : I draw from nodeParent to nodeChild. this result in : topParentBox to topChildBox. So I know that I rather want => bottomParentBox to topChildBox. It's probably something like : (nodeParent + nodeSize) to nodeChild. But I dont successfully acces to nodeSize AND all my attempts to change the equation resulted in non-sense. I hope it's not to confuse... Thank you for your time, I'm really grateful !
– Zoom
Nov 13 '18 at 16:22
if you need some data in some objects put it in so you can use it in the link calculation
– rioV8
Nov 13 '18 at 19:00