如何在d3.js中反转网格

嗨，我绘制了5个x线和5个y线的网格。问题在于，在svg中，y方向向下倾斜，所以我的网格y线向下倾斜，以获得向上方向的网格，我给出了在此之后的y值（例如0，-50，-100，-150，-200）我得到了我所期望的，但我不需要为-y值。我怎么能得到y线向上我第一次挣扎做第二？如何在d3.js中反转网格

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

来源

2017-09-01 mantelinga r

如果您想要一组输入数据来映射一系列输出值，那么比例尺通常是最佳解决方案。例如，使用d3.scaleLinear.domain（[50,400]）。range（[400,50]）可能是值得的（请参阅此处更多https://github.com/d3/d3-scale） –

本该尝试可以帮助你

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

来源

2017-09-04 08:41:59

这不是很清楚，我正是你想要达到的目标。如果您想要更改Y值的映射，以便更多正数据值与页面上“更高”的位置相对应，那么正如其他人所建议的那样，比例是正确的方法。

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

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

来源

2017-09-04 13:39:02

鼠标悬停事件显示x和y坐标像（0,0）（0,5）.... –

秤是正确的方法，但我没有得到如何做，是否有可能给我一个答案，第二个网格我在图像中显示 –

看到这个小提琴http://jsfiddle.net/S575k/211/ –

如何在d3.js中反转网格

回答

相关问题