Simple bar chart on d3 JS - d3.js

Question

I'm new to this library and I don't understand why the rect bars have a negative value. I'm using d3-node (d3 v4) with jsdom to render svg from server.
This is what I tried :
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);
});
And the svg looks like this
<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>
It's kinda hard to see some v4 tutorials, it seems there is a lot of changes between v3 and v4. Could you please explain in which part this is wrong ?
Thanks a lot

Answer 1

First of all, looks like there are some issues with height and width:
var width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
Gives us width = 770 and height = 445. But
.createSVG(GRAPH_WIDTH - MARGINS.left - MARGINS.right - LEGEND_PANEL.width, GRAPH_HEIGHT - MARGINS.top - MARGINS.bottom)
ends up with <svg width="360" height="250">.
Then, you're getting negative height and y because of missing domain part in your y.scaleLinear declaration:
var y = d3.scaleLinear()
.range([height, 0]);
It should be something like:
var y = d3.scaleLinear()
.domain([0, 150])
.range([height, 0])
D3 scaleLinear() returns function which translates every point from your data dimension (in this case it's [0, 150], where 0 and 150 min and max possible values in your data) to its visual coordinate, which is then used for drawing. I.e. it maps [0, 150] -> [445, 0].
To get a better understanding, I suggest reading the official ds-scale docs. There are also three tutorials are mentioned in the first paragraph.
Even if you found a v3 tutorial, it might be worth to read it, the ideas remain the same, just keep the changelog page open to verify how to write the same code in v4. The biggest collection of tutorials is listed here.