我需要制作一个图形表示，其中每个节点都相互连接。我不需要在视觉上显示de链接，我需要准确表示 每个节点之间的距离。到现在为止，我试图使用d3.js，但我没有成功。
我有这个.json：
{
"nodes": [
{"id": "0", "group": 0},
{"id": "1", "group": 1},
{"id": "2", "group": 2},
{"id": "3", "group": 3},
{"id": "4", "group": 4},
{"id": "5", "group": 5},
{"id": "6", "group": 6},
{"id": "7", "group": 7},
{"id": "8", "group": 8},
{"id": "9", "group": 9}
],
"links": [
{"source": "0", "target": "1", "value": 9.659706705913175},
{"source": "0", "target": "2", "value": 9.666414637924841},
{"source": "0", "target": "3", "value": 9.643118100155178},
{"source": "0", "target": "4", "value": 9.579570167640641},
{"source": "0", "target": "5", "value": 9.613064963616871},
{"source": "0", "target": "6", "value": 9.598967569046962},
{"source": "0", "target": "7", "value": 9.560026622640917},
{"source": "0", "target": "8", "value": 9.299886122464947},
{"source": "0", "target": "9", "value": 9.629991944483255},
{"source": "1", "target": "2", "value": 9.848134605803114},
{"source": "1", "target": "3", "value": 9.812427318665073},
{"source": "1", "target": "4", "value": 9.69483085400529},
{"source": "1", "target": "5", "value": 9.731495828694824},
{"source": "1", "target": "6", "value": 9.730700787649178},
{"source": "1", "target": "7", "value": 9.673230725067242},
{"source": "1", "target": "8", "value": 9.365051596704303},
{"source": "1", "target": "9", "value": 9.763021979662872},
{"source": "2", "target": "3", "value": 9.816292987216533},
{"source": "2", "target": "4", "value": 9.71490691310781},
{"source": "2", "target": "5", "value": 9.756176405714147},
{"source": "2", "target": "6", "value": 9.7487211470593},
{"source": "2", "target": "7", "value": 9.703289345012967},
{"source": "2", "target": "8", "value": 9.374210446522804},
{"source": "2", "target": "9", "value": 9.784250043884768},
{"source": "3", "target": "4", "value": 9.68811714172042},
{"source": "3", "target": "5", "value": 9.71866887779505},
{"source": "3", "target": "6", "value": 9.721090767288228},
{"source": "3", "target": "7", "value": 9.66048909877906},
{"source": "3", "target": "8", "value": 9.363363997692563},
{"source": "3", "target": "9", "value": 9.750129465645351},
{"source": "4", "target": "5", "value": 9.662873053147113},
{"source": "4", "target": "6", "value": 9.64183710027379},
{"source": "4", "target": "7", "value": 9.594608604650613},
{"source": "4", "target": "8", "value": 9.321567614595686},
{"source": "4", "target": "9", "value": 9.66279803886811},
{"source": "5", "target": "6", "value": 9.66515196803137},
{"source": "5", "target": "7", "value": 9.641598139328215},
{"source": "5", "target": "8", "value": 9.346524923203926},
{"source": "5", "target": "9", "value": 9.691701447072807},
{"source": "6", "target": "7", "value": 9.643314754454822},
{"source": "6", "target": "8", "value": 9.336193491649157},
{"source": "6", "target": "9", "value": 9.701700199061596},
{"source": "7", "target": "8", "value": 9.360627298706392},
{"source": "7", "target": "9", "value": 9.661840242067525},
{"source": "8", "target": "9", "value": 9.433190953846434}
]
}
一个节点连接到所有其他节点，link value是双向（0是远离1的X，所以1也是远离0的X）。
我需要在图表中表示这个.json（比如Force-Directed Graph），但我能做的最好的是this。它唯一的问题是我无法让link value作为距离工作。
我的代码（不太有用）在这里：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
.links line {
stroke: #999;
stroke-opacity: 0.0;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<div style="text-align:center">
<svg width="960" height="600"></svg>
</div>
<script src='http://d3js.org/d3.v4.min.js'></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
d3.json("data.json", function(error, graph) {
if (error) throw error;
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
//.attr("stroke-width", function(d) { return Math.sqrt(d.value); });
var simulation = d3.forceSimulation()
.force("charge", d3.forceManyBody())
.force("link", d3.forceLink(graph.links.value))
.force("center", d3.forceCenter(width / 2, height / 2));
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.attr("r", 5)
.attr("fill", function(d) { return color(d.group); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var text = svg.append("g")
.attr("class", "labels")
.selectAll("text")
.data(graph.nodes)
.enter().append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.id });
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.style("background-color", "green!important")
.style("color", "green")
.text(function(d) { return d.id });
simulation.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.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; });
text.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; });
}
});
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
</script>
</body>
PS：我可以稍后改变距离，以便更容易看到节点之间的差异，因为所有距离都是9，某些东西。
答案 0 :(得分：0)
好的，我在代码中（和.json中）做了一些更改，但代码的重要部分在下面
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().distance(function(d) {return (d.value)*5000;}).strength(0.1))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
在d.value d上是链接，值是距离，*5000用于可视化目的。通过我在.json和css中进行的其他更改，我的图形如下所示：
Graph
