如何在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中反轉網格

回答

相關問題