I have a d3 project using fisheye, But why I have to point my mouse on the data point

Question

Here's a link of my demo! If it's not clear enough, please see this link of 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");

I want my fisheye to move smoothly, which means when I go over the plain space, it will do fisheye also.

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.