CODEWITHSUNDEEP
javascriptd3.jsscale
user2159121
user2159121

Reputation: 135

D3: Scale graph according the data points

I am having a bit of a trouble scaling my graph, according to the length on the bars. For example, in the jsfiddle, I can't draw a bar beyond the data point of size 25. I know one way to fix this would be to make the width and height of the body larger. But I was thinking scaling the entire graph would be much more efficient, so that one bar doesn't end up looking abnormally large.

http://jsfiddle.net/NkkDC/

I was thinking, I would have to scale the "y" function here, but I wasn't sure how.

bars.on("click", clickEvent)
    .transition().duration(2000).delay(200)
    .attr("y", function(d, i) { return i * 20; })
    .attr("width", x)
    .attr("height", 20);

Thanks in advance :)

Upvotes: 0

Views: 259

Answers (1)

ne8il
ne8il

Reputation: 2427

The input domain of your xScale can change every time you add a new value (since you could add a new maximum), so we need to recalculate the xScale when we re-render the chart. Moving the declaration of the x-scale inside your render function should do the trick :

    var xScale = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, 420]);

http://jsfiddle.net/NkkDC/1/

Upvotes: 1

Related Questions