如何在 d3.js 中反转网格 [英] How to invert the grid in d3.js

问题描述

我画了一个有 5 条 x 线和 5 条 y 线的网格.问题是，在 svg 中，y 方向向下下降，所以我的网格 y 线向下下降，为了使网格向上方向，我在此之后为 y 给出了 -ve 值，例如 (0,-50,-100,-150,-200)我得到了我的期望，但我不需要 -ve y 的值.我怎样才能得到向上的 y 线我正在努力做第二个?

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

推荐答案

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

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.

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

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

这篇关于如何在 d3.js 中反转网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！