Background Information
I created an integration of NVD3 charts into Eclipse-RAP using its custom widget framework. The chart is generated into a div. The CSS is loaded dynamically by creating a link entry in javascript. I check if the CSS is already loaded by creating an SVG/text element, and I check if its font-size is ok or not (see https://stackoverflow.com/a/7997710/337621). If the CSS is loaded, I create the chart.
Problem
For some reason the chart is not rendered always correctly in Chrome. Usually first time in my session it is shown correctly, but second time it is rendered always wrong. For the wrong case I have found this in the console:
Error: Invalid value for <g> attribute transform="translate(NaN,5)"
If I make the chart redraw (for example by updating the chart data or resizing), the legend is rendered correctly.
Expected:
Wrong layout:
After some debugging I have found the relevant d3 code part. NVD3 asks for the font size for an SVG Text element using this function:
d3_selectionPrototype.style = function(name, value, priority) {
var n = arguments.length;
if (n < 3) {
if (typeof name !== "string") {
if (n < 2) value = "";
for (priority in name) this.each(d3_selection_style(priority, name[priority], value));
return this;
}
if (n < 2) return d3_window.getComputedStyle(this.node(), null).getPropertyValue(name);
priority = "";
}
return this.each(d3_selection_style(name, value, priority));
};
The relevant CSS part is this:
svg text {
font: normal 12px Arial;
}
I added the following "printpoint" (conditional breakpoint, which never stops, but prints out values) on the line with the getComputedStyle call:
name == 'font-size' &&
(
console.log(this.node()) ||
console.log( d3_window.getComputedStyle(this.node(), null) ) ||
console.log( d3_window.getComputedStyle(this.node(), null).getPropertyValue(name) ) ||
console.log( window.getMatchedCSSRules(this.node()) )
)
The result is really weird. If the chart is correct, I find this in the console for correct layout:
And this for wrong layout:
This is the DOM for the wrong layout:
<svg id="ujdh846lhqubvvlg2jbh16s6q9" width="1896" height="361">
<g class="nvd3 nv-wrap nv-pieChart" transform="translate(20,90)">
<g>
<g class="nv-pieWrap">
<g class="nvd3 nv-wrap nv-pie nv-chart-6450" transform="translate(0,0)">
<g>
<g class="nv-pie" transform="translate(928,125.5)">
<g class="nv-slice" fill="#1f77b4" stroke="#1f77b4">
<path d="M6.1477269317197136e-15,-100.4A100.4,100.4 0 0,1 65.39779726531111,76.17931551835622L0,0Z"/>
</g><g class="nv-slice" fill="#ff7f0e" stroke="#ff7f0e">
<path d="M65.39779726531111,76.17931551835622A100.4,100.4 0 0,1 -90.13957577290248,44.21557281638648L0,0Z"/>
</g><g class="nv-slice" fill="#2ca02c" stroke="#2ca02c">
<path d="M-90.13957577290248,44.21557281638648A100.4,100.4 0 0,1 -94.15031406756688,-34.869447385619964L0,0Z"/>
</g><g class="nv-slice" fill="#d62728" stroke="#d62728">
<path d="M-94.15031406756688,-34.869447385619964A100.4,100.4 0 0,1 -1.844318079515914e-14,-100.4L0,0Z"/>
</g>
</g><g class="nv-pieLabels" transform="translate(928,125.5)">
<g class="nv-label" transform="translate(112.95224431711586,-41.8329177051586)">
<rect rx="3" ry="3" style="stroke: rgb(255, 255, 255); fill: rgb(255, 255, 255);"/>
<text style="text-anchor: middle; fill: rgb(0, 0, 0);">alma</text>
</g><g class="nv-label" transform="translate(-24.246406744679096,117.98438142386297)">
<rect rx="3" ry="3" style="stroke: rgb(255, 255, 255); fill: rgb(255, 255, 255);"/>
<text style="text-anchor: middle; fill: rgb(0, 0, 0);">korte</text>
</g><g class="nv-label" transform="translate(-120.2954032887533,6.100692386622933)">
<rect rx="3" ry="3" style="stroke: rgb(255, 255, 255); fill: rgb(255, 255, 255);"/>
<text style="text-anchor: middle; fill: rgb(0, 0, 0);">szilva</text>
</g><g class="nv-label" transform="translate(-68.80925650816773,-98.86095649341644)">
<rect rx="3" ry="3" style="stroke: rgb(255, 255, 255); fill: rgb(255, 255, 255);"/>
<text style="text-anchor: middle; fill: rgb(0, 0, 0);">paradicsom</text>
</g>
</g>
</g>
</g>
</g><g class="nv-legendWrap" transform="translate(0,-90)">
<g class="nvd3 nv-legend" transform="translate(0,5)">
<g transform="translate(NaN,5)">
<g class="nv-series" transform="translate(0,5)">
<circle class="nv-legend-symbol" r="5" style="stroke-width: 2px; fill: rgb(31, 119, 180); stroke: rgb(31, 119, 180);"/>
<text text-anchor="start" class="nv-legend-text" dy=".32em" dx="8">alma</text>
</g><g class="nv-series" transform="translate(0,25)">
<circle class="nv-legend-symbol" r="5" style="stroke-width: 2px; fill: rgb(255, 127, 14); stroke: rgb(255, 127, 14);"/>
<text text-anchor="start" class="nv-legend-text" dy=".32em" dx="8">korte</text>
</g><g class="nv-series" transform="translate(0,45)">
<circle class="nv-legend-symbol" r="5" style="stroke-width: 2px; fill: rgb(44, 160, 44); stroke: rgb(44, 160, 44);"/>
<text text-anchor="start" class="nv-legend-text" dy=".32em" dx="8">szilva</text>
</g><g class="nv-series" transform="translate(0,65)">
<circle class="nv-legend-symbol" r="5" style="stroke-width: 2px; fill: rgb(125, 0, 0); stroke: rgb(125, 0, 0);"/>
<text text-anchor="start" class="nv-legend-text" dy=".32em" dx="8">paradicsom</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
How can it be that once my SVG/Text has no font-size in computed style BUT it always has the font-size in one of the applied CSS rules?
Is there some known bug in Chrome for this?
Note, that in Firefox everything works fine.
Environment Details
Chrome 39.0.2171.71 (64-bit)
Kubuntu 3.13.0-29-generic
Update
I thought I am affected by this "behaviour" of the browsers : How can I change the default behavior of console.log? (*Error console in safari, no add-on*) . This means that the console does not show the state of the object at the time point of the log entry, but refers to the current state. So I made a small experiment here: http://jsfiddle.net/hdv7ty6L/ . I change the class from javascript and I check if the rule list changes in the console or not. And it seems to be a snapshot of the rule list. So still no clue, what is wrong here :)
Test code:
document.body.className='redbody';
console.log(window.getMatchedCSSRules(document.body));
document.body.className='bluebody';
console.log("Class changed");
console.log(window.getMatchedCSSRules(document.body));
Console output:
Update 2
The problem happens also if the CSS is completely static and not loaded dynamically.
Update 3
I tried to reproduce it in a jsfiddle: dynamicly created SVG inside a div with asynchronously created chart (onclick of a button). The error does not show up unfortunately. https://jsfiddle.net/ewsb4d9k/1/
<g>? It looks like you have a race condition there, and I've dealt with stuff like that in the past. – Milimetricg.attr('transform', 'translate(' + (width - margin.right - legendWidth) + ',' + margin.top + ')');. Perhaps try setting a breakpoint there and checking those variables in nv.d3.js orconsole.log(chart.legend.width())andconsole.log(chart.legend.margin())– Lucas