效果图：

饼状图：

目录结构：

<!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. Java高并发之无锁与Atomic源码分析

    目录 CAS原理 AtomicInteger Unsafe AtomicReference AtomicStampedReference AtomicIntegerArray AtomicIntege ...

  2. seo优化做起来不是哪么简单，其实需要的是思维

          SEO百科:随着人们互联网的认识水平的提升,SEO似乎也已经得到了更多的认识.无论是浅显还是深入,SEO一直被大众认为是简单的,甚至是不值得一提的东西,甚至认为SEO无非就是作弊,SEO并 ...

  3. 消息中间件activemq的使用场景介绍（结合springboot的示例）

    一.消息队列概述 消息队列中间件是分布式系统中重要的组件,主要解决应用耦合,异步消息,流量削锋等问题.实现高性能,高可用,可伸缩和最终一致性架构.是大型分布式系统不可缺少的中间件. 目前在生产环境,使 ...

  4. 常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介

    1.UEditor UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码... 主要特点: 轻量级: ...

  5. javascript 判断对象类型

    typeof typeof是一个一元运算符,它返回的结果 始终是一个字符串,对不同的操作数,它返回不同的结果. 此表总结了typeof所有可能的返回值: 操作数类型 返回值 undefined &qu ...

  6. Latex数学公式中的空格表示方法

    两个quad空格 a \qquad b 两个m的宽度 quad空格 a \quad b 一个m的宽度 大空格 a\ b 1/3m宽度 中等空格 a\;b 2/7m宽度 小空格 a\,b 1/6m宽度 ...

  7. 关于Google 圆角 高光 高宽 自适应 按钮

    最近看了张鑫旭老师关于Google搜索按钮的博客,感觉启示颇多.下面我就详说一下这个按钮的代码,由于W3C新版本的更新,之前的代码会有部分累赘, 在此,我做了些修改.当然,想观摩原版的可以,狠狠的戳链 ...

  8. python之@property

    在绑定属性时,如果我们直接把属性暴露出去,虽然写起来很简单,但是,没办法检查参数,导致可以把成绩随便改: s = Student() s.score = 9999 这显然不合逻辑.为了限制score的 ...

  9. txn.go

    package clientv3 import (     "sync"     pb "github.com/coreos/etcd/etcdserver/etcdse ...

  10. MFC中listbox控件中各种属性的详解

     ListBox控件是Windows 窗体的一个空间,ListBox 控件显示一个项列表,用户可从中选择一项或多项.      如果项总数超出可以显示的项数,则自动向 ListBox 控件添加滚动条. ...