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 direction i given -ve values for y like (0,-50,-100,-150,-200) after this i got what i am expected but i no need to -ve values for y. How can i get the y lines in upward direction i am getting first struggling to do second?

var Y = [0,50,100,150,200];
var X = [0,50,100,150,200];
var min_x = 0;
var max_x = 200;
var min_y = 0;
var max_y = 200;


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

var yLinesGroup = svgContainer.append("g")
    .attr("id", "ylines");

var ylines = yLinesGroup.selectAll("line")
    .data(Y)
    .enter()
    .append("line");

var ylinesAttributes = ylines
    .attr("x1", min_x - 30)
    .attr("y1", function (d) { return (d); })
    .attr("x2", max_x + 30)
    .attr("y2", function (d) { return (d); })
    .style("stroke", "red")

ylines
    .on("mouseover", function () {
        var pos = d3.mouse(this);
        d3.select(this).style("stroke", "black")
            .append("svg:title")
            .text("X:" + pos[0] + ";Y:" + pos[1]);
    })
    .on("mouseout", function () {
        d3.select(this).style("stroke", "gray").text("");
    });

var xLinesGroup = svgContainer.append("g").attr("id", "xlines");

var xlines = xLinesGroup.selectAll("line")
    .data(X)
    .enter()
    .append("line");

var xlinesAttributes = xlines
    .attr("x1", function (d) { return d; })
    .attr("y1", min_y - 30)
    .attr("x2", function (d) { return d; })
    .attr("y2", max_y + 30)
    .style("stroke", "green")

xlines
    .on("mouseover", function () {
        var pos = d3.mouse(this);
        d3.select(this).style("stroke", "black")
            .append("svg:title")
            .text("X:" + pos[0] + ";Y:" + pos[1]);
        })
    .on("mouseout", function () {
        d3.select(this).style("stroke", "gray").text("");
    });

Answer 1

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]));

Answer 2

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