【 D3.js 入门系列 --- 9.1 】 饼状图的制作

本文介绍如何使用D3.js的Layout来创建饼状图。通过转换数据,将整数转化为包含起始和结束角度的对象,适配饼状图的绘制。接着利用arc方法和path元素,以及文本标签,完成饼状图的制作。
摘要由CSDN通过智能技术生成

    本人的个人博客为: www.ourd3js.com 

    csdn博客为: blog.csdn.net/lzhlzz 

    转载请注明出处,谢谢。


    这一节用 Layout 做一个饼状图。第9节中说过, Layout 的作用只是转换数据,将不适合图形化的数据转化成适合图形化的数据。现在使用以下数据:

var dataset = [ 30 , 10 , 43 , 55 , 13 ];

    这个数据要不能直接用于画饼状图,我们必须通过计算将它转换成角度。这个计算不需要我们手动计算,因为 D3 中提供了 d3.layout.pie() 函数,这个 Layout 就是用于将上面这样的数据转换成饼状图需要的角度。下面定义一个这样的函数。

var pie = 
  • 12
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值