D3.js'de Birden Çok Satır Çizim

Question

Şimdiye kadar, D3 görselleştirmesine satır öğeleri eklemek için döngüler kullanıyorum, ancak bu API'nın ruhunda görünmüyor.

:

var data = {time: 1, value: 2, value2: 5, value3: 3,value4: 2}, 
      {time: 2, value: 4, value2: 9, value3: 2,value4: 4}, 
      {time: 3, value: 8, value2:12, value3: 2,value4:15}]); 

Ben böyle bir şey yapabileceğim 4.

için X gibi zamanla dört satır, istiyorum, ı bazı verileri var diyelim

Ve sonra bunları tek tek (veya bir döngü) ekleyin.

var line1 = group.selectAll("path.path1") 
     .attr("d",l(data)); 
var line2 = group.selectAll("path.path2") 
     .attr("d",l2(data)); 
var line3 = group.selectAll("path.path3") 
     .attr("d",l3(data)); 
var line4 = group.selectAll("path.path4") 
     .attr("d",l4(data)); 

Bu yolları eklemenin daha genel bir yolu var mı?

Answer 1

Evet. Daha sonra tek seferde yol öğelerinden tüm ekleyebilir,

var line = d3.svg.line() 
    .interpolate("basis") 
    .x(function(d) { return x(d.time); }) 
    .y(function(d) { return y(d.value); }); 

Ve:

var series = [ 
    [{time: 1, value: 2}, {time: 2, value: 4}, {time: 3, value: 8}], 
    [{time: 1, value: 5}, {time: 2, value: 9}, {time: 3, value: 12}], 
    [{time: 1, value: 3}, {time: 2, value: 2}, {time: 3, value: 2}], 
    [{time: 1, value: 2}, {time: 2, value: 4}, {time: 3, value: 15}] 
]; 

Şimdi sadece tek bir jenerik hat istiyorum: Öncelikle böyle kolay yineleme için verilerinizi yeniden yapılandıracak : Eğer veri yapısı biçimi küçültmek isterseniz

group.selectAll(".line") 
    .data(series) 
    .enter().append("path") 
    .attr("class", "line") 
    .attr("d", line); 

, ayrıca ayrı bir diziye kez ayıklamak ve sonra değerler için bir 2D dizi kullanabilirsiniz. Yani bu şekilde görünecektir: matris zaman değerini içermez

var times = [1, 2, 3]; 

var values = [ 
    [2, 4, 8], 
    [5, 9, 12], 
    [3, 2, 2], 
    [2, 4, 15] 
]; 

olduğundan, hat jeneratörünün x-erişimcisine onu aramak gerekir. Eğer y-ölçeğine doğrudan matris değer iletebilirsiniz Diğer taraftan, y-erişgeç basitleştirilmiştir: elemanlarını oluşturma

var line = d3.svg.line() 
    .interpolate("basis") 
    .x(function(d, i) { return x(times[i]); }) 
    .y(y); 

aynı kalır:

group.selectAll(".line") 
    .data(values) 
    .enter().append("path") 
    .attr("class", "line") 
    .attr("d", line);