NVD3.js 中图例 (legend) 中文字符被图标遮住

最新推荐文章于 2022-08-23 13:31:17 发布

风知

最新推荐文章于 2022-08-23 13:31:17 发布

阅读量2.4k

点赞数

分类专栏： CSS NVD3 legend 前端页面文章标签： JS NVD3 legend 图例文字遮盖

本文链接：https://blog.csdn.net/song369585552/article/details/22799641

版权

项目使用NVD3.js时，发现在手机上中文图例出现被图标遮挡的问题。通过调整图例位置及修改utils.js中计算字符宽度的方法，将英文字符宽度乘以0.8，解决了中文字符被遮挡的状况。

摘要由CSDN通过智能技术生成

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

关注