利用D3JS 绘制饼图

程序目录结构:

 

先展示终极效果:

 

①要引用d3js类库

 

准备数据源  格式如下

var  chartData=[
    {label: "漯河", value: 2},
    {label: "舞阳", value: 3},
    {label: "郭庄", value: 2},
    {label: "北京", value: 3},
    {label: "漯河3", value: 2},
    {label: "北京3", value: 3},
    {label: "漯河4", value: 2},
    {label: "北京4", value: 3},
    {label: "郭庄2", value: 4}
];
var  title= [{
            text: "www.guowenke.tk",
            color: "#333333",
            fontSize: 18,
            font: "arial"
}];
 
追加一个画布
var svg = d3.select("#pie")
        .append("svg")
        .attr("width", canvasWidth)
        .attr("height", canvasHeight);
 
//追加标题
svg.selectAll(".title")
        .data(title)
        .enter()
        .append("text")
        .text(function(d){
            return d.text;
        })
        .attr("class","title")
        .attr("fill",function(d){return d.color})
        .style("font-family", function (d) {
            return d.font;
        })
        .attr("x", canvasWidth/ 2)
        .attr("y",30);

 

下面进入正题开始绘图

 绘图
//确定饼图中心
 var pieChartElement =svg.append("g")
         .attr("transform", "translate(" + (canvasWidth/ 2) + "," + (canvasHeight / 2) + ")");

 

//创建弧生成器
var arc = d3.svg.arc()
        .innerRadius(canvasHeight * 0)
        .outerRadius(canvasHeight * 0.8/3)
        .startAngle(0)
        .endAngle(function (d) {
            return (d.value /getSumData(chartData)) * 2 * Math.PI;
        }) ;

 

var arcs = pieChartElement.selectAll("g")
        .data(chartData)
        .enter()
        .append("g")
        .attr("transform",
                function (d, i) {
                    var angle = 0;
                    if (i > 0) {
                        angle =  getSegmentAngle(i - 1, chartData, getSumData(chartData));
                    }
                    return "rotate(" + angle + ")";
                }
        );
      arcs.append("path")
        .attr("fill", function (d, i) {
            return colors[i];  //设定弧的颜色
        })
        .attr("d", function (d) {
            return arc(d); //使用弧生成器
        });

 

饼图已经绘制完工,当然您可以在此基础上进一步增加功能

源码下载传送门:

http://download.csdn.net/detail/g334082356/9420668

 

 

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值