1

我使用 d3 创建带有圆点的折线图...只是想弄清楚这个http://bl.ocks.org/bobmonteverde/2070123 ...在 Chrome 中，鼠标悬停和 mouseout 事件不会在某些圆点中触发而它在firefox和safari中运行良好......

  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

4

1 回答 1

2

从我玩弄你的jsFiddle可以看出，我认为问题与pointPaths的坐标有关。它们有负数和正数 1000000 之类的坐标。我之前遇到过 chrome 的问题，给它提供像这样的巨大数字，因为某些元素的坐标会抛出一些问题。我尝试强制它对这些坐标使用 1000 和 -1000，并且鼠标悬停事件对一些坏点路径起作用。我没有发布小提琴因为它也搞砸了很多其他的东西，我会让你弄清楚如何修改你的代码以将这些坐标更改为更合理的东西，看看会发生什么。

于 2013-04-29T17:22:26.113 回答