d3 biểu đồ thanh là lộn ngược

Question

Tôi có một biểu đồ đơn giản thanh rút ra trong d3, với thanh dọc: http://jsfiddle.net/philgyford/LjxaV/2/

Tuy nhiên, nó vẽ các thanh xuống, với đường cơ sở ở phía trên của bảng xếp hạng.

Tôi đã đọc để đảo ngược điều này, vẽ lên từ phía dưới, tôi nên thay đổi range() trên trục y. Vì vậy, thay đổi này:

.range([0, chart.style('height')]); 

này:

.range([chart.style('height'), 0]); 

Tuy nhiên, có vẻ như nó vẽ nghịch đảo của biểu đồ - vẽ trong không gian trên mỗi trong những quán bar, và rời khỏi bản thân thanh (được vẽ từ phía dưới) trong suốt. Tôi đang làm gì sai?

Answer 1

mỗi biểu đồ thanh cơ bản d3: http://bl.ocks.org/mbostock/3885304

Bạn là chính xác trong phạm vi đảo ngược.

Thêm vào đó, hình chữ nhật của bạn nên được bổ sung như sau:

.attr('y', function(d) { return y(d.percent); }) 
    .attr('height', function(d,i){ return height - y(d.percent); }); 

Answer 2

Thiết lập thuộc tính y dường như làm việc:

.attr('y', function(d){ return (height - parseInt(y(d.percent))); }) 

jsfiddle here

Answer 3

x và y tọa độ cho svg bắt đầu trong top trái. Bạn muốn y bắt đầu ở phía dưới. Đoạn code dưới đây giả sử bạn đang phụ thêm vào một số chức năng dọc theo dòng:

svg.selectAll('rect') 
    .data(dataset) 
    .enter() 
    .append('rect') 

Để thực hiện các hành động âm mưu thanh như bạn mong muốn, thiết lập các thuộc tính y để bắt đầu ở khoảng cách data[i] trên trục:

.attr('y', function(d) { return height - d; }) 

Sau đó, bạn phải làm cho khoảng cách mở rộng số còn lại data[i] thành trục.

.attr('height', function(d) { return d; }) 

Và đó là nó!