javascript - 我有一个使用鱼眼的 d3 项目，但是为什么我必须将鼠标指向数据点

Question

这是我的演示链接！如果还不够清楚，请看fisheye demo2的这个链接。

fisheye.copy = function() {
  return d3_fisheye_scale(scale.copy(), d, a);
};

fisheye.nice = scale.nice;
fisheye.ticks = scale.ticks;
fisheye.tickFormat = scale.tickFormat;
return d3.rebind(fisheye, scale, "domain", "range");

我希望我的鱼眼能够平稳移动，这意味着当我越过平原空间时，它也会做鱼眼。

Answer 1

Couple issues:

1.) You have a couple blank lines at the end of your tsv file, this is introducing bogus data into your plot.

2.) You've wrapped your circles in a g element. The g group is an "empty" container and doesn't receive mouse events. One trick here it to fill your empty space with an element that does, like a rect.

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("rect")
  .attr('fill','none')
  .attr('pointer-events', 'all')
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .attr("class","chartArea");

Then mouseover becomes:

d3.select(".chartArea").on("mousemove", function() {
  fisheye.focus(d3.mouse(this));
  ...

Updated example.