Chuyển tiếp D3.js

Question

Tôi đang cố tạo biểu đồ thanh động bằng d3.js. Tôi muốn các thanh xuất hiện từng cái một như ví dụ này http://nvd3.com/ghpages/multiBar.html. Tôi đã có thể tạo ra một hành vi tương tự nhưng chuyển động bắt đầu từ độ cao của thanh xây dựng thanh về phía trục x, tuy nhiên tôi muốn chuyển động bắt đầu từ trục x và đi đến độ cao của thanh như ví dụ .

phiên bản đơn giản Phần lớn mã của tôi: http://jsfiddle.net/gorkem/ECRMd/

Bất kỳ trợ giúp sẽ được nhiều đánh giá cao

Answer 1

Bởi vì nguồn gốc của hệ tọa độ là từ phía trên bên trái, giá trị 'y' được neo tại đầu mỗi thanh. Nếu giá trị 'y' được cố định và 'chiều cao' được tăng lên, có vẻ như các thanh sẽ tăng. Để làm cho các thanh phát triển từ phía dưới, bạn sẽ cần phải chuyển đổi cả 'y' và 'chiều cao' cùng một lúc.

Đây phải là những gì bạn đang tìm kiếm, tôi chỉ thay đổi hai dòng.

chart.selectAll("rect") 
.data(data) 
.enter().append("rect") 
.attr("x", function(d, i) { return x(i) - .5; }) 
.attr("y", function(d) { return h - .5; })     //new---- 
.attr("width", w) 
.transition().delay(function (d,i){ return i * 300;}) 
.duration(300) 
.attr("height", function(d) { return y(d.value); }) 
.attr("y", function(d) { return h - y(d.value) - .5; }); //new----- 

Tôi đã bắt đầu giá trị 'y' ở cuối biểu đồ (h - 0.5). Sau đó, khi bạn chuyển đổi, bạn tăng 'chiều cao' (y (d.value)) và giảm 'y' (h - y (d.value)) ở cùng một tỷ lệ. Điều này có tác dụng cố định đáy thanh cho trục.

Hy vọng điều này sẽ hữu ích!

Answer 2

Ghi x quy mô là ngược với những gì bạn mong đợi (thanh phải được xây dựng lên từ đáy (nơi đáy = chiều cao svg). Sử dụng Chuyển đổi sang động thanh trên nhập.

Một ví dụ về những gì tôi nghĩ rằng bạn đang cố gắng để đạt có thể được tìm thấy ở đây: http://bl.ocks.org/jamesleesaunders/f32a8817f7724b17b7f1

All the best,

Jim