NVD3 chart fails to calculate legend text length in Chrome, since Window.getComputedStyle does not return font-size correctly-open source projects novus/nvd3

9 years ago

admin

3 minutes

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 http://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  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:

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 : console.log object at current state . 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/