D3.js使用Json強制定向圖-創建圖以指定到所有節點的鏈接距離
[英]D3.js Force Directed Graph with Json - Create graph specifying link distance from all nodes
問題描述
我需要在每個節點相互連接的地方做一個圖形表示。 我不需要直觀地顯示鏈接，也不需要准確表示每個節點之間的距離。 到目前為止，我一直嘗試使用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是X遠離1，所以1也是X遠離0）。
我需要在圖表中表示此.json（如“ 力導向圖” ），但是我能做的最好的就是這個 。 唯一的問題是我無法使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。
1 個解決方案
解決方案1
0 已采納 2018-06-11 02:25:45
好的，我在代碼（和.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提出的其他修改，我的圖是這樣的： 圖
d3.js V3強制有向圖和未鏈接的節點
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.