当字体大小低于 1px 时，SVG 文本路径的点击半径太高

Question

我在 D3.js 中创建了一些河流，并希望它们可点击。所以我创建了一个例子jsfiddle.net/kwoxer/5uc17jwr/19/。

您可以看到河流的鼠标悬停总体上很好。但问题是当字体大小低于1px（例如River 9 和River 10）时，它就不再正确了。不知何故，鼠标悬停是错误的，然后半径太高了。

所以在 font-size 1px 下方，您实际上可以将鼠标从文本上移开，河流文本仍然突出显示。

我想知道为什么它会在1px 下面出现问题以及我该如何解决这个问题。如果有的话，也许禁用 externalRadius？

问题示例

1. 我希望红色和蓝色标记与事件一起出现。红色的将突出 11 河，蓝色的将突出 19 河：

1. 这几乎是相同的问题，但另一种情况。因此，当河流的字体大小太低时，这里的蓝色区域也会切换突出显示。我想禁用该行为：

Answer 1

代替

var projection = d3.geo.equirectangular().translate([80, 0]).scale(220000);

我现在用

var projection = d3.geo.equirectangular().translate([80, 0]).scale(3000000);

并且在不手动编辑每个尺寸的情况下重新采样尺寸

.attr("font-size", function(d) { return d.properties.size * 11; })

在 Firefox 中，一切都很完美。只是 Chrome 在文本不水平时仍然存在问题。然后边界框比文本大得多，正如您从问题图片 #2 中看到的那样。但我认为这是 Chrome 的一个错误。