Có thể tạo biểu đồ hình tròn với tính nhất quán của đối tượng không?

Question

cập nhật biểu đồ pie dụ trên trang web bl.ocks không cập nhật các yếu tố 'tại chỗ':

http://bl.ocks.org/j0hnsmith/5591116

function change() { 
    clearTimeout(timeout); 
    path = path.data(pie(dataset[this.value])); // update the data 
    // set the start and end angles to Math.PI * 2 so we can transition 
    // anticlockwise to the actual values later 
    path.enter().append("path") 
     .attr("fill", function (d, i) { 
     return color(i); 
     }) 
     .attr("d", arc(enterAntiClockwise)) 
     .each(function (d) { 
     this._current = { 
      data: d.data, 
      value: d.value, 
      startAngle: enterAntiClockwise.startAngle, 
      endAngle: enterAntiClockwise.endAngle 
     }; 
     }); // store the initial values 

    path.exit() 
     .transition() 
     .duration(750) 
     .attrTween('d', arcTweenOut) 
     .remove() // now remove the exiting arcs 

    path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs 
} 

Thay vào đó, nó chỉ xử lý các mảng mới có giá trị như thương hiệu dữ liệu mới và thay đổi kích thước biểu đồ cho phù hợp.

Tôi đã tạo một fiddle chứng minh vấn đề này rất đơn giản:

http://jsfiddle.net/u9GBq/23/

Nếu bạn bấm 'thêm', nó thêm một int ngẫu nhiên để mảng: công trình này như dự định.

Nếu bạn nhấn 'xóa', yếu tố duy nhất bị chuyển ra ngoài luôn là yếu tố cuối cùng đã nhập vào chiếc bánh. Tóm lại, nó hoạt động giống như một ngăn xếp LIFO. Hành vi dự kiến ​​là dành cho vòng cung tròn có liên quan để được chuyển đổi thay thế.

Có thể áp dụng tính nhất quán của đối tượng cho bánh nướng không? Tôi cũng đã thử thêm một chức năng quan trọng (không được chứng minh trên fiddle) nhưng điều đó chỉ phá vỡ (kỳ quặc đủ nó hoạt động tốt với các đồ thị xếp chồng lên nhau của tôi).

Cảm ơn bạn.

Answer 1

Giải pháp dễ nhất cho vấn đề này là để giá trị còn thiếu thiết lập để không, chứ không phải là loại bỏ chúng hoàn toàn, như trong Part III của Pie Chart Update loạt các ví dụ. Sau đó, bạn nhận được object constancy miễn phí: bạn có cùng số lượng phần tử, theo cùng thứ tự, trên các cập nhật.

Ngoài ra, nếu bạn muốn có một dữ liệu tham gia như trong Part IV, bạn phải nói D3 nơi cung cách nhập nên nhập từ, và nơi cung thoát nên exit để. Một chiến lược hợp lý là tìm vòng cung lân cận gần nhất từ ​​dữ liệu ngược lại: đối với một vòng cung đã cho, tìm vòng cung lân cận gần nhất trong dữ liệu cũ (trước khi chuyển tiếp); tương tự như vậy đối với một vòng cung đã cho, tìm vòng cung lân cận gần nhất trong dữ liệu mới (sau chuyển tiếp).

Để tiếp tục ví dụ, giả sử bạn đang hiển thị doanh số bán táo ở các vùng khác nhau và muốn chuyển sang hiển thị cam. Bạn có thể sử dụng chức năng chính sau đây để duy trì đối tượng kiên trì:

function key(d) { 
    return d.data.region; 
} 

(Điều này giả định bạn đang sử dụng d3.layout.pie, bao bọc dữ liệu ban đầu của bạn và cho thấy nó như d.data.)

Bây giờ nói khi bạn chuyển sang cam, bạn có dữ liệu cũ sau và dữ liệu mới:

var data0 = path.data(), // retrieve the old data 
    data1 = pie(region.values); // compute the new data 

Đối với mỗi hồ quang vào lúc index i (nơi d là data1[i]), bạn có thể bước tuần tự thông qua trước dữ liệu trong data1, và xem nếu bạn có thể tìm thấy một trận đấu trong data0:

var m = data0.length; 
while (--i >= 0) { 
    var k = key(data1[i]); 
    for (var j = 0; j < m; ++j) { 
    if (key(data0[j]) === k) return data0[j]; // a match! 
    } 
} 

Nếu bạn tìm thấy một trận đấu, vòng cung cách nhập của bạn có thể bắt đầu từ các khớp arc của cuối một ngả. Nếu bạn không tìm thấy kết quả phù hợp trước đó, bạn có thể tìm kiếm một vòng kết hợp phù hợp để thay thế. Nếu không có kết quả phù hợp, thì không có sự chồng chéo giữa hai bộ dữ liệu, vì vậy bạn có thể nhập các cung tròn từ góc 0 ° hoặc thực hiện một crossfade. Bạn cũng có thể áp dụng kỹ thuật này để thoát khỏi vòng cung.

Đưa nó tất cả cùng nhau, đây là Part V:

Answer 2

Ok, tìm thấy giải pháp. Bí quyết là để vượt qua chính cách này:

path = path.data(pie(dataset), function (d) {return d.data}); // this is good 

như trái ngược với không đi qua nó, hoặc đi qua nó một cách sai lầm:

path = path.data(pie(dataset, function (d) {return d.data})); // this is bad 

Và đây là một fiddle cập nhật với một sự chuyển tiếp làm việc trên vòng cung phải! :)

http://jsfiddle.net/StephanTual/PA7WD/1/