使用d3.v5实现饼状图
效果图:
饼状图:
目录结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css"/>
<title>Linechart1</title>
</head>
<body>
<div id="container"></div> <script src="https://d3js.org/d3.v5.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
index,html
/*svg .path{*/
/*fill:#339999;*/
/*}*/ /*svg g path:hover {*/
/*cursor: pointer;*/
/*fill: #66cccc;*/
/*}*/
style.css
d3.csv("Data/data.csv",function (d) {
return {
education:d.education,
population:+d.population,
}
}).then(data=>{
console.log(data);
var sum=d3.sum(data.map(function (d) {
return d.population
})) for(i in data){
data[i].Percentage=(data[i].population/sum*100).toFixed(0)+"%";
}
console.log(data); var width=800,
height=800,
margin={"left":30,"top":30,"right":30,"bottom":30},
svg_width=width+margin.left+margin.right,
svg_height=height+margin.top+margin.bottom,
font_size=15; var svg=d3.select("#container")
.append("svg")
.attr("width",width)
.attr("height",height) var Pie=svg.append("g")
.attr("transform","translate("+width/2+","+height/2+")") var arc_generator=d3.arc()
.innerRadius(width/8)
.outerRadius(width/4)
// .startAngle(0)
// .endAngle(120*Math.PI/180); var angle_data=d3.pie()
.value(function (d) {
return d.population;
})
console.log(angle_data(data)); var color=d3.schemeCategory10;
console.log(color) //生成内部圆环
Pie.selectAll("path")
.data(angle_data(data))
.enter()
.append("path")
.attr("d",arc_generator)
.style("fill",function (d,i) {
return color[i];
})
.attr("class",".path") //标注
var arc_label=d3.arc()
.innerRadius(width/4)
.outerRadius(width/2) Pie.selectAll(".arc_label")
.data(angle_data(data))
.enter()
.append("path")
.attr("d",arc_label)
.attr("class",".arc_label")
.style("fill","none") //画标注线
function line_label(angle_data) {
var str=""
var i=-0;
for (d in angle_data){
str="M"+arc_generator.centroid(angle_data[d])[0]+","+arc_generator.centroid(angle_data[d])[1];
str=str+"L"+arc_label.centroid(angle_data[d])[0]+","+arc_label.centroid(angle_data[d])[1]
// console.log(str);
Pie.append("path")
.attr("d",str)
.attr("stroke",color[i])
.attr("stroke-width",2)
i++;
if(i>10)i=0;
}
} line_label(angle_data(data)); var text=Pie.selectAll("text")
.data(angle_data(data))
.enter()
.append("text")
.attr("transform",function (d) {
return "translate("+arc_label.centroid(d)+")"
})
.attr("text-anchor",function (d) {
var x=arc_label.centroid(d)[0];
return x<=0?"end":"start";
})
.attr("font-size",font_size)
.style("fill",function (d,i) {
return color[i];
})
.style("text-decoration","underline")
.text(function (d) {
return d.data.education+d.data.Percentage;
})
})
index.js
education,population
大专以及以上,11964
高中和中专,18799
初中,51966
小学,35876
文盲人口,5466
data.csv
参考教程:https://www.imooc.com/learn/103
使用d3.v5实现饼状图的更多相关文章
- D3.js:饼状图的制作
假设有如下数据需要可视化: var dataset = [ 30 , 10 , 43 , 55 , 13 ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度, ...
- D3.js的v5版本入门教程(第十三章)—— 饼状图
D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...
- D3(v5) in TypeScript 坐标轴之 饼状图生成
饼状图生成时依旧遇到了类型问题,记录如下: import * as d3 from 'd3'; import * as React from 'react'; class TestGraph exte ...
- AngularJS in Action读书笔记5(实战篇)——在directive中引入D3饼状图显示
前言: "宁肯像种子一样等待 也不愿像疲惫的陀螺 旋转得那样勉强" 这是前几天在查资料无意间看到的一位园友的签名,看完后又读了两遍,觉得很有味道.后来一寻根究底才知这是出资大诗 ...
- D3.js 饼状图的制作
1.数据 有如下数据,需要可视化: var dataset = [ 30 , 10 , 43 , 55 , 13 ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终 ...
- 【 D3.js 进阶系列 — 6.2 】 饼状图的拖拽
本文讲解稍微复杂一些的拖拽应用,即拖拽饼图的各部分. 在[入门 - 第 9.1 章]讲解了如何制作饼状图.饼状图的各部分是用具有宽度的弧线来表示的.在与用户进行交互的时候,如果每一部分都能拖拽,是很有 ...
- D3.js系列——布局:饼状图和力导向图
一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...
- BIP_开发案例08_BI Publisher图表示例 饼状图/直方图/折线图(案例)
2014-12-25 Created By BaoXinjian
- 用D3.js画树状图
做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择 ...
随机推荐
- 转:visualvm监控远程机器上的Java程序
转自:http://hanwangkun.iteye.com/blog/1195526 JDK里面本身就带了很多的监控工具,如JConsole等.我们今天要讲的这款工具visualvm,就是其中的一款 ...
- linux中查看和开放端口
装好Tomcat7后,发现除了本机能访问外界访问不了,岂有此理.于是请教百度大神,在费一番周折后,总结步骤如下: 1.修改文件/etc/sysconfig/iptables [root@bogon ~ ...
- Sequel自动生成Select语句
Sequel 是 Mac 上的一款不错的 mysql 可视化编辑, 它有一个非常好的功能是可以定制自己的插件, 这就是Bundles. 利用这个功能可以写出自己常用的一些sql. 查询语句是最常用的, ...
- javaweb项目部署到tomcat服务器
http://jingyan.baidu.com/album/a501d80c0c65baec630f5ef6.html?picindex=8
- 运维监控利器Nagios之:nagios配置详解
http://ixdba.blog.51cto.com/2895551/752870 一.nagios配置过程详解 1.nagios默认配置文件介绍 nagios安装完毕后,默认的配置文件在/usr ...
- Django+Bootstrap+Mysql 搭建个人博客 (六)
6.1.comments插件 (1)安装 pip install django-contrib-comments (02)settings INSTALLED_APPS = [ 'django.con ...
- .net core在网关中统一配置Swagger
最近在做微服务的时候,由于我们是采用前后端分离来开发的,提供给前端的直接是Swagger,如果Swagger分布在各个API中,前端查看Swagger的时候非常不便,因此,我们试着将Swagger集中 ...
- 1.1 为什么要使用lambda 表达式
第1章 lambda 表达式 1.1 为什么要使用lambda 表达式 1.2 lambda 表达式的语法 1.3 函数式接口 1.4 方法引用 1.5 构造器引用 1.6 变量作用域 1.7 默认方 ...
- loj536 「LibreOJ Round #6」花札
一眼二分图博弈,于是我们可以拿到69分的好成绩. 二分图暴力加边的数目是O(n^2)的,于是我们考虑网络流优化建图,将alice的每个牌向其的颜色和编号节点连边,bob的每个牌由其颜色和编号节点向其连 ...
- BZOJ_2693_jzptab_莫比乌斯反演
BZOJ_2693_jzptab_莫比乌斯反演 Description Input 一个正整数T表示数据组数 接下来T行 每行两个正整数 表示N.M Output T行 每行一个整数 表示第i组数据的 ...