How to invert the grid in d3.js

Question

Hi i have drawn a grid with 5 x-lines and 5 y-lines. The problem is that in svg the y direction falling downwards so my grid y lines falling downwards, to get grid in upward

Answer 1

Try with this which may help you out

 var width = 700,height = 400,padding = 100;

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


    var yScale = d3.scale.linear().domain([0, 500]).range([height - padding, padding]);  



            var xScale = d3.scale.linear().domain([0, 500]).range([padding,height - padding]);  



            var yAxis = d3.svg.axis().orient("left").scale(yScale);


            var xAxis = d3.svg.axis().orient("bottom").scale(xScale);


            vis.append("g").attr("transform", "translate("+padding+",0)").call(yAxis);


            vis.append("g")
                .attr("class", "xaxis")   
                .attr("transform", "translate(0," + (height - padding) + ")")
                .call(xAxis);


           vis.selectAll(".xaxis text") 
              .attr("transform", function(d) {
                  return "translate(" + this.getBBox().height*-2 + "," + this.getBBox().height + ")rotate(-45)";
            });

Answer 2

It's not clear to me exactly what you want to achieve. If you want to change the mapping of Y values so that more positive data values correspond to a position "higher" on the page, then, as others have suggested, scales are the right approach.

If you simply want to change the text that's shown on mouseover events, you can do that in the code directly, e.g.

.text("X:" + pos[0] + ";Y:" + (y_max - pos[1]));