所以我试图将这个很好的例子力导向图用于一些非常简单的 json:https ://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json
我的工作在这里:codepen
我从 d3 得到一个永无止境的错误信息,一开始没有错误提示我的代码有问题。它是这样开始的:
XHR finished loading: GET "https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json".
[...]
d3.min.js:2 Uncaught Error: missing: 0
at ar (d3.min.js:2)
at r (d3.min.js:5)
at Function.e.links (d3.min.js:5)
at pen.js:46
at Object.<anonymous> (d3.min.js:7)
at d.call (d3.min.js:4)
at XMLHttpRequest.e (d3.min.js:7)
ar @ d3.min.js:2
r @ d3.min.js:5
e.links @ d3.min.js:5
(anonymous) @ pen.js:46
(anonymous) @ d3.min.js:7
call @ d3.min.js:4
e @ d3.min.js:7
d3.min.js:5 Uncaught TypeError: Cannot create property 'vx' on number '66'
at e (d3.min.js:5)
at d3.min.js:5
at Fe.each (d3.min.js:5)
at e (d3.min.js:5)
at n (d3.min.js:5)
at yn (d3.min.js:2)
at gn (d3.min.js:2)
e @ d3.min.js:5
(anonymous) @ d3.min.js:5
each @ d3.min.js:5
e @ d3.min.js:5
n @ d3.min.js:5
yn @ d3.min.js:2
gn @ d3.min.js:2
d3.min.js:5 Uncaught TypeError: Cannot create property 'vx' on number '66'
at e (d3.min.js:5)
at d3.min.js:5
at Fe.each (d3.min.js:5)
at e (d3.min.js:5)
at n (d3.min.js:5)
at yn (d3.min.js:2)
at gn (d3.min.js:2)
e @ d3.min.js:5
(anonymous) @ d3.min.js:5
each @ d3.min.js:5
e @ d3.min.js:5
n @ d3.min.js:5
yn @ d3.min.js:2
gn @ d3.min.js:2
我实际上在 d3 v4+ 中找不到关于力图的好的介绍性资源,所以我必须破解它。
html
<main>
<section class="d3">
</section>
</main>
代码
const api = 'https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json'
let root = d3.select(".d3"),
width = +root.attr("width"),
height = +root.attr("height")
let svg = root.append('svg')
.attr("width", width)
.attr("height", height)
let color = d3.scaleOrdinal(d3.schemeCategory20);
let simulation = d3.forceSimulation()
.force("link", d3.forceLink().id((d) => d.country))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
d3.json(api, function(error, graph) {
if (error)
throw error
let link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", () => 4);
let node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.attr("r", 5)
.attr("fill", d => color(1))
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended))
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; });
}
})
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;
}