d3 çubuk grafik Dikey çubuklar d3 çizilmiş basit bir çubuk grafik, sahip ters

Question

olup.

Bunu tersine çevirmek için, alttan yukarı doğru çizerek, y ekseninde range()'u değiştirmem gerektiğini okudum. Yani, bu değiştirin:

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

Buna:

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

Ancak, grafik tersini çizim gibi duran o - yukarıdaki alana barlarda her çizim ve terk barlar kendileri (alttan çekilmiş) şeffaftır. Neyi yanlış yapıyorum? y özelliğini ayarlamak

Answer 1

: http://bl.ocks.org/mbostock/3885304

Sen aralık tersini doğrudur.

Ayrıca, dikdörtgenler böyle eklenmelidir:

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

Answer 2

iş gibi görünüyor: d3 temel çubuk grafik Başına

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

jsfiddle here

Answer 3

x ve y koordinatları Sol üstteki svg başlangıç ​​için. Y altından başlamak istiyorsun. Aşağıdaki kod satırlar boyunca bazı işlevine ekliyorsanız varsayar:

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

: istediğiniz gibi

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

bar arsa hareket ettirmek için, eksen üzerinde mesafe data[i] başlayacak y özelliğini ayarlamak

Ardından, kalan data[i] eksenine mesafeyi uzatmalısınız.

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

Ve işte bu!