效果图：

条形图：

目录结构：

<!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 rect{

    fill:#339999;

}

svg rect:hover {

    cursor: pointer;

    fill: #66cccc;

}

style.css

year,population

1953,5.94

1964,6.95

1982,10.08

1990,11.34

2000,12.66

2010,13.40

data.csv

/垂直Bar，加刻度

d3.csv("Data/data.csv",function (d) {

    return {

        // year: new Date(+d.year, 0, 1), // convert "Year" column to Date

        year: d.year+"年",

        population: +d.population // convert "population" column to number

    };

}).then(function (data) {

    console.log(data);

    var //data=[1,8,5,6,8,9,3,5,2,20],

        width=1000,

        height=500,

        margin={left:30,top:30,right:30,bottom:30},

        svg_width=width+margin.left+margin.right,

        svg_height=height+margin.top+margin.bottom;

    //离散缩放 population=>[0,width]

    var scale_x=d3.scaleBand()

        .domain(data.map(function (d) {

            return d.year;

        }))

        .range([0,width])

        .padding(0.1);

    //线性缩放

    var scale_y=d3.scaleLinear()

        .domain([0,d3.max(data,function (d) {

            return d.population;

        })])

        .range([height,0])

    var svg=d3.select("#container")

        .append("svg")

        .attr("width",svg_width)

        .attr("height",svg_height)

    var chart=svg.append("g")

        .attr("transform","translate("+margin.left+","+margin.top+")");

    var x_axis_color="steelblue",

        y_axis_color="steelblue";

    var x_axis=chart.append('g')

        .call(d3.axisBottom(scale_x))

        .attr("transform","translate(0,"+height+")");

    x_axis.selectAll("path")

        .attr("stroke",x_axis_color)

    x_axis.selectAll("line")

        .attr("stroke",x_axis_color)

    x_axis.selectAll("text")

        .attr("font-size",'2em')

    var y_axis=chart.append('g')

        .call(d3.axisLeft(scale_y));

    y_axis.selectAll("path")

        .attr("stroke",y_axis_color)

    y_axis.selectAll("line")

        .attr("stroke",y_axis_color)

    y_axis.selectAll("text")

        .attr("font-size",'2em')

    //Y轴注解

    chart.append("text")

        .text("(亿)")

        // .attr("text-anchor","end")

        // .attr("transform","rotate(-90)")

        .attr("dy","1em")

    //X轴注解

    chart.append("text")

        .text("(年)")

        // .attr("text-anchor","end")

        .attr("transform","translate("+width+","+height+")")

        .attr("dy","1em")

    var bar=chart.selectAll(".bar")

        .data(data)

        .enter()

        .append("g")

        .attr("transform",function (d,i) {

            return "translate("+scale_x(d.year)+",0)"

        })

    bar.append("rect")

        .attr("y",function (d) {

            return scale_y(d.population);

        })

        .attr("height",function (d) {

            return height-scale_y(d.population);

        })

        .attr("width",scale_x.bandwidth() )

        .attr("class",".rect")

    bar.append("text")

        .text(function (d) {

            return d.population+"亿";

        })

        .attr("y",function (d) {

            return scale_y(d.population);

        })

        .attr("x",scale_x.bandwidth() /2)

        .attr("dy","1em")

        .style("text-anchor","middle")

        .style("fill","white")

})

index.js

 参考教程：https://www.imooc.com/learn/103

