首页 > Web开发 > 详细

D3.js 加标签

时间:2018-11-16 16:56:45      阅读:194      评论:0      收藏:0      [点我收藏+]

条形图还可以配上实际的数值,我们通过文本元素添加数据值。

svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function(d){
        return d;
    })

通过 x 和 y 值来定位文本元素。

               .attr("text-anchor", "middle")
               .attr("x", function(d, i) {
                       return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
               })
               .attr("y", function(d) {
                       return h - (d * 4) + 14;
               })
               .attr("font-family", "sans-serif")
               .attr("font-size", "11px")
               .attr("fill", "white");

 

结果如图所示:

技术分享图片

 

D3.js 加标签

原文:https://www.cnblogs.com/guangluwutu/p/9969673.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!