javascript - NVD3 图表无法计算 Chrome 中的图例文本长度，因为 Window.getComputedStyle 未正确返回字体大小

Question

背景资料

我使用其自定义小部件框架将 NVD3 图表集成到 Eclipse-RAP 中。图表生成到一个 div 中。 CSS 通过在 javascript 中创建链接条目来动态加载。我通过创建 SVG/text 元素检查 CSS 是否已加载，并检查其 font-size 是否正常(参见 https://stackoverflow.com/a/7997710/337621 )。如果加载了 CSS，我会创建图表。

问题

由于某些原因，图表在 Chrome 中并不总是正确呈现。通常在我的 session 中第一次显示正确，但第二次显示总是错误的。对于错误的情况，我在控制台中发现了这个:

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

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

预期:

错误的布局:

经过一些调试，我找到了相关的 d3 代码部分。 NVD3 使用此函数请求 SVG 文本元素的字体大小:

  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 调用的行中添加了以下“打印点”(条件断点，它从不停止，但会打印出值):

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/文本在计算样式中没有字体大小，但它总是在应用的 CSS 规则之一中具有字体大小，这怎么可能呢？

Chrome 中是否存在与此相关的已知错误？

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

环境细节

Chrome 39.0.2171.71(64 位)

Kubuntu 3.13.0-29-通用

更新

我认为我受到了浏览器的这种“行为”的影响: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() 方法并以这种方式仅应用字体大小，看看是否可以缩小字体/文本选择器组合的问题范围？也许在加载时分配一个 id 或类，然后使用静态样式表定义您的样式。

在图例文本长度中断之前，您是否注意到任何奇怪的事情？删除图例和字体 css 是否 100% 有效？

我注意到您正在使用 adblock。如果您还没有禁用它，那么值得一试。该插件有时会做一些疯狂的事情。

您是否尝试过在加载时进行完整的 dom 刷新或容器刷新？这会发生什么？它是否在 100% 的时间内渲染？还是失败了？

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

如 Timo 在本帖 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.

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

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