d3.js-翻译后报告了错误的鼠标坐标.为什么? [英] d3.js - After translate wrong mouse coordinates being reported. Why?

问题描述

我正在使用d3.js绘制一个矩形，其矩形的左上角为(10,10). 然后通过执行translate(200, 200)移动该矩形.

I'm using d3.js to draw a rectangle with it's top-left corner at (10,10). Then I move that rectangle by doing a translate(200, 200).

然后，我附加一个on-mouseout事件，该事件仅打印出鼠标指针的坐标.令我惊讶的是，它报告的坐标指出了矩形在翻译之前的边界.为什么???

Then I attach an on-mouseout event that simply prints out the coordinates of the mouse pointer. To my surprise the coordinates it reports indicate the boundaries of the rectangle before it was translated. Why???

如何使它报告实际的鼠标坐标，而不是报告矩形在翻译之前的位置的鼠标坐标?

How can I make it report the actual mouse-coordinates, not the mouse coordinates of where the rectangle used to be before it was translated?

这是代码:

var myApp = angular.module('myApp', []);

myApp.controller('MyController', function() {
    var self = this;
    self.svgContainer = d3.select("#my_svg_widget");

    var my_rect = self.svgContainer.append("rect")
      .attr("x", 10)
      .attr("y", 10)
      .attr("width", 60)
      .attr("height", 60);

    my_rect.attr("transform", "translate(200, 200)");    

    my_rect.on("mouseover", function() {
        var coordinates = [0, 0];
        coordinates = d3.mouse(this);
        var mouseX6 = Number(coordinates[0]);
        var mouseY6 = Number(coordinates[1]);
        console.log('mouseX6 = ', mouseX6, typeof mouseX6);
        console.log('mouseY6 = ', mouseY6, typeof mouseY6);
      }
    );
  }
);

以下是输出:

mouseX6 =  13 number
mouseY6 =  9 number

这里是柱塞: https://plnkr.co/edit/VSTzUhehdsVLFgmZqzHi?p=preview

推荐答案

d3.mouse ->查找当前鼠标事件相对于容器元素的x，y坐标.

d3.mouse -> Find x,y coordinates of the current mouse event relative to a container element.

尝试以下代码:

var coordinates = d3.mouse(this);
var pt = self.svgContainer.node().createSVGPoint();
pt.x = coordinates[0];
pt.y = coordinates[1];
pt = pt.matrixTransform(my_rect.node().getCTM());
var mouseX6 = pt.x, mouseY6 = pt.y;

更新的插件: 尝试单击矩形以测试新的位置计算.

Updated plunker: Try clicking on the rect to test the new position calculation.

var self = {};
self.svgContainer = d3.select("#my_svg_widget");

console.log("Hello!");

var my_rect = self.svgContainer.append("rect")
  .attr("x", 10)
  .attr("y", 10)
  .attr("width", 60)
  .attr("height", 60)
  .attr("fill", "Pink")
  .attr("stroke", "Blue")
  .attr("stroke-width", 2);

my_rect.attr("transform", "translate(200, 200)");

my_rect.on("mouseover", function() {
  console.log("\n\n\n================ MouseOver Rectangle ================");
  var coordinates = [0, 0];
  console.log("1");
  coordinates = d3.mouse(this);
  var pt = self.svgContainer.node().createSVGPoint();
  pt.x = coordinates[0];
  pt.y = coordinates[1];
  pt = pt.matrixTransform(my_rect.node().getCTM());
  //coordinates = d3.mouse(self.svgContainer);
  console.log("2");
  var mouseX6 = Number(coordinates[0]);
  var mouseY6 = Number(coordinates[1]);
  console.log('mouseX6 = ', mouseX6, typeof mouseX6);
  console.log('mouseY6 = ', mouseY6, typeof mouseY6);

  mouseX6 = pt.x;
  mouseY6 = pt.y;
  console.log('mouseX6 = ', mouseX6, typeof mouseX6);
  console.log('mouseY6 = ', mouseY6, typeof mouseY6);
});

my_rect.on("click", function() {
  console.log("\n\n\n================ Click on Rectangle ================");

  var coordinates = d3.mouse(this);
  var pt = self.svgContainer.node().createSVGPoint();
  pt.x = coordinates[0];
  pt.y = coordinates[1];
  pt = pt.matrixTransform(my_rect.node().getCTM());
  var mouseX6 = pt.x,
    mouseY6 = pt.y;
  self.svgContainer.append("circle").attr("cx", pt.x).attr("cy", pt.y).attr("r", 3);
  console.log('mouseX6 = ', mouseX6, typeof mouseX6);
  console.log('mouseY6 = ', mouseY6, typeof mouseY6);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg id="my_svg_widget" width="300" height="300" style="border-style:solid;border-color:purple;border-width: 2px;">
</svg>

这篇关于d3.js-翻译后报告了错误的鼠标坐标.为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！