NVD3图表无法计算Chrome中的图例文本长度，因为Window.getComputedStyle没有正确返回font-size

Question

背景资料

我使用其自定义窗口小部件框架创建了NVD3图表到Eclipse-RAP的集成。图表生成为div。通过在javascript中创建链接条目来动态加载CSS。我通过创建SVG /文本元素来检查CSS是否已经加载，然后检查其font-size是否正常（参见https://stackoverflow.com/a/7997710/337621）。如果加载了CSS，我会创建图表。

问题

出于某种原因，Chrome中的图表不会始终正确呈现。通常在我的会话中第一次正确显示，但第二次呈现总是错误的。对于错误的情况，我在控制台中找到了这个：

Error: Invalid value for <g> attribute transform="translate(NaN,5)"

如果我重新绘制图表（例如通过更新图表数据或调整大小），则图例会正确呈现。

预期：

错误的布局：

经过一些调试后，我找到了相关的d3代码部分。 NVD3使用此函数询问SVG Text元素的字体大小：

  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));
  };

相关的CSS部分是：

svg text {
  font: normal 12px Arial;
}

我在getComputedStyle调用的行上添加了以下“printpoint”（条件断点，它永不停止，但打印出值）：

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()) )
)

结果真的很奇怪。如果图表是正确的，我会在控制台中找到正确的布局：

这是错误的布局：

这是错误布局的DOM：

<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>

一旦我的SVG / Text在计算样式中没有字体大小，但是它在其中一个应用的CSS规则中总是具有字体大小，那怎么可能呢？

Chrome中是否存在一些已知错误？

请注意，在Firefox中一切正常。

环境详情

Chrome 39.0.2171.71（64位）

Kubuntu 3.13.0-29-generic

更新

我认为我受到浏览器的这种“行为”的影响：How can I change the default behavior of console.log? (*Error console in safari, no add-on*)。这意味着控制台不会在日志条目的时间点显示对象的状态，而是指当前状态。所以我在这里做了一个小实验：http://jsfiddle.net/hdv7ty6L/。我从javascript更改类，我检查规则列表是否在控制台中更改。它似乎是规则列表的快照。 所以仍然没有线索，这里有什么问题：）

测试代码：

document.body.className='redbody';
console.log(window.getMatchedCSSRules(document.body));
document.body.className='bluebody';
console.log("Class changed");
console.log(window.getMatchedCSSRules(document.body));

控制台输出：

更新2

如果CSS完全是静态的并且没有动态加载，问题也会发生。

更新3

我尝试在jsfiddle中重现它：在div中动态创建SVG，使用异步创建的图表（单击按钮）。不幸的是，错误没有显示出来。 https://jsfiddle.net/ewsb4d9k/1/

Answer 1

对不起，我对D3不是很流利，但是有一些想法可能会有所帮助。

您是否尝试过使用d3.select（）方法并单独应用font-size，看看是否可以缩小字体/文本选择器组合的问题？也许在加载时指定一个id或类，然后使用静态样式表定义你的样式。

在图例文字长度打破之前，您是否注意到任何奇怪的内容？删除图例和字体css是否100％都可以工作？

我注意到您正在使用adblock。如果你还没有，那么禁用它是值得的。那个插件有时候很疯狂。

您是否在加载时尝试过完整的dom刷新或容器刷新？这会怎么样？它有100％的时间呈现吗？仍然失败？

$("body").html($("body").html()); 
$("#d3div").html($("#d3div").html());

如Timo在此帖子jquery's append not working with svg element?

中所示

  

＆＃34;它似乎确实将它们添加到DOM资源管理器中，但不会在屏幕上添加＃34;   其原因是html和svg的名称空间不同。

     

最简单的解决方法是＆＃34;刷新＆＃34;整个svg。

看起来你没有使用jQuery，但在这种情况下测试它可能很有用。

很抱歉听到你的疯狂错误。希望你找到解决方案。