javascript - 使用 d3.js 和 HTML5 Canvas(不是 SVG)的鼠标事件

Question

我是 Canvas 的新手，也是 d3.js 的新手...

我正在尝试使用 d3.js 和 Canvas 创建交互式数据可视化。我有一个非常基本的版本，但我对如何准确地与每个节点(一个圆圈)交互感到有点困惑。

关于如何执行此操作的在线信息似乎有限，还是我遗漏了什么？

我目前只是尝试使用以下代码在 mouseover/mouseout 上更改鼠标光标:

canvas.on("mousemove", function() {
   var m = d3.mouse(this);
   selectNode( m[0], m[1] );
});

var nodeI, thisNX, thisNY, nHover;

for ( i; i < nodes.length; i++ ) {

nX = nodes[i].x,
nY = nodes[i].y,
nR = nodes[i].radius - 3,
nHover = nodes[i].hover || "";

if ( mX >= nX - nR && mX <= nX + nR && mY >= nY - nR && mY <= nY + nR && nHover === "" ) {

    console.log( "mouse on!" );

    nodeI = nodes[i].index;
    thisNX = nX;
    thisNY = nY;

    $('html,body').css('cursor','pointer');

    nodes[i].hover = true;

} else {
    if ( nHover === true ) {
        console.log( "mouse off!" );
        nodes[nodeI].hover = "";
        $('html,body').css('cursor','default');
    }       
}

这是一个工作 fiddle :http://jsfiddle.net/u90cmm36/

虽然我不能让 mouseout 正常工作，但我已经非常接近这个工作了。

我这样做的方式正确吗？对我来说似乎有点啰嗦。 Canvas 的 d3.js 的内置鼠标悬停/鼠标移出在哪里？

感谢您的帮助!

Answer 1

不幸的是， Canvas 没有内置的鼠标悬停。有一些库可以做到这一点，比如 KineticJS，但我用得不多。据我所知，我经常使用的 D3 没有为 Canvas 内置鼠标悬停。

通常，如果我将 d3 与 Canvas 一起使用，我会使用透明的 SVG 层来控制鼠标交互。这种方法同时提供了 SVG 的交互性和 Canvas 的更精细的图形控制，但如果您有大量的交互位，则会降低性能，因为每个不同的交互都需要一个 DOM 元素。您还可以通过跟踪鼠标位置来做事，这就是您正在做的事情。不过，您的方法存在一些问题。

现在，您正在遍历所有节点以一次检查一个鼠标位置。即使您的鼠标在一个节点中，循环也会继续并在检查并发现您不在循环的下一个节点中时将光标更改回来。你应该改变它来检查你是否在任何节点中，然后一旦你确定你是否在一个节点中，停止检查其余节点并更改你的光标(如果需要的话)待更改。)

您当前检查鼠标悬停的方法还会检查边界正方形而不是圆圈。这将检查鼠标是否在一个圆圈内:

var distance = Math.sqrt(Math.pow(nX - mX, 2) + Math.pow(nX - mX, 2));
if(distance <= nR){ //mouseover };