Một cách mạnh mẽ (nhưng khó chịu) D3.js đôi khi buộc bạn lặp lại để hiển thị đơn giản. Nếu bạn nói rằng bạn muốn tạo một phần tử với các thuộc tính bắt nguồn từ dữ liệu theo một cách nhất định, và sau đó bạn muốn chuyển các thuộc tính đó sang dữ liệu mới, bạn phải nói lại cho nó cách lấy các giá trị (trong trường hợp bạn muốn để làm điều gì đó khác, chẳng hạn như bố cục trực quan khác). Như @Andrew nói, bạn phải nói cho nó biết phải làm gì khi nó chuyển tiếp.
Bạn có thể làm việc xung quanh này 'vấn đề' bằng cách làm theo mô hình này:
var foo = d3.select('foo');
function redraw(someArray){
var items = foo.selectAll('bar').data(someArray);
items.enter().append('bar');
items.exit().remove();
items
.attr('foo',function(d){ return d });
}
Trong 2.0 khi bạn append() mục mới trong enter() họ sẽ được tự động thêm vào lựa chọn dữ liệu ràng buộc ban đầu, vì vậy các cuộc gọi đến attr() và những điều sau này sẽ áp dụng cho chúng. Điều này cho phép bạn sử dụng cùng một mã cho cả cài đặt giá trị ban đầu và giá trị cập nhật.
Vì bạn không muốn tạo lại trình bao bọc SVG mỗi lần cập nhật, nên tạo điều này bên ngoài chức năng redraw.
Nếu bạn muốn thực hiện chuyển tiếp:
function redraw(someArray){
var items = foo.selectAll('bar').data(someArray);
items.enter().append('bar')
.attr('opacity',0)
.attr('foo',initialPreAnimationValue);
items.exit().transition().duration(500)
.attr('opacity',0)
.remove();
items.transition.duration(500)
.attr('opacity',1)
.attr('foo',function(d){ return d });
}
Lưu ý rằng các đối tác trên các đối tượng với dữ liệu bằng cách chỉ mục. Nếu bạn muốn xóa điểm dữ liệu trung gian để làm mờ điểm dữ liệu đó trước khi xóa nó (thay vì xóa mục cuối cùng và chuyển đổi mọi mục khác thành mục đó) thì bạn nên chỉ định giá trị chuỗi duy nhất (không phải chỉ mục) để liên kết mỗi mục với:
var data = [
{id:1, c:'red', x:150},
{id:3, c:'#3cf', x:127},
{id:2, c:'green', x:240},
{id:4, c:'red', x:340}
];
myItems.data(data,function(d){ return d.id; });
Bạn có thể xem ví dụ về điều này và phát trực tiếp trên số my D3.js playground.
Trước tiên, hãy xem điều gì xảy ra khi bạn nhận xét một trong các dòng dữ liệu và sau đó đặt lại. Tiếp theo, xóa thông số ƒ('id') khỏi cuộc gọi đến data() trên dòng 4 và một lần nữa thử nhận xét và trong dòng dữ liệu.
Sửa: Ngoài ra, như ý kiến của mbostock lừng, bạn có thể sử dụng selection.call() cùng với một chức năng tái sử dụng như là một cách để làm khô lên mã của bạn:
var foo = d3.select('foo');
function redraw(someArray){
var items = foo.selectAll('bar').data(someArray);
items.enter().append('bar').call(setEmAll);
items.exit().remove();
items.call(setEmAll);
}
function setEmAll(myItems){
myItems
.attr('foo',function(d){ return d*2 })
.attr('bar',function(d){ return Math.sqrt(d)+17 });
}
Như đã trình bày ở trên, .call() gọi một hàm và chuyển theo lựa chọn làm đối số để bạn có thể thực hiện cùng một cài đặt cho lựa chọn của mình ở nhiều vị trí.
Câu trả lời thú vị, cảm ơn. Tôi vẫn đang cố gắng làm tròn đầu của tôi hầu hết những thứ này, nhưng đây sẽ là một sự giúp đỡ thực sự! – Richard
Câu trả lời chu đáo. Bạn cũng có thể viết hàm 'redraw' theo cách tương thích với [selection.call] (https://github.com/mbostock/d3/wiki/Selections#wiki-call). Liên quan: [Hướng tới Biểu đồ có thể sử dụng lại] (http://bost.ocks.org/mike/chart/). – mbostock
@mbostock Ooh, điều đó rất hữu ích; Tôi đã không nhìn thấy '.call()' trước đây. Tôi chỉ là một người mới làm quen với D3.js giúp tôi có thể. Tôi sẽ chỉnh sửa để bao gồm thông tin đó (và thực hiện đầy đủ thông qua các tài liệu để thử và gắn tất cả các khả năng vào đầu của tôi). – Phrogz