D3.js：根据相同的 json 值动态生成源和目标

Question

美好的一天，我是 d3/javascript 的新手，这可能是一个简单/重复的问题，但我无法让我的这部分代码工作..

我这里有这个 json 数组：

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

我知道要在 D3 中的节点之间创建链接，我需要一个具有 [{"source": "___", "target": "___"} 结构的数组。

是否有人能够指导我根据它们的值链接上述数组项（即节点图会将具有相同值的所有节点链接在一起）？

我现在想到的一个解决方案是手动迭代并使用 for..if.. 循环创建链接，但是如果我有很多节点（>1000？），这将迭代很多次，并且会沿途创建重复项.

这是所需输出的图片：

Answer 1

这是使用嵌套 for 循环的解决方案：

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 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);

这是一个力的演示，带有你的数组：

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>