Error in vis.js network: hierarchical layout caused by node quantity


I'm encountering an unusual issue that I can't seem to resolve by referring to the vis.js documentation.
My network has a fixed hierarchy with a specific level defined for each node.
I have a total of 51 nodes, and everything looks like this:
https://i.sstatic.net/UZNgy.png

However, when I add another node at the bottom of the network (bringing the total to 52), the layout completely changes. The nodes shift positions in an attempt to fill the white space, resulting in this visualization:
https://i.sstatic.net/6cc48.png

Despite trying various options, I haven't been successful in resolving this issue.
Here are the current options I am using:

options = {
layout: {
improvedLayout: false,
hierarchical: {
enabled: true,
levelSeparation: 150,
nodeSpacing: 110,
treeSpacing: 200,
blockShifting: false,
edgeMinimization: true,
parentCentralization: true,
direction: "LR",
sortMethod: "directed",
shakeTowards: "roots"
}
},
interaction:{
tooltipDelay: 100
},
edges: {
font: {
size: 0
}
},
nodes: {
shape: 'circle'
},
physics: false
};

If you have any suggestions or solutions, I would greatly appreciate it.
Thank you!

javascriptlayoutvis.jshierarchicalvis.js-network

Answer №1

One way to customize the layout is by adding a randomSeed parameter to the options object.

layout: {
    randomSeed: 1,
    improvedLayout: false,
    hierarchical: {
        enabled: true,
        levelSeparation: 150,
        nodeSpacing: 110,
        treeSpacing: 200,
        blockShifting: false,
        edgeMinimization: true,
        parentCentralization: true,
        direction: "LR",
        sortMethod: "directed",
        shakeTowards: "roots"
    }
}

To achieve the desired layout, you can experiment with changing the value of the randomSeed parameter (randomSeed: 1). Hopefully, this solution will be helpful for your needs.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Launch a modal from a separate webpage

I've been trying to implement a modal using Bootstrap 4, and after referring to the documentation, it seems to be working smoothly. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <scri ...

javascripthtmlbootstrap-4

What is the most effective method for establishing functions in AngularJS?

Hey there, I'm currently working on a function in AngularJS and I'm not sure what the best practice is for defining methods. Any suggestions would be greatly appreciated. Option 1: var getBranchKey = function(currentBranchName) { }; Option 2: ...

javascriptangularjshtml

What could be the reason for my jQuery call displaying as undefined?

How can I extract a URL from an <a> tag and show the first paragraph of the linked page below the title? At the moment, it just shows 'undefined'. Here's my HTML: <section class="community"> <div class="news"> <ul cla ...

javascriptjqueryajaxpage-fragments

Is it possible to utilize the expose method to retrieve additional reactive variables and computed properties similar to methods in Vue 3?

Switching my application from Vue 2 to Vue 3 has been quite a journey. I've utilized the Composition API to refactor my previous render function into the setup hook. One interesting discovery was the ability to expose methods using context.expose({}). ...

javascriptvue.jsvue-componentvuejs3

I'm looking for a way to add an onclick event to every element created by Vue.js through a "v-for" loop in order to toggle the visibility of its inner content

