javascript - D3多系列图表绘制

Question

我想画multiseries chart对于我的自定义数据

client_ip,timestamp,bytes_transfered
92.239.29.77,1412109000000,577818
92.239.29.77,1412110830000,108257
92.239.29.77,1412112600000,20922726
92.239.29.77,1412132430000,3190
92.239.29.78,1412109000000,57818
92.239.29.78,1412110830000,10257
92.239.29.78,1412112600000,2022726

我替换了所有变量

symbol,date,price

与

client_ip,timestamp,bytes_transfered

还有

var parse = d3.time.format("%b %Y").parse; with
var parse = d3.time.format("%S %L").parse;

但我现在根本看不到第一张图。但我也看到一些奇怪的图表。请让我知道如何解决这个问题。

Answer 1

问题在于数据的结构，它与您发布的链接中的数据不同。您可以使用当前结构中的数据，但您必须做一些工作。对我来说，似乎想要通过客户端 ip 绘制多个系列，因此您需要通过客户端 ip 组织数据。使用 d3 可以通过 d3.nest 轻松完成此操作。所以你使用类似的东西:

var clients = d3.nest()
    .key(function(d) { return d.client_ip; })
    .entries(data);

此函数将生成一个由 client_ip 组织的嵌套对象，其中 timestamp 和 bytes_transfered 组织在 values 下。看起来像:

{
"对象键": "92.239.29.77",
“值(value)观”:[
{
"bytes_transfered": "577818",
"client_ip": "92.239.29.77",
“时间戳”:“WedOct01201406:30:00”
},
{
"bytes_transfered": "108257",
"client_ip": "92.239.29.77",
“时间戳”:“WedOct01201407:30:00”
}
]
}

下一个问题是 timestamp 变量尚未正确传递。您的数据采用 unix 时间，因此您需要做的就是将其传递给 javascripts new Date 函数，如下所示:

data.forEach(function(d) {
    d.timestamp = new Date(+d.timestamp);
});

然后您需要修改线路函数，如下所示:

var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.timestamp); })
    .y(function(d) { return y(d.bytes_transfered); });

还有域调用

x.domain(d3.extent(data, function(d) { return d.timestamp; }));

y.domain([
    d3.min(clients, 
        function(c) { 
            return d3.min(c.values, function(v) { 
                return +v.bytes_transfered; 
            }); 
         }),
    d3.max(clients, 
        function(c) { 
            return d3.max(c.values, function(v) { 
                return +v.bytes_transfered; 
            }); 
         })
]);

另外，请注意 v.bytes_transfered 前面的 +。这是在 JavaScript 中将字符串传递给数字的简写。

把它们放在一起你会得到 this