Einfache Balkendiagramm auf d3 JS

Question

Ich bin neu in dieser Bibliothek und ich verstehe nicht, warum die rect Bars einen negativen Wert haben. Ich benutze d3-Knoten (d3 v4) mit jsdom, um Svg vom Server zu rendern. Diese

ist, was ich versucht:

var data = [ 
{ 
    "name" : "Nom Prénom", 
    "value1" : 40, 
    "value2" : 100, 
    "value3" : 10, 
    "total" : 150 //a changer 
} 
]; 

var margin = {top: 20, right: 160, bottom: 35, left: 30}; 

var width = 960 - margin.left - margin.right, 
height = 500 - margin.top - margin.bottom; 


var svg = this.d3n 
     .createSVG(GRAPH_WIDTH - MARGINS.left - MARGINS.right - LEGEND_PANEL.width, GRAPH_HEIGHT - MARGINS.top - MARGINS.bottom) 
     .append('g'); 


var stack = d3.stack().keys(["value1","value2","value3"]).order(d3.stackOrderNone).offset(d3.stackOffsetNone); 

var dataSet = stack(data); 

    //set x, y and colors 

    var x = d3.scaleBand() 
     .range([0, width]); 

    var y = d3.scaleLinear() 
     .range([height, 0]); 

    var colors = ["b33040", "#d25c4d", "#f2b447", "#d9d574"]; 


    //define and draw axis 
    var xAxis = d3.axisBottom(x); 
    var yAxis = d3.axisLeft(x).ticks(5).tickFormat(function(d){ return d;}); 

    svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis); 

    svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis); 



// Create groups for each series, rects for each segment 
var groups = svg.selectAll("g.cost") 
    .data(dataSet) 
    .enter().append("g") 
    .attr("class", "cost") 
    .style("fill", function(d, i) { return colors[i]; }); 

var rect = groups.selectAll("rect") 
.data(function(d) { return d; }) 
.enter() 
.append("rect") 
.attr("x", function(d) { 
    return x(d[0]); 
}) 
.attr("y", function(d) { return y(d[0] + d[1]); }) 
.attr("height", function(d) { return y(d[0]); }) 
.attr("width", x.bandwidth()) 
.on("mouseover", function() { tooltip.style("display", null); }) 
.on("mouseout", function() { tooltip.style("display", "none"); }) 
.on("mousemove", function(d) { 
    var xPosition = d3.mouse(this)[0] - 15; 
    var yPosition = d3.mouse(this)[1] - 25; 
    tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")"); 
    tooltip.select("text").text(d.y); 
}); 

Und das svg sieht aus wie dieser

<svg xmlns="http://www.w3.org/2000/svg" width="360" height="250"><g><g class="y axis" fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="#000" d="M-6,0.5H0.5V770.5H-6"></path></g><g class="x axis" transform="translate(0,445)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="#000" d="M0.5,6V0.5H770.5V6"></path></g><g class="cost" style="fill: b33040;"><rect y="-17355" height="445" width="770"></rect></g><g class="cost" style="fill: #d25c4d;"><rect y="-79655" height="-17355" width="770"></rect></g><g class="cost" style="fill: #f2b447;"><rect y="-128605" height="-61855" width="770"></rect></g></g></svg>

Es ist ein bisschen schwer, einige v4 Tutorials zu sehen, es scheint, dass es eine ist Viele Änderungen zwischen v3 und v4. Könnten Sie bitte erklären, in welchem ​​Teil das falsch ist?

Vielen Dank

Answer 1

Zunächst einmal sieht aus wie es einige Probleme mit der Höhe und Breite sind:

var width = 960 - margin.left - margin.right, 
height = 500 - margin.top - margin.bottom; 

Gibt uns width = 770 und height = 445. Aber

.createSVG(GRAPH_WIDTH - MARGINS.left - MARGINS.right - LEGEND_PANEL.width, GRAPH_HEIGHT - MARGINS.top - MARGINS.bottom) 

endet mit <svg width="360" height="250">.

Dann Sie bekommen negativ height und y wegen fehlender Domänenteil in Ihrer y.scaleLinear Erklärung:

var y = d3.scaleLinear() 
     .range([height, 0]); 

Es sollte so etwas sein:

var y = d3.scaleLinear() 
     .domain([0, 150]) 
     .range([height, 0]) 

D3 scaleLinear() kehrt Funktion, die übersetzt Jeder Punkt von Ihrer Datendimension (in diesem Fall ist es [0, 150], wobei 0 und 150 min und maximal mögliche Werte in Ihren Daten sind) zu seiner visuellen Koordinate, die dann verwendet wird zum Zeichnen. I.e. es bildet [0, 150] -> [445, 0] ab.

Um ein besseres Verständnis zu erhalten, empfehle ich das Lesen der official ds-scale docs. Es gibt auch drei Tutorials, die im ersten Abschnitt erwähnt werden.

Selbst wenn Sie eine v3 Tutorial gefunden, könnte es sich lohnen, es zu lesen, bleiben die Ideen gleich, nur the changelog page offen halten, um zu überprüfen, wie Sie den gleichen Code in v4 zu schreiben. Die größte Sammlung von Tutorials ist aufgeführt here.