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

在本文中，我们将介绍如何解决在 Chrome 浏览器中 CSS NVD3 图表无法正确计算图例文本长度的问题。该问题是由于 Window.getComputedStyle 方法无法正确返回字体大小导致的。

阅读更多：CSS 教程

问题描述

CSS NVD3 是一个基于 D3.js 的数据可视化库，用于创建各种类型的图表。然而，在使用 CSS NVD3 创建图表时，我们发现在 Chrome 浏览器中，图例文本长度计算不正确。这导致了一些图表显示不完全或错位。

经过排查，我们发现问题根源在于 Window.getComputedStyle 方法。

Window.getComputedStyle 方法的作用

Window.getComputedStyle 方法用于获取指定元素的计算样式。它返回一个包含所有计算样式属性及其对应值的对象。

在这个问题中，我们要关注的是元素的字体大小属性。

Window.getComputedStyle 返回的字体大小不正确

我们发现，在 Chrome 浏览器中，Window.getComputedStyle 不返回正确的字体大小值。这导致了 CSS NVD3 图表在计算图例文本长度时出现错误。

为了验证这个问题，我们使用以下代码来获取图例文本的字体大小：

var legendElement = document.querySelector('.nv-legend-text');
var style = window.getComputedStyle(legendElement);
var fontSize = style.getPropertyValue('font-size');
console.log(fontSize);

在大多数现代浏览器中，这段代码会返回正确的字体大小。然而，在 Chrome 浏览器中，它返回的值可能是错误的。

解决方法

为了解决这个问题，我们可以使用另一种方法来获取正确的字体大小值。

我们可以通过设置一个隐藏的辅助元素，并使用 getBoundingClientRect 方法来获取其计算样式。这样可以确保我们获取到的字体大小值是正确的。

以下是解决方法的示例代码：

var legendElement = document.querySelector('.nv-legend-text');
var hiddenElement = document.createElement('span');
hiddenElement.innerHTML = 'Test';
hiddenElement.style.visibility = 'hidden';
hiddenElement.style.position = 'absolute';
hiddenElement.style.top = '0';
hiddenElement.style.left = '0';
hiddenElement.style.fontSize = '12px';
document.body.appendChild(hiddenElement);

var computedFontSize = hiddenElement.getBoundingClientRect().height + 'px';
hiddenElement.parentNode.removeChild(hiddenElement);

console.log(computedFontSize);

使用上述代码，我们首先创建了一个隐藏的 span 元素，并设置其样式为绝对定位、隐藏以及指定一个默认的字体大小。然后，将其添加到 body 元素中。

接下来，我们使用 getBoundingClientRect 方法获取这个隐藏元素的计算样式。由于隐藏元素只包含一个单词的文本内容，因此其高度即为字体大小。最后，我们将隐藏元素从 DOM 中移除，并输出正确的字体大小值。

示例

让我们通过一个简单的示例来说明这个问题和解决方法。

首先，我们创建一个包含图例的 CSS NVD3 柱状图：

<div id="chart">
  <svg></svg>
</div>

然后，我们使用如下代码来创建图表：

nv.addGraph(function() {
  var chart = nv.models.discreteBarChart();

  d3.select('#chart svg')
    .datum([{ key: 'Series 1', values: [10, 15, 8, 12] }])
    .call(chart);

  return chart;
});

在 Chrome 浏览器中查看该图表，你可能会注意到图例文本显示不完全或错位。

接下来，我们将使用前面提到的解决方法来获取图例文本的正确字体大小。

var legendElement = document.querySelector('.nv-legend-text');
var hiddenElement = document.createElement('span');
hiddenElement.innerHTML = 'Test';
hiddenElement.style.visibility = 'hidden';
hiddenElement.style.position = 'absolute';
hiddenElement.style.top = '0';
hiddenElement.style.left = '0';
hiddenElement.style.fontSize = '12px';
document.body.appendChild(hiddenElement);

var computedFontSize = hiddenElement.getBoundingClientRect().height + 'px';
hiddenElement.parentNode.removeChild(hiddenElement);

console.log(computedFontSize);

使用上述代码，我们可以获取到图例文本的正确字体大小值，并对其进行相应调整。