d3 Balkendiagramm steht auf dem Kopf

Question

ich ein einfaches Balkendiagramm in d3 gezogen haben, mit vertikalen Balken: http://jsfiddle.net/philgyford/LjxaV/2/

Allerdings ist es nach unten die Stäbe zeichnen, mit der Basislinie am oberen Rand des Diagramms.

Ich habe gelesen, dass, um dies zu invertieren, Zeichnung von unten, sollte ich die range() auf der Y-Achse ändern. So ändern Sie dies:

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

dazu:

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

jedoch, dass sieht aus wie es die Umkehrung des Diagramms - Zeichnung im Raum oben jeder der Stäbe, und verlässt die Balken selbst (von unten gezeichnet) transparent. Was mache ich falsch?

Answer 1

Per d3 Grundbalkendiagramm: http://bl.ocks.org/mbostock/3885304

Sie sind richtig in den Bereich zu invertieren.

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

Answer 2

scheint die y-Attribut Einstellung zu arbeiten:

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

jsfiddle here

Answer 3

Die x- und y-Koordinaten für svg in der linken oberen Start:

Darüber hinaus sollten Sie Ihre Rechtecke wie folgt hinzugefügt werden. Du möchtest, dass das y unten beginnt. Der folgende Code setzt voraus, Sie entlang der Linien von bis zu einem gewissen Funktion sind Anfügen:

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

Um das Balkendiagramm Akt zu machen, wie Sie es wünschen, stellen Sie die y-Attribut im Abstand data[i] oberhalb der Achse zu beginnen:

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

Dann müssen Sie den Abstand verlängern die verbleibenden data[i] auf die Achse.

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

Und das war's!