项目中使用nvd3发现：在手机上显示的中文图例有一部分被盖住了，如下图右上角

查找原因发现

<g class="nv-series" transform="translate(0,5)">现金余额图例代码</g>

<g class="nv-series" transform="translate(52,5)">费用余额图例代码</g>

如果将费用余额图例代码 translate(52,5)改成 translate(62,5) ；即将图形向右变换移动，即可不遮住

调试发现代码出现在nvd3下的legend.js中，154行左右：

series
      .attr('transform', function(d, i) {
      return 'translate(' + xPositions[i % seriesPerRow] + ',' + (5 + Math.floor(i / seriesPerRow) * 20) + ')';
});

继续跟踪查找xPositions[i % seriesPerRow]里数据的来源

中间省略过程（nvd3把每个图例的长度计算好后，加上左侧circle圆形图标的距离，作为每个图例的长度，来控制图例的位置）

最终在utils.js中111行发现答案

nv.utils.calcApproxTextWidth = function (svgTextElem) {
    if (typeof svgTextElem.style === 'function'
        && typeof svgTextElem.text === 'function') {
        var fontSize = parseInt(svgTextElem.style("font-size").replace("px",""));
        var textLength = svgTextElem.text().length;
       
        return textLength * fontSize * 0.5;
    }
    return 0;
};

注意看这个fontSize * 0.5

此方法用来计算字符的宽度，比如说“abcd” 如果当前字体样式大小是12px,那么最终的字符串宽度就是 4*12*0.5 = 24
但是中文字符宽度明显大于英文字符宽度啊（对比下下面两行），所以就出现了图中的图例被盖住的情况。

======================

文字宽度示例：

文字widthtest:

======================

果断改成0.8

刷新页面试验

问题解决！！！
---------------------
作者：风知
来源：CSDN
原文：https://blog.csdn.net/song369585552/article/details/22799641

  您阅读这篇文章共花了：