javascript - 在控制台命令上反转 d3 上的 y 轴

Question

因此，我正在尝试识别 map 中的点，我通过单击她并在控制台中将该点的 X、Y 分别输出到我的 map 坐标来执行此操作，但是我们都知道Y 轴不像我们在数学课上习惯的那样，实际上是从左上角开始的。我已经在谷歌上搜索了几个小时，但找不到反转 Y 轴以使其从左下角开始的方法。

<script>
    width = 14990/5,
    height = 15100/5,
    bg = "https://s3-us-west-1.amazonaws.com/riot-developer-portal/docs/map11.png";


svg = d3.select("#map").append("svg:svg")
    .attr("width", width)
    .attr("height", height)
    .attr("id", "yossi");

svg.append('image')
    .attr('xlink:href', bg)
    .attr('x', '0')
    .attr('y', '0')
    .attr('width', width)
    .attr('height', height);

var yossi = document.querySelector('#yossi');

// Get point in global SVG space
function cursorPoint(evt){
  pt = yossi.createSVGPoint();
  pt.x = evt.clientX*5-120; pt.y = evt.clientY*5-120;
  return pt.matrixTransform(yossi.getScreenCTM());
}

yossi.addEventListener('click',function(evt){
  var loc = cursorPoint(evt);
  console.log(loc.x +',' + loc.y);
  // Use loc.x and loc.y here
},false);
</script>

这是我的javascript文件，请帮忙:)。

Answer 1

要将 SVG 坐标系的 y 位置反转为更传统的笛卡尔坐标系(其中 y 从下到上增长)，只需使用这个简单的数学:

var y = height - yPosition

其中 yPosition 是使用 SVG 坐标系的位置，其中 y 从上到下增长。

这是一个基本的演示，使用 d3.mouse:

width = 300, height = 100;

svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

svg.on('mousemove', function() {
  var y = height - d3.mouse(this)[1];
  console.log("y position is: " + y);
});

.as-console-wrapper { max-height: 20% !important;}

svg {
  border: 1px solid black;
  background-color: lavender;
}

<script src="https://d3js.org/d3.v4.min.js"></script>