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圖表繪製

回答

相關問題