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

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

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

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

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

问题例子

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

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

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