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

Question

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

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

因此，在font-size 1px下面，您实际上可以将鼠标移离文本，并且河流文本仍然会突出显示。

我想知道为什么它会低于1px以及如何解决这个问题。如果有一些？

，可能会禁用outerRadius

问题示例

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的一个错误。