D3.js: Dynamically Generate Source And Target Based On Identical Json Values

Good day, I am a novice in d3/javascript and this may be an easy/repeated question, but I just cannot get this section of my code to work.. I have this json array here: var myArray

Solution 1:

This is a solution using nested for loops:

var links = [];

for (var i = 0; i < nodes.length; i++) {
    for (var j = i + 1; j < nodes.length; j++) {
        if (nodes[i].value === nodes[j].value) {
            links.push({
                source: nodes[i].id,
                target: nodes[j].id
            });
        }
    }
}

Here is a demo:

var nodes = [{
    "id": "red",
    "value": "1"
}, {
    "id": "orange",
    "value": "2"
}, {
    "id": "yellow",
    "value": "3"
}, {
    "id": "green",
    "value": "1"
}, {
    "id": "blue",
    "value": "1"
}, {
    "id": "violet",
    "value": "3"
}];

var links = [];

for (var i = 0; i < nodes.length; i++) {
    for (var j = i + 1; j < nodes.length; j++) {
        if (nodes[i].value === nodes[j].value) {
            links.push({
                source: nodes[i].id,
                target: nodes[j].id
            });
        }
    }
}

console.log(links);

And here is a demo of the force, with your array:

var nodes = [{
    "id": "red",
    "value": "1"
}, {
    "id": "orange",
    "value": "2"
}, {
    "id": "yellow",
    "value": "3"
}, {
    "id": "green",
    "value": "1"
}, {
    "id": "blue",
    "value": "1"
}, {
    "id": "violet",
    "value": "3"
}];

var links = [];

for (var i = 0; i < nodes.length; i++) {
    for (var j = i + 1; j < nodes.length; j++) {
        if (nodes[i].value === nodes[j].value) {
            links.push({
                source: nodes[i].id,
                target: nodes[j].id
            });
        }
    }
};

var width = 300, height = 300;

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

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }).distance(50))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

  var link = svg.append("g")
      .attr("class", "links")
    .selectAll("line")
    .data(links)
    .enter().append("line")
      .attr("stroke-width", 1)
			.attr("stroke", "gray")
			.attr("fill", "none");

  var node = svg.append("g")
      .attr("class", "nodes")
    .selectAll("circle")
    .data(nodes)
    .enter().append("circle")
      .attr("r", 10)
			.attr("stroke", "gray")
      .attr("fill", function(d) { return d.id; });

  simulation
      .nodes(nodes)
      .on("tick", ticked);

  simulation.force("link")
      .links(links);

  function ticked() {
    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; });
  }

<script src="https://d3js.org/d3.v4.min.js"></script>