CODEWITHSUNDEEP
javascriptd3.js
Escher
Escher

Reputation: 5776

d3 resizes path (gains 10 px width) on update - why?

TL;DR: Why does the line graph path in the fiddle example grow 10 px width when updated?

Long version: I am building a little microeconomic simulation in d3, trying to illustrate price elasticity. Here's a fiddle (which doesn't actually illustrate elasticity, it's just a dummy to try to get the graph working). The idea is you adjust the price (the height of the price bars by pulling with the mouse), and the demand line graph updates.

The only trouble is that when it updates, the line graph <path> seems to grow 10px. (you can verify this in your browser inspector - it should go from 408px to 418px). I don't know why this is happening.

I don't believe an extra point is being added, merely that the path is being "stretched" horizontally. The relevant update function uses the the original data as the input to the x.axis domain - so I don't see why the data points should be mapped differently to the x range.

//...extract of the update function
var demandData = demandForecastData.map( function(d, i){
    return [ d[0], d[1] + somestuff ];
});
updateDemand(demandData);

Can someone clever tell me what's going on?

Upvotes: 0

Views: 22

Answers (1)

bryce
bryce

Reputation: 3051

You set margins as so: //svg margins for axis labelling, etc var margin = {top: 20, right: 40, bottom: 30, left: 40}

But upon drawing it you decrease the right margin by 10: //graph the bar chart var margin = {top: 20, right: 30, bottom: 30, left: 40}

just update it to right: 40 and it's fixed.

Upvotes: 1

Related Questions