CODEWITHSUNDEEP
javascriptd3.jschartshtml5-canvas
Nevin
Nevin

Reputation: 3298

D3 js chart inverted issue

My Fiddle

I am studying d3js,i got this implementation of a bar chart with some data. I need the chart to be inverted.

I tried adding:

var y = d3.scale.linear()
        .domain([0, d3.max(jsonData.year)])
        .range([500, 0]);

and calling that on the bars:

  .attr("y", function(d) {
            return y(d);
        });

Didnt work..

How do i get around this? I think am missing something.. This is what i want along with the axis: enter image description here

Upvotes: 1

Views: 240

Answers (1)

brygiger
brygiger

Reputation: 88

how's this? http://jsfiddle.net/jTs9A/3/

the problem was your transform, translate coordinates on appending the x and y axes at the bottom.

canvas.append("g")
    .call(xAxis)
    .attr("transform", "translate(0,0)");
canvas.append("g")
    .call(yAxis)
    .attr("transform", "translate(-10,0)");

you had (0,250) and (-10,-50) before

EDIT: http://jsfiddle.net/jTs9A/4/

you needed to add this: 

 .attr("y", function(d) {
        return  (h- d.year*10);  //Height minus data value
    })

where h is the height of your graph area. check the tut in the comments (not enough rep yet)

Upvotes: 1

Related Questions