Vùng xếp chồng trong D3.js

Question

Tôi đang sử dụng D3.js và tôi gặp sự cố khi thiết lập bố cục xếp chồng cho biểu đồ vùng có nhiều chuỗi. Tôi có hai cấu trúc có thể có của dữ liệu của tôi (nếu điều đó giúp). Một là các dữ liệu thô làm thức ăn cho kịch bản, trong cấu trúc này:

var data = [{key: 'Group1', value: 37, date: '04/23/12'}, 
      {key: 'Group2', value: 12, date: '04/23/12'}, 
      {key: 'Group3', value: 46, date: '04/23/12'}, 
      {key: 'Group1', value: 32, date: '04/24/12'}, 
      {key: 'Group2', value: 19, date: '04/24/12'}, 
      {key: 'Group3', value: 42, date: '04/24/12'}, 
      {key: 'Group1', value: 45, date: '04/25/12'}, 
      {key: 'Group2', value: 16, date: '04/25/12'}, 
      {key: 'Group3', value: 44, date: '04/25/12'}, 
      {key: 'Group1', value: 24, date: '04/26/12'}, 
      {key: 'Group2', value: 52, date: '04/26/12'}, 
      {key: 'Group3', value: 64, date: '04/26/12'}] 

Thứ hai là một cấu trúc lồng nhau, tạo ra sử dụng mã này:

pData = d3.nest() 
      .key(function(d) { return d.key; }) 
      .map(data); 

Kết quả trong cấu trúc này:

pData = {Group1: [{date: 04/23/12, key: "Group1", value: 37}, 
        {date: 04/24/12, key: "Group1", value: 32}, 
        {date: 04/25/12, key: "Group1", value: 45}, 
        ...], 
     Group2: [{date: 04/23/12, key: "Group2", value: 12}, 
        {etc, etc, etc}], 
     GroupX: [...] } 

Câu hỏi của tôi là: Làm cách nào để thiết lập trình tạo máy phát d3.layout.stack(), sử dụng một trong các cấu trúc dữ liệu ở trên (hoặc một số biến thể), để tạo một đường xếp chồng lên nhau ucture cho dữ liệu của tôi như vậy mà tôi có thể vượt qua nó đến một máy phát điện khu vực tương tự như sau:

var areaGenerator = d3.svg.area() 
    .interpolate('monotone') 
    .x(function(d) { return x(d.date); }) 
    .y0(h) 
    .y1(function(d) { return y(d.value); }); 

Answer 1

Bạn phải ăn một mảng của lớp để bố trí ngăn xếp, vì vậy điều đầu tiên cần thay đổi là sử dụng nest.entries hơn nest.map . Điều này trả về một mảng các đối tượng có trường key (chẳng hạn như "Group1") và mảng values chứa các bản ghi được liên kết. Sau đó, bạn sẽ chỉ định một truy cập stack.values để bố cục ngăn xếp có thể truy cập mảng values cho mỗi lớp.

Bạn cũng sẽ cần phải xác định phù hợp x và y accessors để bố trí ngăn xếp để nó có thể hiểu được dữ liệu đầu vào của bạn: x -accessor nên trở d.date, và y -accessor nên trả lại d.value. Bạn cũng sẽ cần phải chuyển đổi chuỗi ngày của bạn thành Ngày tháng; bạn có thể sử dụng d3.time.format để trợ giúp việc này. Ví dụ:

var format = d3.time.format("%m/%d/%y"); 
data.forEach(function(d) { d.date = format.parse(d.date); }); 

Cuối cùng, thay đổi định nghĩa khu vực của bạn sao cho y0 ban đầu được định nghĩa là y(d.y0) và y1 đường xương sống được định nghĩa là y(d.y0 + d.y).

Dưới đây là một ví dụ làm việc:

• http://bl.ocks.org/3020685