效果图：

饼状图：

目录结构：

<!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实现饼状图的更多相关文章

  1. D3.js：饼状图的制作

    假设有如下数据需要可视化: var dataset = [ 30 , 10 , 43 , 55 , 13 ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度, ...

  2. D3.js的v5版本入门教程（第十三章）—— 饼状图

    D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...

  3. D3(v5) in TypeScript 坐标轴之 饼状图生成

    饼状图生成时依旧遇到了类型问题,记录如下: import * as d3 from 'd3'; import * as React from 'react'; class TestGraph exte ...

  4. AngularJS in Action读书笔记5(实战篇)——在directive中引入D3饼状图显示

    前言: "宁肯像种子一样等待  也不愿像疲惫的陀螺  旋转得那样勉强" 这是前几天在查资料无意间看到的一位园友的签名,看完后又读了两遍,觉得很有味道.后来一寻根究底才知这是出资大诗 ...

  5. D3.js 饼状图的制作

    1.数据 有如下数据,需要可视化: var dataset = [ 30 , 10 , 43 , 55 , 13 ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终 ...

  6. 【 D3.js 进阶系列 — 6.2 】 饼状图的拖拽

    本文讲解稍微复杂一些的拖拽应用,即拖拽饼图的各部分. 在[入门 - 第 9.1 章]讲解了如何制作饼状图.饼状图的各部分是用具有宽度的弧线来表示的.在与用户进行交互的时候,如果每一部分都能拖拽,是很有 ...

  7. D3.js系列——布局：饼状图和力导向图

    一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...

  8. BIP_开发案例08_BI Publisher图表示例 饼状图/直方图/折线图（案例）

    2014-12-25 Created By BaoXinjian

  9. 用D3.js画树状图

    做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择 ...

随机推荐

  1. @EnableWebMVC注解理解

    @EnableWebMVC注解用来开启Web MVC的配置支持.也就是写Spring MVC时的时候会用到.

  2. JavaScript设计模式 Item 7 --策略模式Strategy

    1.策略模式的定义 何为策略?比如我们要去某个地方旅游,可以根据具体的实际情况来选择出行的线路. 如果没有时间但是不在乎钱,可以选择坐飞机. 如果没有钱,可以选择坐大巴或者火车. 如果再穷一点,可以选 ...

  3. 《javascript语言精粹》读书笔记 Item1 精华与语法

    第一章 精华 任何语言都有其精华的部分和鸡肋的部分,javascript也不例外,而且鸡肋的部分还很多.但javascript的流行却不受他的质量影响. javascript为何如此流行?因为他是we ...

  4. python实现简体中文和繁体相互转换

    1. opencc-python 如果目录上的链接被屏蔽了,请手动复制 https://pypi.python.org/pypi/opencc-python/ 首先介绍opencc的python实现库 ...

  5. IntelliJ IDEA（十） ：常用操作

    IDEA功能详细,快捷键繁多,但是实际开发时不是所有都能用上,如果我们熟悉一些常用的也足够满足我们日常开发了,多的也只是提高我们的B格. 1.自定义主题 IDEA默认的主题有三款,分别是Intelli ...

  6. Python-分支循环- if elif for while

    分支与循环 条件是分支与循环中最为核心的点,解决的问题场景是不同的问题有不同的处理逻辑.当满足单个或者多个条件或者不满足条件进入分支和循环,这里也就说明这个对相同问题处理执行逻辑依据具体参数动态变化, ...

  7. ATOM系列之－atom报错"Cannot load the system dictionary for zh-CN"

    atom报错"Cannot load the system dictionary for zh-CN" 想必很多人(程序猿&程序媛)都和我一样,喜欢的这款很拉风的代码编辑器 ...

  8. Guava新增集合类型-Bimap

    Guava新增集合类型-Bimap BiMap提供了一种新的集合类型,它提供了key和value的双向关联的数据结构. 通常情况下,我们在使用Java的Map时,往往是通过key来查找value的,但 ...

  9. Nginx隐藏index.php和配置vhost

    nginx启动命令 启动:nginx停止:nginx -s stop退出:nginx -s quit重启:nginx -s reopen重新加载:nginx -s reload平滑启动:kill -H ...

  10. cygwin pip安装

    1.概要 当python的包多了以后,你会发现一个个去下载然后安装挺麻烦的,耗时耗力.java里面有maven,ivy来帮你管理jar包,而类似的python里有pip来完成这个任务. 2.pip安装 ...