我对 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/

我非常接近让这个工作,虽然我不能让鼠标正常工作。

我会以正确的方式解决这个问题吗?对我来说似乎有点冗长。用于 Canvas 的 d3.js 的内置鼠标悬停/鼠标输出在哪里?

谢谢你的帮助!!

最佳答案

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

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

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

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

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

关于javascript - 带有 d3.js 和 HTML5 Canvas(非 SVG)的鼠标事件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25427542/

10-12 12:50
查看更多