Question

这里a link of my demo！如果不够清楚，请参阅此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");

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

Answer 1

夫妻问题：

1。）你的tsv文件末尾有几个空白行，这会在你的情节中引入虚假数据。

2。）您已将圈子包裹在g元素中。 g群组是空的＆＃34;容器并没有收到鼠标事件。这里有一个技巧是用一个像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");

然后鼠标悬停变为：

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

更新了example。

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

1 个答案: