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)";
            });