D3 multiseries图表绘制

我想提请multiseries chart为我的自定义数据D3 multiseries图表绘制

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，timesta熔点，bytes_transfered

也

变种解析= d3.time.format（ “％B％Y”）解析。与
var parse = d3.time.format（“％S％L”）。parse;

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

来源

2014-12-26 Raghuveer

控制台中的任何消息？ – mplungjan

没有错误消息，事实上我看到一些图形，但第一，第二和第三是不可见的。虽然我看到一些警告，但它只显示一些代码。 – Raghuveer

问题在于数据的结构，它与您发布的链接中的数据不同。您可以使用当前结构中的数据，但您必须完成一些工作。对我来说，它似乎想要绘制client ip的多个系列，因此您需要通过client ip来组织您的数据。用d3这可以很容易地与d3.nest完成。所以，你使用类似：

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

此功能会产生由client_ip与values下举办的timestamp和bytes_transfered组织嵌套对象。这看起来，是这样的：

{ "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时间，因此，所有你需要做的就是把它传递给JavaScript的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

来源

2014-12-29 17:07:44 user1614080

D3 multiseries图表绘制

回答

相关问题