D3.js: Warum dreht sich das Balkendiagramm, wenn ich diese beiden Anweisungen hinzufüge

Question

Hey ich hatte ein barChart und ich bin mir bewusst in Svg die x = 0 und y = 0 ist in der oberen linken Ecke, so die Grafik zeigt nach unten. Wenn ich ein paar Aussagen hinzufüge, dreht es sich um.

var w = 500; 
 
var h = 100; 
 
var barPadding = 1; 
 

 
var dataset = [5, 4, 6, 7, 8, 10, 2, 3, 4, 5, 6, 25, 34, 54, 64, 32, 11, 32, 42, 5, 10, 15, 20, 25, 30, 35, 40]; 
 

 
var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width", w) 
 
    .attr("height", h); 
 

 
var rectangles = svg.selectAll("rect") 
 
    .data(dataset) 
 
    .enter() 
 
    .append("rect") 
 
    .attr("x", function(d, i) { 
 
    return i * (w/dataset.length); 
 
    }) 
 
    .attr("y", function(d) { 
 
    return h - d; 
 
    }) 
 
    .attr("width", w/dataset.length - barPadding) 
 
    .attr("height", function(d) { 
 
    return d * 4; 
 
    }) 
 
    .attr("fill", function(d) { 
 
     return "rgb(0, 0, " + (d * 10) + ")"; 
 
    });

<script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>

Ich habe zwei Fragen, a) warum auf die Beispiele, die sie h-d für die y-Positionierung verwenden? Wenn die Svg-Höhe beispielsweise 100 ist und eine Zahl im Dataset 60 ist, sollte das nicht den Balken auf dem y = 40 von der oberen linken Ecke positionieren? Aber das ist nicht der Fall, wenn ich dies rende, die Leiste zeigt für alle Balken dieselbe Y-Position

Warum werden die Balken korrekt mit den angegebenen Werten gerendert? Was macht die Bar in diesem Fall "von unten wachsen", denn wenn ich die Mathematik mache, dann muss ich etwas anderes erwarten.

Answer 1

In diesem speziellen Fall ist der Grund, warum die y-Werte an der richtigen Stelle abgeschnitten sind, weil der Svg eine Höhe von 100 hat. Aber wenn Sie sorgfältig die Svg überprüfen, erstreckt sich jedes Rechteck über den Boden des Svg, Sie sind einfach nicht sichtbar, da es keinen Überlauf gibt.

h-d ist korrekt für die anfängliche y-Position, wenn ein Wert 60 war, dann wäre (100-60) gleich 40, wie Sie richtig angegeben haben. Die tatsächliche Höhe sollte jedoch eher d als d * 4 sein. Ich weiß nicht, woher der d * 4 kam.

Wenn also Ihr Wert 60 ist, dann wäre y 40, die Höhe wäre 60, die bis zum Ende des Svg reichen würde.

Hoffe, das hilft.