使用d3.v5实现条形图的更多相关文章

  1. 使用d3.v5实现饼状图

    效果图: 饼状图: 目录结构: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  2. 使用d3.v5实现折线图与面积图

    d3最新是V5版的,比起V2的API变动了不少,写下我实现过程 效果图: 面积图: 折线图: 目录结构: <!DOCTYPE html> <html lang="en&qu ...

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

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

  4. D3(v5) in TypeScript 坐标轴之 scaleBand用法

    在学习d3时候,发现在TS中实现D3的坐标轴中遇到一些错误,而这些错误却不会存在于js(因为ts的类型检查)写法中,因此做下笔记: import * as d3 from 'd3';import * ...

  5. Vue整合d3.v5.js制作--柱状图(rect)

    先上效果图: 图中柱状图变成纯蓝色是鼠标滑动过的颜色(颜色可改,本人配色能力十分的强,建议直接用默认设置即可 ( ᖛ ̫ ᖛ )ʃ)) 1.环境说明 Vue版本:"vue": &q ...

  6. Vue整合d3.v5.js制作--折线图(line)

    先上效果图(x轴固定为时间轴): 图中出现的悬浮框是鼠标悬停效果 1.环境说明: vue版本:"vue": "^2.5.2" d3版本:"d3&quo ...

  7. ASP.NET+d3.js实现Sqlserver数据库的可视化展示

    效果: 数据库端: 前端展示: 实现原理: 1.在数据段建立两个存储过程 queryUserAnsawer(id) 根据用户ID返回每一题的得分,主要是bcp exe时不能直接在sqlserver中执 ...

  8. 使用D3.js构建实时图形

    首先你需要在计算机上安装Node和npm. 数据的可视化表示是传递复杂信息的最有效手段之一,D3.js提供了创建这些数据可视化的强大工具和灵活性. D3.js是一个JavaScript库,用于使用SV ...

  9. 使用JavaScript和D3.js实现数据可视化

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由独木桥先生发表于云+社区专栏 介绍 D3.js是一个JavaScript库.它的全称是Data-Driven Documents(数据 ...

随机推荐

  1. Spring Cloud Zuul 限流详解（附源码）（转）

    在高并发的应用中,限流往往是一个绕不开的话题.本文详细探讨在Spring Cloud中如何实现限流. 在 Zuul 上实现限流是个不错的选择,只需要编写一个过滤器就可以了,关键在于如何实现限流的算法. ...

  2. SSM-Spring-18：Spring中aspectJ的XML版

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- aspectJ的xml版是开发中最常用的: 下面直接已案例入手,毕竟繁琐的日子不多了 案例:两个接口,俩个实现 ...

  3. 浅谈前端中的mvvm与mvc

    用了vue这么久,却没有认真的关注mvvm与mvc,着实汗颜.趁着周末刚好看了一下网上的文章还有书籍,简单的谈一下我的理解. -以下图片均摘自网络. 一.MVC 特点:单项通讯 视图(View):用户 ...

  4. struts2(二)---ModelDriven模型驱动

    这篇文章是在上一篇文章(http://blog.csdn.net/u012116457/article/details/48194905)的基础上写的,大家可以先快速阅读一下上一篇. 这篇文章用来写一 ...

  5. 23.app后端如何架设文件系统

    现在app展现内容的形式多种多样的,有文字,图片,声音,视频等等,其中文件占了一个很大的比重.随着app不断运营,文件会越来越多,占用的磁盘空间也不断增大,架设一套高效的文件系统,对于整个app架构有 ...

  6. Android base-adapter-helper 源码分析与扩展

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/44014941,本文出自:[张鸿洋的博客] 本篇博客是我加入Android 开源项 ...

  7. 【bzoj 3131】[Sdoi2013]淘金

    Description 小Z在玩一个叫做<淘金者>的游戏.游戏的世界是一个二维坐标.X轴.Y轴坐标范围均为1..N.初始的时候,所有的整数坐标点上均有一块金子,共N*N块.    一阵风吹 ...

  8. BZOJ1854: [Scoi2010]游戏 二分图

    很早之前写的题了,发现没有更博,想了想,更一发出来. Orz ljss 这是冬令营上的例题...之后,我推出来了一种时间复杂度没有问题,空间复杂度没有问题的方法,额(⊙o⊙)…和给出的正解不同,但是能 ...

  9. Windows上安装配置SSH教程（3）——在Windows系统上安装与配置WinSCP

    知识点汇总:http://www.cnblogs.com/feipeng8848/p/8559803.html -------------------- 首先确认客户端已经安装了OpenSSH.安装方 ...

  10. CTF中常见的加解密（经典）

    今天一早起来,就要去做早操,心里苦呀! 但是不影响我为未来的学弟学妹整理资料的心情呀!希望我的一些拙见能够帮助到学弟学妹! 永远爱你们的 ---- 新宝宝 ASCII编码 ASCII 码使用指定的7 ...