如何在d3.js中反转网格

Question

嗨，我已经画了一个有5条x线和5条y线的网格。问题是，在svg中，y方向向下下降，所以我的网格y线向下下降，为了得到向上方向的网格，我给出了y的-ve值，比如(0，-50，-100，-150，-200)，之后我得到了我期望的值，但我不需要-ve y的值。我如何才能得到向上方向的y线，我正在努力做第二件事？

​

​

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

试试这个，可能会对你有所帮助。

 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

我不清楚你到底想要实现什么。如果您想要更改Y值的映射，以便更多的正数据值对应于页面上“更高”的位置，那么，正如其他人所建议的那样，缩放是正确的方法。

如果您只是想更改mouseover事件上显示的文本，您可以直接在代码中进行更改，例如

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