Javascript D3多系列图表绘制

我想为我的自定义数据绘图

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

我替换了所有的变量

符号、日期、价格

与

客户端ip、时间戳、传输的字节

也

var parse=d3.time.format（“%b%Y”）.parse；与
var parse=d3.time.format（“%S%L”）.parse

---

但我现在根本看不到第一张图表。但我也看到一些奇怪的图表。请告诉我如何解决此问题。

问题在于数据结构，它与您发布的链接中的数据不同。您可以使用当前结构中的数据，但还需要做一些工作。在我看来，它似乎希望通过

客户端ip

绘制多个系列，因此您需要通过

客户端ip

组织数据。使用

d3

可以轻松完成此操作。因此，您可以使用以下内容：

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

此函数将生成一个嵌套对象，该对象由

client\u ip

组织，具有

时间戳

和

字节

，在

值

下组织。看起来像是：

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

{
“Objectkey”：“92.239.29.77”，
“价值观”：[
{
“传输的字节数”：“577818”，
“客户ip”：“92.239.29.77”，
“时间戳”：“WedOct01201406:30:00”
},
{
“传输的字节数”：“108257”，
“客户ip”：“92.239.29.77”，
“时间戳”：“WedOct01201407:30:00”
}
]
}

下一个问题是

timestamp

变量没有正确传递。您的数据在unix时间内，所以您只需将其传递给javascripts

newdate

函数，如下所示：

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

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

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\u

前面的

+

。这是javascript中向数字传递字符串的缩写

---

总而言之，控制台中有任何消息吗？没有错误消息，事实上我看到了一些图表，但第一、第二和第三个都不可见。虽然我看到了一些警告，但它只显示了一些代码。