Question

嗨我画了一个有5个x线和5个y线的网格。问题是，在svg中，y方向向下，所以我的网格y线向下，为了获得网格向上的方向我给出了-ve的值，如y（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]));

如何在d3.js中反转网格

2 个答案: