Javascript D3.js:为布局获取我自己的数据
我已经试过了。 但是,我不确定如何绑定数据,因此,我无法在其中拥有自己的数据 这就是我尝试过的,没有任何约束,它肯定不会起作用Javascript D3.js:为布局获取我自己的数据,javascript,d3.js,Javascript,D3.js,我已经试过了。 但是,我不确定如何绑定数据,因此,我无法在其中拥有自己的数据 这就是我尝试过的,没有任何约束,它肯定不会起作用 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.dis
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
...
首先,确保文件实际上是用制表符而不是空格分隔的。在d3中加载tsv如下所示:
d3.tsv('data.tsv', function (rows) {
console.log(rows);
});
一组行将被记录到控制台。请注意,此调用是异步进行的,d3.tsv()
-函数不返回行,而是以行作为第一个参数调用函数
现在,我们需要将这些数据转换为d3部队布局能够理解的内容:
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)
});
这将按磁盘空间对行进行集群。请注意我添加的评论
首先,确保文件实际上是用制表符而不是空格分隔的。在d3中加载tsv如下所示:
d3.tsv('data.tsv', function (rows) {
console.log(rows);
});
一组行将被记录到控制台。请注意,此调用是异步进行的,d3.tsv()
-函数不返回行,而是以行作为第一个参数调用函数
现在,我们需要将这些数据转换为d3部队布局能够理解的内容:
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)
});
这将按磁盘空间对行进行集群。请注意我添加的评论
工作您在帖子中添加的代码示例会生成随机数据,并且不会触及“data.tsv”中的数据。你的tsv文件中到底有什么?我已经添加了tsv文件的格式,请看一下@jieter你在帖子中添加的代码示例会生成随机数据,并且不会触及“data.tsv”中的数据。你的tsv文件中到底有什么?我已经添加了tsv文件的格式,请看一看@jieter谢谢!有一个小的变化,什么是磁盘空间是一个字符串?像“16GB”,而不是16?diskSpace不会被解析为字符串(前面是no+),它是一个字符串还是一个数字其实并不重要,只要它对于您希望在同一集群中拥有的东西是相同的。我刚刚通过添加G来测试它,仍然有效。非常感谢!有一个小的变化,什么是磁盘空间是一个字符串?像“16GB”,而不是16?diskSpace不会被解析为字符串(前面是no+),它是一个字符串还是一个数字其实并不重要,只要它对于您希望在同一集群中拥有的东西是相同的。我只是通过添加G来测试它,仍然有效。