Connecting nodes to edges based on their unique ids in the d3.js graph library

Question

Connecting nodes to edges based on their unique ids in the d3.js graph library

I am encountering an issue with this code while trying to integrate it with a new JSON object called 'new_json'. Specifically, I need the links in this code to be created based on the nodes' IDs. Can anyone provide assistance with this?

 var new_json = {{"nodes": [{ "id": 124587, "name": "paper1", "citation": 5, "group": 1 },
{ "id": 178456, "name": "paper2", "citation": 8, "group": 2 }],
"links": [{ "source": 124587, "target": 178456, "name": "A-B-1", "value": 8 }]};

function load_graph(text) {
            var color = d3.scale.category20();           
            var data1 = {
                "nodes": [
                    { "id": 0, "name": "paper1", "citation": 5, "group": 1 },
                    { "id": 1, "name": "paper2", "citation": 8, "group": 2 },
                    { "id": 2, "name": "paper3", "citation": 12, "group": 3 },
                    { "id": 3, "name": "paper4", "citation": 25, "group": 4 },
                    { "id": 4, "name": "paper5", "citation": 15, "group": 5 },
                    { "id": 5, "name": "paper6", "citation": 5, "group": 1 },
                    { "id": 6, "name": "paper7", "citation": 8, "group": 2 },
                    { "id": 7, "name": "paper8", "citation": 12, "group": 3 },
                    { "id": 8, "name": "paper9", "citation": 25, "group": 4 },
                    { "id": 9, "name": "paper10", "citation": 15, "group": 5 }
                ],
                "links": [
                    { "source": 0, "target": 1, "name": "A-B-1", "value": 8 },
                    ...
                    ... (more data values)
                ]
            };

            // more JavaScript code ...

        }

</script>

javascript json d3.js

Answer 1

Answer №1

Force layout primarily operates based on indexes rather than IDs or names. Therefore, you need to specify that you want to establish a connection via ID in your scenario:

var edges = [];
data.links.forEach(function(e) {
    var sourceNode = data.nodes.filter(function(n) {
        return n.id === e.source;
    })[0],
        targetNode = data.nodes.filter(function(n) {
            return n.id === e.target;
        })[0];

    edges.push({
        source: sourceNode,
        target: targetNode
    });
});

The provided code identifies which node matches the same ID as the link's source and pushes it into the source of the edges array. The same process is repeated for the target node. Subsequently, use this edges array to construct the graph:

Force :

force
      .nodes(data.nodes)
      .links(edges)

Regarding the links :

var link = svg.selectAll(".link")
          .data(edges)

A demo implementation with your new_json can be found here: https://jsfiddle.net/thatOneGuy/60oLwg8t/1/

Alternatively:

 
  var data = 
      {
        "nodes": [{
          "id": 124587,
          "name": "paper1",
          "citation": 5,
          "group": 1
        }, {
          "id": 178456,
          "name": "paper2",
          "citation": 8,
          "group": 2
        }],
        "links": [{
          "source": 124587,
          "target": 178456,
          "name": "A-B-1",
          "value": 8
        }]
      };

console.log(data.nodes)
console.log(data.links)
      var width = 960,
        height = 500;

      var color = d3.scale.category20();

      var force = d3.layout.force()
        .charge(-120)
        .linkDistance(30)
        .size([width, height]);

      var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

      var edges = [];
data.links.forEach(function(e) {
    var sourceNode = data.nodes.filter(function(n) {
        return n.id === e.source;
    })[0],
        targetNode = data.nodes.filter(function(n) {
            return n.id === e.target;
        })[0];

    edges.push({
        source: sourceNode,
        target: targetNode,
        value: e.Value
    });
});


        force
          .nodes(data.nodes)
          .links(edges)
          .start();
        var link = svg.selectAll(".link")
          .data(edges)
          .enter().append("line")
          .attr("class", "link")
          .style("stroke-width", 2);

        var node = svg.selectAll(".node")
          .data(data.nodes)
          .enter().append("circle")
          .attr("class", "node")
          .attr("r", 5)
          .style("fill", 'red')
          .call(force.drag);

        node.append("title")
          .text(function(d) {
            return d.name;
          });

        force.on("tick", function() {
          link.attr("x1", function(d) {
              return d.source.x;
            })
            .attr("y1", function(d) {
              return d.source.y;
            })
            .attr("x2", function(d) {
              return d.target.x;
            })
            .attr("y2", function(d) {
              return d.target.y;
            });

          node.attr("cx", function(d) {
              return d.x;
            })
            .attr("cy", function(d) {
              return d.y;
            });
        });

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

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

Answer 2

Force layout primarily operates based on indexes rather than IDs or names. Therefore, you need to specify that you want to establish a connection via ID in your scenario:

var edges = [];
data.links.forEach(function(e) {
    var sourceNode = data.nodes.filter(function(n) {
        return n.id === e.source;
    })[0],
        targetNode = data.nodes.filter(function(n) {
            return n.id === e.target;
        })[0];

    edges.push({
        source: sourceNode,
        target: targetNode
    });
});

The provided code identifies which node matches the same ID as the link's source and pushes it into the source of the edges array. The same process is repeated for the target node. Subsequently, use this edges array to construct the graph:

Force :

force
      .nodes(data.nodes)
      .links(edges)

Regarding the links :

var link = svg.selectAll(".link")
          .data(edges)

A demo implementation with your new_json can be found here: https://jsfiddle.net/thatOneGuy/60oLwg8t/1/

Alternatively:

 
  var data = 
      {
        "nodes": [{
          "id": 124587,
          "name": "paper1",
          "citation": 5,
          "group": 1
        }, {
          "id": 178456,
          "name": "paper2",
          "citation": 8,
          "group": 2
        }],
        "links": [{
          "source": 124587,
          "target": 178456,
          "name": "A-B-1",
          "value": 8
        }]
      };

console.log(data.nodes)
console.log(data.links)
      var width = 960,
        height = 500;

      var color = d3.scale.category20();

      var force = d3.layout.force()
        .charge(-120)
        .linkDistance(30)
        .size([width, height]);

      var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

      var edges = [];
data.links.forEach(function(e) {
    var sourceNode = data.nodes.filter(function(n) {
        return n.id === e.source;
    })[0],
        targetNode = data.nodes.filter(function(n) {
            return n.id === e.target;
        })[0];

    edges.push({
        source: sourceNode,
        target: targetNode,
        value: e.Value
    });
});


        force
          .nodes(data.nodes)
          .links(edges)
          .start();
        var link = svg.selectAll(".link")
          .data(edges)
          .enter().append("line")
          .attr("class", "link")
          .style("stroke-width", 2);

        var node = svg.selectAll(".node")
          .data(data.nodes)
          .enter().append("circle")
          .attr("class", "node")
          .attr("r", 5)
          .style("fill", 'red')
          .call(force.drag);

        node.append("title")
          .text(function(d) {
            return d.name;
          });

        force.on("tick", function() {
          link.attr("x1", function(d) {
              return d.source.x;
            })
            .attr("y1", function(d) {
              return d.source.y;
            })
            .attr("x2", function(d) {
              return d.target.x;
            })
            .attr("y2", function(d) {
              return d.target.y;
            });

          node.attr("cx", function(d) {
              return d.x;
            })
            .attr("cy", function(d) {
              return d.y;
            });
        });

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

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

Connecting nodes to edges based on their unique ids in the d3.js graph library

Answer №1

Similar questions

Tips for including a decimal point in an angular reactive form control when the initial value is 1 or higher

The background failed to display (potentially due to a hovering function)

The appearance of all input forms in MaterializeCSS when used in an electron environment appears to

The transfer of JSON information from View to Controller yields no value

Using SVG Mask to enhance shape Fill

Unlocking the Power of Select Options in Vue.js

Provide the identification number of a specific row within the modal

What is the best way to send a request using an API key through a form submission method?

Step-by-step guide on setting up a click counter that securely stores data in a text file, even after the

Unexpected bug encountered while implementing redux

Adding a fresh element to an array in Angular 4 using an observable

Error: Unable to authenticate due to timeout on outgoing request to Azure AD after 3500ms

Error: Identical div IDs detected

What is the best way to efficiently query a substantial dataset using Node.js in an asynchronous fashion?

Troubleshooting: The issue of receiving a 403 error when trying to access

Using Typescript to iterate through an array of objects and modifying their keys using the forEach method

Tips for maintaining the original value of a state variable on a child page in ReactJS. Keeping the initial value passed as props from the parent page

Setting up an OnMouseOver event for each URL on a webpage

Modify the event from creating a table on click to loading it on the page onload

Executing a function on page load instead of waiting for user clicks