Sorry, I’m not very fluent with D3, but a few ideas off the top of my head that might be of some help.
Have you tried using the d3.select() method and applying solely the font-size this way, to see if you can narrow down that the font/text selector combination is problem? Maybe assign an id or class on load, then define your styles using a static stylesheet.
Have you noticed anything weird prior to the legend text length breaking? Does removing the legend and font css work 100% of the time?
I noticed you’re using adblock. It’s worth a shot to disable it, if you haven’t already. That plugin does crazy things sometimes.
Have you tried a full dom refresh, or container refresh, on load? What happens with this? Does it render 100% of the time? Still fail?
$("body").html($("body").html());
$("#d3div").html($("#d3div").html());
as shown from Timo in this thread jquery’s append not working with svg element?
“it does seem to add them in the DOM explorer, but not on the screen”
and the reason for this is different namespaces for html and svg.The easiest workaround is to “refresh” whole svg.
It doesn’t look like you were working with jQuery on this but it might be useful for testing in this case.
Sorry to hear about your crazy bug. Hope you find a solution.