D3js - Çok satırlı bir çizelge oluşturma ve kolay bir şekilde güncelleme

Question

D3 kullanarak küçük bir test çizgisi tablosu oluşturdum, ancak kütüphaneye yeni başladığımdan beri, birden çok satır eklemek için en iyi yolun ne olacağından emin değilim Bir grafik, şu anda bu fiddle içinde görüntülenen bir satır var.

Grafikte 2 satır görüntülemek istiyorum, ancak kod yapıştırma kodu olmadan nasıl elde edileceğinden emin olamadım. Bu, düzenli aralıklarla grafiği güncelleştirmek/güncellemek istediğimden çok verimsiz olacağından eminim. kullanıcı seçimine göre. Bunun yerine

,

var data = [12345,22345,32345,42345,52345,62345,72345,82345,92345,102345,112345,122345,132345,142345]; 

Böyle bir şey göstermek istiyorum

,

var data = [ 
      [12345,42345,3234,22345,72345,62345,32345,92345,52345,22345], // line one 
      [1234,4234,3234,2234,7234,6234,3234,9234,5234,2234] // line two 
      ]; 

bu bir olasılık olabilir mi? Eğer öyleyse, buna yaklaşmanın en iyi yolu ne olurdu? Böylece, gerektiğinde grafiği kolayca güncelleyebilir/canlandırabilir miyim?

Not: Sadece D3 en iyi uygulamaları ve kütüphaneyi bir bütün olarak öğrenmeye ve öğrenmeye çalışıyorum. Teşekkürler.

Answer 1

Bu mümkün ve makul. D3 Nested Selection Tutorial 'da, verilerin yuvalanmasını açıklayan bir öğretici var.

Aşağıda bunu göstermek için kemandan hacklediğim kod yer almaktadır.

var data = [   
[12345,42345,3234,22345,72345,62345,32345,92345,52345,22345], 
[1234,4234,3234,2234,7234,6234,3234,9234,5234,2234] 
      ]; 

var width = 625, 
    height = 350; 

var x = d3.scale.linear() 
    .domain([0,data[0].length]) // Hack. Computing x-domain from 1st array 
    .range([0, width]); 

var y = d3.scale.linear() 
    .domain([0,d3.max(data[0])]) // Hack. Computing y-domain from 1st array 
    .range([height, 0]); 

var line = d3.svg.line() 
    .x(function(d,i) { return x(i); }) 
    .y(function(d) { return y(d); }); 

var area = d3.svg.area() 
    .x(line.x()) 
    .y1(line.y()) 
    .y0(y(0)); 

var svg = d3.select("body").append("svg") 
    //.datum(data) 
    .attr("width", width) 
    .attr("height", height) 
    //.append("g"); 

var lines = svg.selectAll("g") 
    .data(data); // The data here is two arrays 

// for each array, create a 'g' line container 
var aLineContainer = lines 
    .enter().append("g"); 

/*svg.append("path") 
    .attr("class", "area") 
    .attr("d", area);*/ 

aLineContainer.append("path") 
    .attr("class", "area") 
    .attr("d", area); 

/*svg.append("path") 
    .attr("class", "line") 
    .attr("d", line);*/ 

aLineContainer.append("path") 
    .attr("class", "line") 
    .attr("d", line); 

/*svg.selectAll(".dot") 
    .data(data) 
    .enter().append("circle") 
    .attr("class", "dot") 
    .attr("cx", line.x()) 
    .attr("cy", line.y()) 
    .attr("r", 3.5);*/ 
// Access the nested data, which are values within the array here 
aLineContainer.selectAll(".dot") 
    .data(function(d, i) { return d; }) // This is the nested data call 
    .enter() 
    .append("circle") 
    .attr("class", "dot") 
    .attr("cx", line.x()) 
    .attr("cy", line.y()) 
    .attr("r", 3.5); 
​ 

Bir eksiklik ben x için domain bilgisayarlı ve y kesmek ilk dizi, kapalı eksenleri, ama tam olarak sorunuzun uygun olmayan olmasıdır.