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

Posted 2023-02-25

【中文标题】我有一个使用鱼眼的 d3 项目，但是为啥我必须将鼠标指向数据点

【英文标题】：I have a d3 project using fisheye, But why I have to point my mouse on the data point我有一个使用鱼眼的 d3 项目，但是为什么我必须将鼠标指向数据点

【发布时间】：2014-11-28 16:09:44

【问题描述】：

这里是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");

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

【参考方案1】：

几个问题：

1.) 您的 tsv 文件末尾有几行空行，这会将虚假数据引入您的绘图中。

2.) 您已将圈子包裹在 g 元素中。 g 组是一个“空”容器，不接收鼠标事件。这里的一个技巧是用一个元素填充你的空白空间，比如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。

【讨论】：

是的，我之前注意到了。但我只是移动了.append("g")。但是，Y轴是这样的一团糟。（也许你可以试试）但是为什么会这样呢？我是新手，希望现在更多~

@ZhangNan，你不能移动g，它正在用x轴和y轴对圆圈进行分组。你看我的解决方案了吗？它解决了你的问题。

是的，我看过了，和我的比起来真的很不错。但是您是否注意到当您的程序进入拥挤（点）位置时它会变慢？哦，还有个问题我忘了问，请看我的demo，在最右边的地方，应该会显示鼠标指向的城市点的OPP_TOT和OPP_LAND的数量，但是为什么没有定义呢？？？？顺便问一下，你是学生还是公司的开发人员？

@ZhangNan，我没有注意到任何变慢，但是您要求 d3.js 执行的操作非常占用 CPU，因此在较慢的计算机上，这将是一个问题。您的鼠标悬停不起作用，因为您已使用 datum 函数将数据映射到 x/y。看到这个update。

嗨，我还有一个问题。一开始，当鼠标没有指向 svg 时，圆圈的半径不同。在我将鼠标指向 svg 后，圆圈变为相同的半径。为什么会这样？如何解决这个问题？