Javascript D3.js带Json的强制有向图-创建指定到所有节点的链接距离的图

我需要做一个图形表示，其中每个节点都相互连接。我不需要直观地显示取消链接，我需要准确地表示 每个节点之间的距离。直到现在，我还试图使用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}
]
}

一个节点连接到所有其他节点，

链接值是双向的（0是X远离1，因此1也是X远离0）

我需要在一个图（比如）中表示这个.json，但我能做的最好的就是。它唯一的问题是，我无法使
链接值
用作距离

我的代码（不太有用）如下所示：


.连接线{
行程：#999；
笔划不透明度：0.0；
}
.节点圆{
冲程：#fff；
笔划宽度：1.5px；
}
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
var color=d3.scaleOrdinal（d3.schemeCategory 20）；
d3.json（“data.json”，函数（错误，图形）{
如果（错误）抛出错误；
var link=svg.append（“g”）
.attr（“类”、“链接”）
.selectAll（“行”）
.数据（图表.链接）
.enter（）.append（“行”）
//.attr（“笔划宽度”，函数（d）{return Math.sqrt（d.value）；}）；
var simulation=d3.forceSimulation（）
.force（“电荷”，d3.forceManyBody（））
.force（“link”，d3.forceLink（图形链接值））
.力（“中心”，d3.力中心（宽度/2，高度/2））；
var node=svg.append（“g”）
.attr（“类”、“节点”）
.selectAll（“圆圈”）
.数据（图.节点）
.enter（）.append（“圆”）
.attr（“r”，5）
.attr（“fill”，函数（d）{返回颜色（d.group）；}）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
。在（“结束”，dragended））；
var text=svg.append（“g”）
.attr（“类别”、“标签”）
.selectAll（“文本”）
.数据（图.节点）
.enter（）.append（“文本”）
.attr（“dx”，12）
.attr（“dy”，“.35em”）
.text（函数（d）{return d.id}）；
node.append（“文本”）
.attr（“dx”，12）
.attr（“dy”，“.35em”）
.style（“背景色”、“绿色！重要”）
.style（“颜色”、“绿色”）
.text（函数（d）{return d.id}）；
模拟.节点（图.节点）
。在（勾选）上；
模拟力（“链接”）
.links（图形链接）；
函数勾选（）{
链接
.attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
节点
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）；
attr（“x”，函数（d）{return d.x；}）
.attr（“y”，函数（d）{返回d.y；}）；
}
});
函数dragstarted（d）{
如果（！d3.event.active）simulation.alphaTarget（0.3.restart（）；
d、 fx=d.x；
d、 fy=d.y；
}
函数（d）{
d、 fx=d3.event.x；
d、 fy=d3.event.y；
}
函数d（d）{
如果（！d3.event.active）simulation.alphaTarget（0）；
d、 fx=null；
d、 fy=null；
}

PS：我可以稍后更改距离，以便更容易地看到节点之间的差异，因为所有距离都是9左右。
好的，我在代码（以及.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是链接，value是距离，
*5000
用于可视化。在.json和css中所做的其他更改中，我的图形如下所示：

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