D3 многосерийного график рисования

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, timesta Т. пл, bytes_transfered

также

уаг разбора = d3.time.format ("% B% Y") синтаксического анализа. с
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