使用d3.js绘制花瓣形饼图

1.为了简单起见，我随机定义了一组数据

const container = [200, 265, 437, 635, 570, 298];

2.获取到body中svg的宽和高，生成居中的viewBox

var width = d3.select('svg').attr('width');
var height = d3.select('svg').attr('height');
const svg = d3.select("svg").attr("viewBox", [-width / 2, -height / 2, width, height]);

3.利用d3给出的schemePastel1设置颜色比例尺

var colorScale = d3.scaleOrdinal().domain(d3.range(container.length)).range(d3.schemePastel1);

4.制作饼图和弧形生成器，并使用pie()转换数据

var pie = d3.pie(); //创建饼图
var arc = d3.arc()//弧形生成器.innerRadius(20)//花蕊的半径.outerRadius(Math.min(width, height) / 2-1).cornerRadius(180); //转角
const arcs = pie(container);

5.创建扇形分组，绘制扇形，给弧形填入数据，并填入颜色（这里的stroke指的是每片花瓣的边缘，所以设置为白色之后可以看到花瓣之间有间隔）

svg.append("g").attr("stroke", "white").selectAll("path").data(arcs).join("path").attr("d", arc).attr("fill", function(d, i) {return colorScale(i)});

6.如果还想要让各片花瓣之间有一定的距离，可以在arc中额外设置个padAngle()

最终成果如下图所示啦！

使用d3.js绘制花瓣形饼图相关推荐

D3.js绘制颜色:RGB、HSL和插值 (V3版本)
转载地址:D3.js绘制颜色:RGB.HSL和插值 (V3版本) 如果要计算介于两个颜色之间的颜色,需要用到插值(Interpolation).D3提供了d3.intrerpolateRgb()来处 ...
d3js mysql_使用D3.js绘制地图并打点
本篇简单介绍一下使用D3.js绘制地图,并更具经纬度在地图打点.最后根据点生成voronoi图及其三角网. 下载地图geoJson文件去网上下载要绘制地图的geoJson文件. 使用d3.json( ...
D3.js绘制树形图
1.什么是D3: data-driven-document,翻译为数据驱动的文档,是一种由数据来决定绘图流程的程序设计模型.简单说,D3是一个JavaScript的函数库,用来做数据可视化(将数据的各 ...
使用D3.js绘制重庆地图
重庆市地图json数据下载链接https://pan.baidu.com/s/19eZfuGGRY6JOrH9WnZJ5iw 密码h5f9 D3.js下载链接:https://pan.baidu.co ...
d3.js 绘制极坐标图(polar plot)
0.引言在极坐标系中,任意位置可由一个夹角和一段相对原点(极点)的距离表示.也就是说,我们可以用 (angle,r) 来表示极坐标系中的点. 1.数据假设我们有如下数据集[ [10, 0.2], ...
D3.js 绘制柱状图
使用D3 V4版本绘制使用D3绘制柱状图,绘制效果如下: 使用D3绘制柱状图,先对需要绘制的图形拆解,主要分为以下几个部分: 1. 比例尺的定义 2. 坐标轴的绘制 3. 添加矩形 4. 修改坐标轴 ...
D3.js 绘制散点图
一.实现效果二.代码 1.创建svg var svg = d3.select('#mychart').append('svg').attr('width', width + margin.left ...
D3.js绘制竖向组织架构图
d3新手上路,记个笔记(*^_^*) 先上效果图: 主要参考:https://bl.ocks.org/mbostock/3184089 https://github.com/justincy/d3-p ...
用D3.js绘制完整的流程图demo
一个完整的流程图demo,效果入下: HTML <!doctype html><meta charset="utf-8"> <title>Dag ...

使用d3.js绘制花瓣形饼图

使用d3.js绘制花瓣形饼图相关推荐

最新文章

热门文章