javascript - D3.js:获取我自己的布局数据

Question

我已经尝试过 the D3 cluster force layout 。但是我不确定如何绑定(bind)数据，因此我无法在其中拥有自己的数据。

这是我尝试过的，没有任何绑定(bind)，肯定不行。

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
...

Answer 1

首先，确保文件实际上是用制表符而不是空格分隔的。在 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)
});

这将按磁盘空间对行进行聚类。请注意我添加的评论。

工作中Demo here