Question

我使用d3创建一个带圆点的折线图......只是试图找出这个http://bl.ocks.org/bobmonteverde/2070123 ...在Chrome中，鼠标悬停和鼠标移动事件不会在某些圆点触发，而它可以正常工作火狐和野生动物园...

  var pointPaths = wrap.select('.point-paths').selectAll('path')
      .data(voronoi);
  pointPaths.enter().append('path')
      .attr('class', function(d,i) { return 'path-' + i; })
  pointPaths.exit().remove();
  pointPaths
      .attr('clip-path', function(d) { return 'url(#clip-' + id + '-' + d.series + '-' + d.point + ')'; })

      .attr('d', function(d) { return 'M' + d.data.join(',') + 'Z'; })
      .on('mouseenter', function(d,i) { 
        console.log("MouseOver:---",d, "i ==== ",i);
        wrap.select('.line-' + d.series + ' .point-' + d.point)
          .classed('hover', true);
      })
      .on('mouseleave', function(d) {
       // console.log("mouseOut:---",d);
        wrap.select('.line-' + d.series + ' .point-' + d.point)
          .classed('hover', false);
       });

这里是小提琴http://jsfiddle.net/vVEDG/1/

为什么鼠标悬停事件不会在x点13,15,17,19被触发？

任何建议???

我使用Chrome 26.0.1410.65

Answer 1

通过玩jsFiddle可以告诉我，我认为这个问题与pointPaths的坐标有关。它们的坐标像负数和正数1000000.我之前遇到过类似问题的问题，因为某些元素的坐标会丢掉它们。我尝试强制它使用1000和-1000作为那些坐标，鼠标悬停事件处理一些坏的pointPaths。我没有发布小提琴，因为它也弄乱了很多其他的东西，我会让你弄清楚如何修改你的代码，把这些坐标更改为更合理的东西，看看会发生什么。

在Chrome中的svg - clippath区域中未触发MouseOver事件？

1 个答案: