CODEWITHSUNDEEP
javascriptsvgd3.js
jshwlkr
jshwlkr

Reputation: 355

correctly sizing a D3 bar graph

I am attempting to add labels/axis/titles/etc to a D3 bar graph. I can get something close to the right size, however I end up clipping off part of the last bar (so the last bar is skinnier than the others). Here is the pertinent code: 

var x = d3.scale.linear()
.domain([0, object.data.length])
.range([0, object.width]);
var y = d3.scale.linear()
.domain([object.min-(object.max-object.min)*.15, object.max (object.max-object.min)*.15])
.rangeRound([ object.height - 30, 0]);

var vis = d3.select(object.ele)
    .append("svg:svg")
    .attr("width", object.width)
    .attr("height", object.height)
    .append("svg:g");

vis.selectAll("g")
.data(object.data)
.enter().append("rect")
.attr("x", function(d, i) { return x(i); })
.attr("y", function(d) { return object.height - y(d.value); })
.attr("width", object.width/object.data.length - 1)
.attr("height",  function(d) { return y(d.value); })
.attr("transform", "translate(30,-30)");

At the moment everything (labels, axis, and so on) is 30px. How do I correctly alter the graph to make room for whatever else I need?

Upvotes: 1

Views: 293

Answers (1)

Thien
Thien

Reputation: 672

You are cutting off your last bar because you use translate the x coordinate but your the range of your x is only to the width without the extra 30 pixels.

Also it may be easier to simplify your y domain to use .domain([object.min, object.max]) then have the "y" and "height" functions reversed. This way you start the rect at the y(d.value) and make it's height object.height - y(d.value).

I would create three groups initially, one for your y axis, one for x axis, and then another for the bars. Draw your bars inside the last group and then translate the whole group itself instead of each individual bar. Increase the size of your object.width and object.height to match the total space you want.

Upvotes: 2

Related Questions