【发布时间】：2017-02-08 23:08:55
【问题描述】：
请注意，此问题与 D3 的 V4 版本有关。这是相当新的，所以还没有很多问题可以解决这个版本的问题。
我正在尝试将 D3 力图设为静态。我当然在“https://bl.ocks.org/mbostock/1667139”上找到了这个例子。我添加了数据加载队列，该队列在动态力示例中起作用。
当我运行下面的脚本时，middel 中会显示一个黑点。我很难弄清楚我做错了什么。
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.links line {
stroke: #999;
stroke-opacity: 0.6;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}
</style>
<head>
</head>
<body>
<script src="/sources/d3/d3.min.js"></script>
<script src="/sources/jquery-3.1.1.min.js"></script>
<svg width="960" height="600"></svg>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
//var n = 100,
//nodes = d3.range(n).map(function(i) { return {index: i}; }),
//links = d3.range(n).map(function(i) { return {source: i, target: (i + 3) % n}; });
var simulation = d3.forceSimulation(attributes)
.force("charge", d3.forceManyBody().strength(-80))
.force("link", d3.forceLink(edges).distance(20).strength(1).iterations(10))
.force("x", d3.forceX())
.force("y", d3.forceY())
.stop();
var loading = svg.append("text")
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.text("Simulating. One moment please…");
// LOAD DATA
d3.queue()
.defer(d3.csv, "/data/attributes")
.defer(d3.csv, "/data/edges")
.await(analyze);
function analyze(error, attributes, edges) {
if(error) { console.log(error); }
// Use a timeout to allow the rest of the page to load first.
d3.timeout(function() {
loading.remove();
// See https://github.com/d3/d3-force/blob/master/README.md#simulation_tick
for (var i = 0, n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())); i < n; ++i) {
simulation.tick();
}
//console.log(nodes);
//console.log(links);
console.log(attributes);
console.log(edges);
g.append("g")
.attr("stroke", "#000")
.attr("stroke-width", 1.5)
.selectAll("line")
.data(edges)
.enter().append("line")
.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; });
g.append("g")
.attr("stroke", "#fff")
.attr("stroke-width", 1.5)
.selectAll("circle")
.data(attributes)
.enter().append("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 4.5);
});
};
</script>
数据：属性
id,name,age,gender
id001,Mark,25,male
id002,Lene,30,female
id003,Simon,22,male
id004,Sussie,45,female
id005,Kim,23,male
数据：边
source,target
id001,id002
id001,id003
id002,id004
id003,id004
【问题讨论】：
-
您的模拟正在
nodes上运行，而您的圈子是使用从文件中读取到attributes的内容创建的。您需要将nodes绑定为数据来创建圈子。再说一次，您丢失了从该文件加载的信息...要获得进一步的帮助，请提供更多上下文，最好设置一个工作演示。 -
@altocomolus：我现在添加了数据文件。希望对您有所帮助。
-
@altacomolus：感谢您的帮助。我设法通过一点点试错来找出如何做到这一点。如果你愿意，你可以添加一个答案并解释我所做的背后的逻辑（除非你自己有更聪明的方法）。然后，我将接受您的回答作为解决方案。否则我们把它留在这里:)
标签： javascript d3.js queue