Keeping two nodes next to each other when drawing a vis.js network
I am trying to draw a family tree with vis.js using hierarchical layout. Some nodes represent a husband and wife, which are connected to each other with an edge. I would like such node pairs to be placed next to each other - however vis.js places them apart with other nodes in between.
Is there some way to instruct vis.js to keep two nodes together and draw them next to each other ?
These are the current network options I am using:
var tree_options =
{
nodes:
{
borderWidth: 1,
borderWidthSelected: 1,
shape: "box",
color:
{
border: 'lightgray',
background: 'white',
highlight:
{
border: 'lightgray',
background: 'lightblue'
},
hover:
{
border: 'lightgray',
background: 'lightblue'
}
}
},
edges:
{
smooth:
{
type: 'cubicBezier',
forceDirection: 'vertical',
roundness: 0.5
},
color: 'lightgray'
},
layout:
{
hierarchical:
{
direction: 'UD',
nodeSpacing: 150,
parentCentralization: true,
sortMethod: 'directed'
}
},
interaction:
{
dragNodes: true
},
physics: false
};
vis.js vis.js-network
asked Jan 2 at 20:11
TulipTulip
62
add a comment |
I am trying to draw a family tree with vis.js using hierarchical layout. Some nodes represent a husband and wife, which are connected to each other with an edge. I would like such node pairs to be placed next to each other - however vis.js places them apart with other nodes in between.
Is there some way to instruct vis.js to keep two nodes together and draw them next to each other ?
These are the current network options I am using:
var tree_options =
{
nodes:
{
borderWidth: 1,
borderWidthSelected: 1,
shape: "box",
color:
{
border: 'lightgray',
background: 'white',
highlight:
{
border: 'lightgray',
background: 'lightblue'
},
hover:
{
border: 'lightgray',
background: 'lightblue'
}
}
},
edges:
{
smooth:
{
type: 'cubicBezier',
forceDirection: 'vertical',
roundness: 0.5
},
color: 'lightgray'
},
layout:
{
hierarchical:
{
direction: 'UD',
nodeSpacing: 150,
parentCentralization: true,
sortMethod: 'directed'
}
},
interaction:
{
dragNodes: true
},
physics: false
};
vis.js vis.js-network
asked Jan 2 at 20:11
TulipTulip
62
add a comment |
I am trying to draw a family tree with vis.js using hierarchical layout. Some nodes represent a husband and wife, which are connected to each other with an edge. I would like such node pairs to be placed next to each other - however vis.js places them apart with other nodes in between.
Is there some way to instruct vis.js to keep two nodes together and draw them next to each other ?
These are the current network options I am using:
var tree_options =
{
nodes:
{
borderWidth: 1,
borderWidthSelected: 1,
shape: "box",
color:
{
border: 'lightgray',
background: 'white',
highlight:
{
border: 'lightgray',
background: 'lightblue'
},
hover:
{
border: 'lightgray',
background: 'lightblue'
}
}
},
edges:
{
smooth:
{
type: 'cubicBezier',
forceDirection: 'vertical',
roundness: 0.5
},
color: 'lightgray'
},
layout:
{
hierarchical:
{
direction: 'UD',
nodeSpacing: 150,
parentCentralization: true,
sortMethod: 'directed'
}
},
interaction:
{
dragNodes: true
},
physics: false
};
vis.js vis.js-network
asked Jan 2 at 20:11
TulipTulip
62
I am trying to draw a family tree with vis.js using hierarchical layout. Some nodes represent a husband and wife, which are connected to each other with an edge. I would like such node pairs to be placed next to each other - however vis.js places them apart with other nodes in between.
Is there some way to instruct vis.js to keep two nodes together and draw them next to each other ?
These are the current network options I am using:
var tree_options =
{
nodes:
{
borderWidth: 1,
borderWidthSelected: 1,
shape: "box",
color:
{
border: 'lightgray',
background: 'white',
highlight:
{
border: 'lightgray',
background: 'lightblue'
},
hover:
{
border: 'lightgray',
background: 'lightblue'
}
}
},
edges:
{
smooth:
{
type: 'cubicBezier',
forceDirection: 'vertical',
roundness: 0.5
},
color: 'lightgray'
},
layout:
{
hierarchical:
{
direction: 'UD',
nodeSpacing: 150,
parentCentralization: true,
sortMethod: 'directed'
}
},
interaction:
{
dragNodes: true
},
physics: false
};
vis.js vis.js-network
vis.js vis.js-network
asked Jan 2 at 20:11
TulipTulip
62
asked Jan 2 at 20:11
TulipTulip
62
edited Jan 3 at 7:04
Tulip
asked Jan 2 at 20:11
TulipTulip
62
asked Jan 2 at 20:11
TulipTulip
62
asked Jan 2 at 20:11
TulipTulip
62
62
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Given it is a hierarchical network, have you tried setting a value for "level" on each node?
See example: http://visjs.org/examples/network/layout/hierarchicalLayoutUserdefined.html
answered Jan 5 at 16:31
AdamAdam
313
Yes, I am setting a level for each node. My problem is that 2 nodes that have the same level and represent husband+wife are not necessarily places next to each other in the graph - in some cases other nodes are placed in between them. My question is whether there is some way to make sure these 2 nodes are "tied" together and shown next to each other. In the example you provided - let's say I would like nodes 1 and 11 to be drawn next to each other.
– Tulip
Jan 6 at 8:23
The only possibilities I can think of are: (a) have an edge between the two nodes and specify a short edge length (b) somehow figure out and set the x,y of those nodes (c) change the physics
– Adam
Jan 6 at 11:30
Thanks for the reply, I did try to "play" with the various parameters but could not get this to work for now.
– Tulip
Jan 6 at 20:14
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%2f54012553%2fkeeping-two-nodes-next-to-each-other-when-drawing-a-vis-js-network%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
Given it is a hierarchical network, have you tried setting a value for "level" on each node?
See example: http://visjs.org/examples/network/layout/hierarchicalLayoutUserdefined.html
answered Jan 5 at 16:31
AdamAdam
313
Yes, I am setting a level for each node. My problem is that 2 nodes that have the same level and represent husband+wife are not necessarily places next to each other in the graph - in some cases other nodes are placed in between them. My question is whether there is some way to make sure these 2 nodes are "tied" together and shown next to each other. In the example you provided - let's say I would like nodes 1 and 11 to be drawn next to each other.
– Tulip
Jan 6 at 8:23
The only possibilities I can think of are: (a) have an edge between the two nodes and specify a short edge length (b) somehow figure out and set the x,y of those nodes (c) change the physics
– Adam
Jan 6 at 11:30
Thanks for the reply, I did try to "play" with the various parameters but could not get this to work for now.
– Tulip
Jan 6 at 20:14
add a comment |
Given it is a hierarchical network, have you tried setting a value for "level" on each node?
See example: http://visjs.org/examples/network/layout/hierarchicalLayoutUserdefined.html
answered Jan 5 at 16:31
AdamAdam
313
Yes, I am setting a level for each node. My problem is that 2 nodes that have the same level and represent husband+wife are not necessarily places next to each other in the graph - in some cases other nodes are placed in between them. My question is whether there is some way to make sure these 2 nodes are "tied" together and shown next to each other. In the example you provided - let's say I would like nodes 1 and 11 to be drawn next to each other.
– Tulip
Jan 6 at 8:23
The only possibilities I can think of are: (a) have an edge between the two nodes and specify a short edge length (b) somehow figure out and set the x,y of those nodes (c) change the physics
– Adam
Jan 6 at 11:30
Thanks for the reply, I did try to "play" with the various parameters but could not get this to work for now.
– Tulip
Jan 6 at 20:14
add a comment |
Given it is a hierarchical network, have you tried setting a value for "level" on each node?
See example: http://visjs.org/examples/network/layout/hierarchicalLayoutUserdefined.html
answered Jan 5 at 16:31
AdamAdam
313
Given it is a hierarchical network, have you tried setting a value for "level" on each node?
See example: http://visjs.org/examples/network/layout/hierarchicalLayoutUserdefined.html
answered Jan 5 at 16:31
AdamAdam
313
answered Jan 5 at 16:31
AdamAdam
313
answered Jan 5 at 16:31
AdamAdam
313
answered Jan 5 at 16:31
AdamAdam
313
313
Yes, I am setting a level for each node. My problem is that 2 nodes that have the same level and represent husband+wife are not necessarily places next to each other in the graph - in some cases other nodes are placed in between them. My question is whether there is some way to make sure these 2 nodes are "tied" together and shown next to each other. In the example you provided - let's say I would like nodes 1 and 11 to be drawn next to each other.
– Tulip
Jan 6 at 8:23
The only possibilities I can think of are: (a) have an edge between the two nodes and specify a short edge length (b) somehow figure out and set the x,y of those nodes (c) change the physics
– Adam
Jan 6 at 11:30
Thanks for the reply, I did try to "play" with the various parameters but could not get this to work for now.
– Tulip
Jan 6 at 20:14
add a comment |
Yes, I am setting a level for each node. My problem is that 2 nodes that have the same level and represent husband+wife are not necessarily places next to each other in the graph - in some cases other nodes are placed in between them. My question is whether there is some way to make sure these 2 nodes are "tied" together and shown next to each other. In the example you provided - let's say I would like nodes 1 and 11 to be drawn next to each other.
– Tulip
Jan 6 at 8:23
The only possibilities I can think of are: (a) have an edge between the two nodes and specify a short edge length (b) somehow figure out and set the x,y of those nodes (c) change the physics
– Adam
Jan 6 at 11:30
Thanks for the reply, I did try to "play" with the various parameters but could not get this to work for now.
– Tulip
Jan 6 at 20:14
Yes, I am setting a level for each node. My problem is that 2 nodes that have the same level and represent husband+wife are not necessarily places next to each other in the graph - in some cases other nodes are placed in between them. My question is whether there is some way to make sure these 2 nodes are "tied" together and shown next to each other. In the example you provided - let's say I would like nodes 1 and 11 to be drawn next to each other.
– Tulip
Jan 6 at 8:23
Yes, I am setting a level for each node. My problem is that 2 nodes that have the same level and represent husband+wife are not necessarily places next to each other in the graph - in some cases other nodes are placed in between them. My question is whether there is some way to make sure these 2 nodes are "tied" together and shown next to each other. In the example you provided - let's say I would like nodes 1 and 11 to be drawn next to each other.
– Tulip
Jan 6 at 8:23
The only possibilities I can think of are: (a) have an edge between the two nodes and specify a short edge length (b) somehow figure out and set the x,y of those nodes (c) change the physics
– Adam
Jan 6 at 11:30
The only possibilities I can think of are: (a) have an edge between the two nodes and specify a short edge length (b) somehow figure out and set the x,y of those nodes (c) change the physics
– Adam
Jan 6 at 11:30
Thanks for the reply, I did try to "play" with the various parameters but could not get this to work for now.
– Tulip
Jan 6 at 20:14
Thanks for the reply, I did try to "play" with the various parameters but could not get this to work for now.
– Tulip
Jan 6 at 20:14
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%2f54012553%2fkeeping-two-nodes-next-to-each-other-when-drawing-a-vis-js-network%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
