Vẽ nhiều dòng trong D3.js

Question

Cho đến bây giờ, tôi đã sử dụng vòng lặp để thêm các phần tử đường thẳng vào hình ảnh D3, nhưng điều này dường như không theo tinh thần của API.

Hãy nói rằng tôi đã có một số dữ liệu,

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}]); 

Tôi muốn bốn dây chuyền, với thời gian như X cho tất cả 4.

tôi có thể làm một cái gì đó như thế này:

Và sau đó thêm từng cái một (hoặc theo vòng lặp).

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)); 

Có cách nào tổng quát hơn để thêm những đường dẫn này?

Answer 1

Có. Trước tiên tôi xin tái cấu trúc dữ liệu của bạn cho lần lặp dễ dàng hơn, như thế này:

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}] 
]; 

Bây giờ bạn cần chỉ là một dòng chung duy nhất:

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

Và, sau đó bạn có thể thêm tất cả các yếu tố con đường trong một đi :

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

Nếu bạn muốn định dạng cấu trúc dữ liệu nhỏ hơn, bạn cũng có thể trích xuất thời gian thành mảng riêng biệt, sau đó sử dụng mảng 2D cho giá trị. Điều đó sẽ trông giống như sau:

var times = [1, 2, 3]; 

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

Vì ma trận không bao gồm giá trị thời gian, bạn cần tra cứu từ bộ x-accessor của trình tạo dòng. Mặt khác, y accessor được đơn giản hóa kể từ khi bạn có thể vượt qua giá trị ma trận trực tiếp đến y quy mô:

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

Tạo các yếu tố giữ nguyên:

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