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

我替换了所有变量

符号，日期，价格

带

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);
});

然后您需要修改线路功能，如：

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

D3多系列图表绘图

1 个答案: