Inadequate handling of node/link removal in force layout causing issues during enter/exit actions

Question

Inadequate handling of node/link removal in force layout causing issues during enter/exit actions

Attempting to visualize a directed acyclic graph using a force layout resulted in some unexpected behavior.

Despite implementing enter/exit conditions for each group element, removed nodes and links were not being removed from the DOM.

Instead, the removed nodes/links seemed to be frozen in the force layout, indicating that the enter/exit conditions were not triggering their removal.

To demonstrate this issue, I isolated the code in a jsfiddle and stack snippet where new nodes/links are added and removed after 3 seconds:

http://jsfiddle.net/dLucxt50/


const nodes = [{
      // node data objects
}];
const links = [{
      // link data objects
}];

// D3 force simulation details
...


body {
  background-color: #30404d;
}

svg {
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4);
  background: rgba(16, 22, 26, 0.3);
  color: #f5f8fa;
}

.link {
  stroke: #777;
  stroke-opacity: 0.3;
  stroke-width: 1.5px;
}

.node circle {
  fill: #ccc;
  stroke: #000;
  stroke-width: 1.5px;
}

.node text {
  display: none;
  font: 10px monospace;
  fill: white;
}

.node:hover circle {
  fill: #000;
}

.node:hover text {
  display: inline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>

javascript d3.js force-layout

Answer 1

Answer №1

There are two main issues to address, one related to nodes and the other to links.

When dealing with nodes, it's crucial to merge the actual g elements (which are returned by .enter().append("g")) into the selection instead of working with the placeholders returned by .enter(). If you don't do this, your node selection will consist of placeholders, and manipulating them won't have any effect.

Regarding links, there is an interesting aspect to consider.

A force layout modifies the structure of your data - for nodes, the data array items acquire properties like x, y, vx, vy, and

index</code if they don't already possess these attributes.</p>

<p>For links, the properties <code>source

and target become direct references to specific nodes/items in the nodes data array rather than being string identifiers. This is why we can use:

link
  .attr("x1", (d) => d.source.x)
  .attr("y1", (d) => d.source.y)
  .attr("x2", (d) => d.target.x)
  .attr("y2", (d) => d.target.y);

However, this also means that we cannot use:

links = links.filter(l => l.source !== popped.id && l.target !== popped.id);

This limitation arises because when initializing the links, l.source and l.target are not strings that can be compared directly to

popped.id</code. Instead, we need to use <code>l.source.id

and l.target.id.

Here is a link to the updated fiddle

Below is a modified snippet with adjusted ids:

// Code snippet 
const nodes=[{"id":"a"}, ... {"id":"ax"}];
let links=[{"source":"a","target":"b"}, ..., {"source":"aw","target":"ax"}];

// D3 code here...

// CSS styles
body {
  background-color: #30404d;
}
...

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<body>
  <svg id="graph" style="width: 1000px; height: 500px;"> </div>
</body>

Answer 2

There are two main issues to address, one related to nodes and the other to links.

When dealing with nodes, it's crucial to merge the actual g elements (which are returned by .enter().append("g")) into the selection instead of working with the placeholders returned by .enter(). If you don't do this, your node selection will consist of placeholders, and manipulating them won't have any effect.

Regarding links, there is an interesting aspect to consider.

A force layout modifies the structure of your data - for nodes, the data array items acquire properties like x, y, vx, vy, and

index</code if they don't already possess these attributes.</p>

<p>For links, the properties <code>source

and target become direct references to specific nodes/items in the nodes data array rather than being string identifiers. This is why we can use:

link
  .attr("x1", (d) => d.source.x)
  .attr("y1", (d) => d.source.y)
  .attr("x2", (d) => d.target.x)
  .attr("y2", (d) => d.target.y);

However, this also means that we cannot use:

links = links.filter(l => l.source !== popped.id && l.target !== popped.id);

This limitation arises because when initializing the links, l.source and l.target are not strings that can be compared directly to

popped.id</code. Instead, we need to use <code>l.source.id

and l.target.id.

Here is a link to the updated fiddle

Below is a modified snippet with adjusted ids:

// Code snippet 
const nodes=[{"id":"a"}, ... {"id":"ax"}];
let links=[{"source":"a","target":"b"}, ..., {"source":"aw","target":"ax"}];

// D3 code here...

// CSS styles
body {
  background-color: #30404d;
}
...

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<body>
  <svg id="graph" style="width: 1000px; height: 500px;"> </div>
</body>

Inadequate handling of node/link removal in force layout causing issues during enter/exit actions

Answer №1

Similar questions

Upon submitting the form, the dynamic dependent drop-down list fails to offer any available options

Bcrypt.compare failing to match the passwords

How can I convert a button to a link within an HTML table?

Determine if the browser displays <select multiple> as a modal dialog

What is the best way to transfer item information from Flatlist within a React Native application?

Dynamically arranging data rows in a table using dates with Vue

Eliminating unnecessary whitespace between the bottom of the document and an element

Is there a way to refresh CSS styles when the window width is adjusted?

EasyWaySaveArchive in ninja training - mastering the art of retrieving components

Efficiently expanding and collapsing multiple levels with Bootstrap through AJAX data responses using jQuery

What is the reason that utilizing $("input").first() does not function properly on Google Forms?

Utilizing Node.js Build System in Sublime Text 3 for JavaScript development

Support for Vertex JS and Redis Sentinel integration

updating an object using its instance in angular: step-by-step guide

The text is not displaying as expected due to a timeout issue

Angular Reactive Forms may not properly update other inputs when binding a control to multiple inputs

Traverse nested "for of" Loops recursively in JavaScript

Node JS encountered an error: ECONNRESET was read at TCP.onStreamRead on line 211, column 20 in the node internal stream base commons

Looking to apply a filter using an object in lodash that includes a condition for a range of values

Issue with SweetAlert2 cancel button being unresponsive while an ajax request is in progress