kwoxer kwoxer - 3 months ago 8
CSS Question

SVG textpath click radius too high when font-size below 1px

I have created some rivers in D3.js and would like to have them clickable. So I created an example jsfiddle.net/kwoxer/5uc17jwr/19/.

There you can see that the mouseover of the rivers are overall fine. But the issue is when the font-size is getting below

1px
(e.g. River 9 and River 10) it's not correct anymore. Somehow then the mouseover is buggy and the radius is way too high then.

So below font-size
1px
you can actually move the mouse away from the text and the river text is still highlighted.

I would like to know why it's bugging below
1px
and how I could fix that. Maybe with disabling the outerRadius if there is some?

Issue examples




  1. I would like to have the red and blue marked are with the event. The red one shall highlight the River 11 and the blue one the River 19:



enter image description here


  1. It's nearly the same issue but another case. So here the blue color area is also toggling the highlight when the font-size of the river is too low. I would like to disable that behaviour:



enter image description here

Answer

Instead of

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

I now use

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

and to resample the size without manually edit each size by hand I use

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

With that in Firefox everything is perfect. Just Chrome has still a problem when the text is not horizontal. Then the bounding box is much bigger then the text as you can see from issue picture #2. But I think this is a bug of Chrome.

Comments