D3多系列图表

Question

我想为我的自定义数据绘制多系列图表

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

我替换了所有变量

符号，日期，价格

与

client_ip，时间戳，bytes_transfered

也

var parse = d3.time.format（“％b％Y”）。parse; 与
var parse = d3.time.format（“％S％L”）。parse;

但我现在根本看不到第一张图。 但是我也看到一些奇怪的图。 请让我知道我该如何解决。

Answer 1

问题在于数据的结构，它与您发布的链接中的数据不同。 您可以使用其当前结构中的数据，但必须做一些工作。 对我来说，似乎要根据client ip绘制多个序列，因此您需要按client ip整理数据。 使用d3可以使用d3.nest轻松完成。 因此，您使用类似：

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

该函数将产生由组织嵌套对象client_ip与timestamp和bytes_transfered下组织的values 。 看起来像这样：

{ "Objectkey": "92.239.29.77", "values": [ { "bytes_transfered": "577818", "client_ip": "92.239.29.77", "timestamp": "WedOct01201406: 30: 00" }, { "bytes_transfered": "108257", "client_ip": "92.239.29.77", "timestamp": "WedOct01201407: 30: 00" } ] }

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

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

然后，您需要修改line函数，如下所示：

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中数字的快捷方式。

综上所述，您会得到这个