My Vue data consists of: data: function() { return { results: { "items": [ { "id": "770c257b-7ded-437c-99b5-3b8953b5be3a", "name": "Gsbssbb", "price": 9559, "colour": { ...

javascripthtmlloopsvue.jsvuejs2

Setting up the Materialize autocomplete feature by fetching data from an API using AJAX and jQuery

Welcome everyone, I have integrated materialize.css into my PHP application I am trying to initialize the auto-complete data using an API call. The .autocomplete () function initializes the data using a JSON array called " data ":, which I ret ...

javascriptphpjqueryajaxmaterialize

Transfer a GET parameter from the URL to a .js file, then pass it from the .js file to a

Hey there, I'm currently using a JavaScript file to populate my HTML page with dynamic data. The JS file makes a call to a PHP file, which then fetches information from my SQL database and echoes it as json_encode to populate the HTML page. The issue ...

phpjavascriptjqueryhtmlajax

The require statement in Vue.js is failing to function dynamically

Having trouble dynamically requiring an image in Vue.js and it's not functioning as expected <div class="card" :style="{ background: 'url(' + require(image) + ')',}"> export default { data() { return { ...

javascriptvue.jsvuejs2

making the div tag invisible when the if statement is satisfied

Is there a way to hide a <div> element if my data equals zero? I have an if condition set up as follows: if ($_SESSION['m1'] == 0) { I want the <div> tag to be deactivated, here is the code snippet for the <div> in question: ...

phpjavascripthtml

The color of active links in TailwindCSS remains unchanged

In my project, I am using NextJS along with Tailwind CSS to create a top navigation bar. My goal is to change the text color for active links within the navigation bar. Below is the code snippet I have implemented: const Header = () => { return( ...

javascripthtmlcssnext.jstailwind-css

Adjust the position of vertices when the mouse hovers over them

I have a PlaneGeometry and I am trying to adjust the z position of the vertex being hovered over, but I am uncertain about how to retrieve it. //THREE.WebGLRenderer 69 // Creating plane var geometryPlane = new THREE.PlaneGeometry( 100, 100, 20, 10 ); ...

javascriptthree.js

Can express-handlebars tags be utilized within an HTML script tag when on the client side?

For a while now, I've been facing a challenge. I'm in the process of building an application with express-handlebars and so far everything is going smoothly. The data that needs to be displayed on the webpages looks good thanks to the Helper func ...

javascriptnode.jsexpressnpmexpress-handlebars

The select2 does not show the selected information

My select2 is not selecting the value when in edit mode. You can view my data here. Upon clicking the edit data button, it should select "settings" as the parent's value, but unfortunately, it's not working. You can see the issue here. Modal Sc ...

javascriptphpajaxlaraveljquery-select2

What is the best way to manage the cumulative index within two nested ng-repeats?

Within the scope of a directive, I am working with two ng-repeats. This directive is responsible for generating a table, and each table cell's data comes from a separate data source. This data source requires the cumulative index of the two repeaters. ...

javascriptangularjs

The transparency level of materials in THREE.js

When using the lambert shader, I encountered an issue with setting the material. In the example provided, it sets the material as follows: this.material.uniforms.emissive.value = new THREE.Color( Math.random(), Math.random(), Math.random()); Prior ...

javascriptthree.jsshaderautodesk-forge

Is it possible to retrieve a value within nested objects using only a single string as the reference?

Can a value inside a nested object be accessed with a single string? For example, consider the object below: skill: { skillDetails: { developerDetails: { developerName: "mr. developer" } } } Is there a way to retrieve ...

javascriptjsonobject

Pattern matching to exclude specific characters

To enhance security measures, I am looking to restrict users from inputting the following characters: ~ " # % & * : < > ? / \ { | } . The key requirement is that all other characters should be permitted, while ensuring that only the sp ...

javascriptregextypescriptregex-group

After the update to the page, the DOM retains the previous element

I'm currently developing a Chrome Extension (no prior knowledge needed for this inquiry...) and I have encountered an issue. Whenever I navigate to a page with a specific domain, a script is executed. This script simply retrieves the value of the attr ...

javascriptjquerydomgoogle-chrome-extension

Unable to retrieve Object property using computed method in Vue 3 vuex results in undefined value

When attempting to display the values of a computed property in the template using the syntax {{todo[0]['title']}}, I am receiving an 'undefined' output. However, using {{todo[0]]}} allows me to render the entire object. My goal is to b ...

javascriptvue.jsvuejs3vuex4

Color-Thief Node plugin reported an issue: "The provided image has not finished loading."

While working in Node/Express, I attempted to utilize the npm package color-thief to extract the dominant color from an image. Unfortunately, it failed with the error message stating that the "image given has not completed loading". The intriguing part is ...

javascriptnode.jsexpressnpmcolor-thief