1

d3 を使用して、円の点を含む折れ線グラフを作成します...これを理解しようとしましたhttp://bl.ocks.org/bobmonteverde/2070123 ...Chrome では、いくつかの円の点でマウスオーバーとマウスアウトのイベントがトリガーされません一方、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のような座標を持っています。以前、クロムで問題がありました。要素の座標としてそのような膨大な数を与えると、物事がうまくいかなくなります。これらの座標に 1000 と -1000 を使用するように強制しようとしたところ、マウスオーバー イベントがいくつかの不適切な pointPath で機能しました。他の多くのものも台無しにしてしまったので、私はフィドルを投稿しませんでした。コードを変更してこれらの座標をより合理的なものに変更する方法を理解させ、何が起こるか見てみましょう。

于 2013-04-29T17:22:26.113 に答える