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

綜上所述，您會得到這個