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

问题描述

我绘制了5条x线和5条y线的网格.问题在于，在svg中，y方向向下下降，因此我的网格y线向下下降，以便在给定y的-ve值(例如，(0，-50，-100，-150，-200))之后获得向上的网格i我达到了我的期望，但是我不需要-y的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屋！