NVD3.js 中 圖例 (legend) 中文字元 被圖示遮住

項目中使用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

重新整理頁面試驗

問題解決！！！