我在试验the D3 cluster force layout。 但是我不确定如何绑定数据,因此,我无法拥有自己的数据。
这是我尝试过的,没有任何约束力,它一定不会起作用。
d3.tsv("data.tsv", function(data){
nodes = d3.range(n).map(function(data) {
var i = Math.floor(Math.random() * m),
r = Math.sqrt((i + 1) / m * -Math.log(data.diskSpace)) * maxRadius,
d = {
cluster: i,
radius: data.radius,
x: Math.cos(i / m * 2 * Math.PI) * 200 + width / 2 + Math.random(),
y: Math.sin(i / m * 2 * Math.PI) * 200 + height / 2 + Math.random()
};
if (!clusters[i] || (r > clusters[i].radius)) clusters[i] = d;
return d;
});
这似乎没有按预期工作。
究竟发生了什么以及如何解决?
修改: TSV文件
model diskSpace radius
DE431 8 8
DD342 16 18
...
答案 0 :(得分:2)
首先,确保文件实际上是以制表符分隔,而不是空格。在d3中加载tsv看起来像这样:
d3.tsv('data.tsv', function (rows) {
console.log(rows);
});
将在控制台中记录一系列行。请注意,此调用是异步进行的,d3.tsv()
- 函数不返回行,而是调用以行作为第一个参数的函数。
现在我们需要将这些数据转换为d3 force layout理解的内容:
d3.tsv('data.tsv', function (rows) {
var nodes = rows.map(function (item) {
var i = item['diskSpace'],
r = +item['radius'], // note the + to convert to number here.
d = {
cluster: i,
radius: r,
x: Math.cos(i / m * 2 * Math.PI) * 200 + width / 2 + Math.random(),
y: Math.sin(i / m * 2 * Math.PI) * 200 + height / 2 + Math.random()
};
if (!clusters[i] || (r > clusters[i].radius)) {
clusters[i] = d;
}
return d;
});
// insert code generating the force layout here (including the cluster and collide functions)
});
这将通过diskSpace对行进行聚类。请注意我添加的评论。