CODEWITHSUNDEEP
d3.js
wwwald
wwwald

Reputation: 460

Graph ~ axis alignment issue

I'm currently working on a quite basic graph using 2 ordinal axes. X axis shows 4 categories, Y axis shows 3. For some reason, the plotted circles don't align with the plotted axes. An example can be seen at http://jsfiddle.net/SrdY6/. Problem seems to be translation-related, but the only translation in there is applied to the large containing <g> element:

var lunchgraph = svg.append("g")
    .attr("class", "lunchgraph")
    .attr("transform", "translate(" + lunchmargin.left + "," + lunchmargin.top + ")");

I've been looking at this for some time now, but can't spot where things go wrong... Anyone with more insight?

Upvotes: 0

Views: 407

Answers (1)

wwwald
wwwald

Reputation: 460

Nothing like putting a question out there and risking public shame, only to find out the answer within minutes after posting.

For ordinal axes configured with rangeBands or rangeRoundBands, the scale function returns the lower value of the given input. To have the plot align with the exact categorical labels, you need to add half of the rangeBand to the calculated coordinate.

So: no problem with the translations or anything, but with the computation of cx and cy coordinates for placing the circles in the graph.

Correct code:

    .attr("cx", function(d) { return x(d.label) + x.rangeBand()/2 ;} )
    .attr("cy", function(d) { return y(d.sqid) + y.rangeBand()/2 ; } )

Upvotes: 1

Related Questions