Question

我几周后有点茫然，试图让mousemove事件在一组分层画布上工作。根据早期post中的建议，我确认只有当目标图层的z-index位于顶部时才会触发事件（如此简单fiddle所示）：

然而，在我正在使用的扩展代码（d3 parcoords）中，尽管具有与上面相同的HTML结构，但我无法在平行坐标图表中触发该事件。

此bl.ocks显示扩展版本，以及即使目标分层画布具有最大z-index时事件也不会起作用（尽管该事件在图表下方的简单画布中运行良好））。我尝试用parcoords文件制作一个最小的例子，但考虑到互连函数的数量，无法设法得到一个有用且有效的版本。

我希望知道原始parcoords代码的人可能能够澄清图表的画布是如何组织的，如果某些特定的东西可能导致mousemove事件不起作用。或者，也许一些经验丰富的眼睛可能会抓住我发布的示例中缺少的东西。任何提示非常感谢！

d3.parcoords.js中生成画布的代码摘录：

var pc = function(selection) {
  selection = pc.selection = d3.select(selection);

  __.width = selection[0][0].clientWidth;
  __.height = selection[0][0].clientHeight;

  // canvas data layers
  ["marks", "foreground", "brushed", "highlight", "clickable_colors"].forEach(function(layer, i) {
    canvas[layer] = selection
      .append("canvas")
      .attr({
      id: layer, //added an id for easier selecting for mouse event 
      class: layer,
      style: "position:absolute;z-index: " + i
      })[0][0];
    ctx[layer] = canvas[layer].getContext("2d");
  });


  // svg tick and brush layers
  pc.svg = selection
    .append("svg")
      .attr("width", __.width)
      .attr("height", __.height)
      .style("font", "14px sans-serif")
      .style("position", "absolute")

    .append("svg:g")
      .attr("transform", "translate(" + __.margin.left + "," + __.margin.top + ")");

  return pc;
};

用于绘制方块并设置mousemove事件的函数：

//This custom function returns polyline ID on click, based on its HEX color in the hidden canvas "clickable_colors"
//Loosely based on http://jsfiddle.net/DV9Bw/1/ and https://stackoverflow.com/questions/6735470/get-pixel-color-from-canvas-on-mouseover
function getPolylineID() {

    function findPos(obj) {
        var curleft = 0, curtop = 0;
        if (obj.offsetParent) {
            do {
                curleft += obj.offsetLeft;
                curtop += obj.offsetTop;
            } while (obj = obj.offsetParent);
            return { x: curleft, y: curtop };
        }
        return undefined;
    }

    function rgbToHex(r, g, b) {
        if (r > 255 || g > 255 || b > 255)
            throw "Invalid color component";
        return ((r << 16) | (g << 8) | b).toString(16);
    }


    // set up some squares
    var my_clickable_canvas = document.getElementById('clickable_colors');
    var context = my_clickable_canvas.getContext('2d');
    context.fillStyle = "rgb(255,0,0)";
    context.fillRect(0, 0, 50, 50);
    context.fillStyle = "rgb(0,0,255)";
    context.fillRect(55, 0, 50, 50);

    $("#clickable_colors").mousemove(function(e) {
    //$(document).mousemove(function(e) {
    //debugger;
        var pos = findPos(this);
        var x = e.pageX - pos.x;
        //console.log(x)
        var y = e.pageY - pos.y;
        var coord = "x=" + x + ", y=" + y;
        var c = this.getContext('2d');
        var p = c.getImageData(x, y, 1, 1).data; 
        var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
        $('#status').html(coord + "<br>" + hex);
        console.log("Polyline's hex:" + hex)
    });
}

Answer 1

svg正在覆盖你的画布。画布和svg都在同一级别上，但你没有在svg上设置z-index，因为它在所有画布之后呈现。
只需将<body id = "webpage">  <div id = "navmenu"> <ul class = "navbarTop"> <li id = "buddyTitle">Title</li> <li class = "navtop"><a href = "example.com">Test1</a></li> <li class = "navtop"><a href = "example.com">Test2</a></li> <li class = "navtop"><a href = "example.com">Test3</a></li> </ul> </div> </body>放在您链接的页面中的svg上，就可以在Chrome中为我修复它。它似乎只是z-index的一个问题您应该在所有画布上设置css z-index: 0;和position以及在同一级别设置sgv。

修改
对不起，我错了它只是z-index 我可以通过删除以下css来使其工作。

z-index

但这似乎是在你正在使用的库中，所以只需覆盖它。

.parcoords > canvas { pointer-events: none; }

即使z-index为max，Mousemove事件也不会在画布上触发

1 个答案: