饼状图的实现方法html,D3.js实现饼状图的方法详解

前言

小编在之前已经跟大家分享过关于怎样用柱状图和折线图这两种基本图表。这两种图表都是有坐标轴的，现在来说一种没有坐标轴的图表——饼图。

饼状图实现

还是和之前一样，我们先把简单的画图框架搭起来，添加SVG画布。但是这里需要注意的是，为了方便后面画饼图上的弧形，我们把组合这些元素的g元素移动到画布的中心：

饼图 window.onload = function() { var width = 600, height = 300; // 创建一个分组用来组合要画的图表元素 var main = d3.select('.container svg').append('g') .classed('main', true) // 注意这里和前面几种图表的差别 .attr('transform', "translate(" + width/2 + ',' + height/2 + ')'); };

模拟数据并转化

为了画饼图，我们模拟了一些这样的数据。

// 模拟数据var dataset = [ {name: '购物', value: 983}, {name: '日常饮食', value: 300}, {name: '医药', value: 1400}, {name: '交通', value: 402}, {name: '杂费', value: 134}];

在柱状图等有坐标轴的图表中，我们通过创建合适的比例尺来将模拟好的数据转化成适合画图的数据，那在饼图里，又用什么来转化呢？看这里~

// 转换原始数据为能用于绘图的数据var pie = d3.