d3最新是V5版的，比起V2的API变动了不少，写下我实现过程

效果图：

面积图：

折线图：

目录结构：

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

#container{

    background: #ddd;

    width: 500px;

    height: 250px;

}

path{

    fill: none;

    stroke: steelblue;

    stroke-width: 2;

}

.domain ,.tick line{

    stroke:gray;

    stroke-width: 1;

}

style.css

var width=500,height=250,

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

    g_width=width-margin.left-margin.right,

    g_height=height-margin.top-margin.bottom;

//svg

d3.select("#container").append("svg")

    //width,height

    .attr("width",width)

    .attr("height",height)

var g=d3.select("svg")

    .append("g")

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

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

//Scale

var scale_x=d3.scaleLinear()

    .domain([0,data.length-1])

    .range([0,g_width]);

var scale_y=d3.scaleLinear()

    .domain([0,d3.max(data)])

    .range([g_height,0]);

//画线函数

var line_generator= d3.line()

    .x(function (d,i) {

        return scale_x(i);

    })

    .y(function (d) {

        return scale_y(d);

    })

    .curve(d3.curveMonotoneX)

    // .curve(d3.curveMonotoneX) // apply smoothing to the line

//画路径

g.append("path")

    .attr("d",line_generator(data)) //d="M1,0L20,40.....  d-path data

// //画面积函数

// var area_generator= d3.area()

//     .x(function (d,i) {

//         return scale_x(i);

//     })

//     .y0(g_height)

//     .y1(function (d) {

//         return scale_y(d);

//     })

//     .curve(d3.curveMonotoneX)

//

// //画面积

// g.append("path")

//     .attr("d",area_generator(data)) //d="M1,0L20,40.....  d-path data

//     .style("fill","steelblue")

//X轴

g.append("g")

    .call(d3.axisBottom(scale_x))

    .attr("transform","translate(0,"+g_height+")")

//Y轴

g.append("g")

    .call(d3.axisLeft(scale_y))

//y轴文字

g.append("text")

    .text("Price($)")

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

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

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

其中，使用红色部分，注释绿色部分是面积图

　　使用绿色部分，注释红色部分是折线图

　　data数组是数据来源。

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

使用d3.v5实现折线图与面积图的更多相关文章

  1. 06. Matplotlib 2 |折线图| 柱状图| 堆叠图| 面积图| 填图| 饼图| 直方图| 散点图| 极坐标| 图箱型图

    1.基本图表绘制 plt.plot() 图表类别:线形图.柱状图.密度图,以横纵坐标两个维度为主同时可延展出多种其他图表样式 plt.plot(kind='line', ax=None, figsiz ...

  2. Python交互图表可视化Bokeh：4. 折线图| 面积图

    折线图与面积图 ① 单线图.多线图② 面积图.堆叠面积图 1. 折线图--单线图 import numpy as np import pandas as pd import matplotlib.py ...

  3. Python使用Plotly绘图工具，绘制面积图

    今天我们来讲一下如何使用Python使用Plotly绘图工具,绘制面积图 绘制面积图与绘制散点图和折线图的画法类似,使用plotly graph_objs 中的Scatter函数,不同之处在于面积图对 ...

  4. Matplotlib学习---用matplotlib画面积图（area chart）

    这里利用Nathan Yau所著的<鲜活的数据:数据可视化指南>一书中的数据,学习画图. 数据地址:http://book.flowingdata.com/ch05/data/us-pop ...

  5. javascript曲线图和面积图Line & Area chart控件功能及下载

    Line & Area chart 控件是一款新型的.可用性极强的曲线图和面积图产品.一个您网站的访问者可以放大他感兴趣的一段区域,打开和关闭数值气球,并可显示和隐藏图表.您能创建简单.堆积. ...

  6. 第四篇：R语言数据可视化之折线图、堆积图、堆积面积图

    折线图简介 折线图通常用来对两个连续变量的依存关系进行可视化,其中横轴很多时候是时间轴. 但横轴也不一定是连续型变量,可以是有序的离散型变量. 绘制基本折线图 本例选用如下测试数据集: 绘制方法是首先 ...

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

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

  8. pyecharts v1 版本 学习笔记 折线图,面积图

    折线图 折线图 基本demo import pyecharts.options as opts from pyecharts.charts import Line c = ( Line() .add_ ...

  9. [Swift通天遁地]三、手势与图表-(13)制作美观简介的滚动图表：折线图表、面积图表、柱形图表、散点图表

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

随机推荐

  1. Map Reduce和流处理

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由@从流域到海域翻译,发表于腾讯云+社区 map()和reduce()是在集群式设备上用来做大规模数据处理的方法,用户定义一个特定的映射 ...

  2. 怎么解决你的小程序有“bug”的问题？

    为了避免小程序在开发运行之后出现"bug"无法知晓,Fundebug研发的小程序bug监控服务作为小程序的运维中心,很好的解决了这个问题. 该插件可以监控小程序中的所有函数调用: ...

  3. 一个基于RBAC的通用权限设计清单

    RBAC即角色访问控制(Role Based Access Control) RBAC认为权限授权实际上是Who.What.How的问题.在RBAC模型中,who.what.how构成了访问权限三元组 ...

  4. python下如何安装.whl包？

    下载 .whl 包 先 pip install wheel 之后 pip install 包名字.whl 即可安装某模块包

  5. 【译】Flink + Kafka 0.11端到端精确一次处理语义的实现

    本文是翻译作品,作者是Piotr Nowojski和Michael Winters.前者是该方案的实现者. 原文地址是https://data-artisans.com/blog/end-to-end ...

  6. 连续查询（Continuous Queries）

    当数据超过保存策略里指定的时间之后,就会被删除.如果我们不想完全删除掉,比如做一个数据统计采样:把原先每秒的数据,存为每小时的数据,让数据占用的空间大大减少(以降低精度为代价). 这就需要Influx ...

  7. .net core使用Apollo做统一配置管理

    做开发这么多年,经常因配置的问题引发生产环境的bug.有些年久的项目,几百个密密麻麻的配置项,经常容易搞混,有时好几个项目有好多同样的配置项,配置工作也不厌其烦.所幸,携程开源了新一代配置中心 - A ...

  8. [Usaco2005 nov]Grazing on the Run 边跑边吃草 BZOJ1742

    分析: 首先,连续选择一段必定最优... 区间DP,f[i][j]表示从i开始,连续j个被吃掉了,并且,牛在i处,g[i][j]则表示在i+j-1处 f[i][j]可以从g[i+1][j]和f[i+1 ...

  9. [Usaco2009 Jan]安全路经Travel BZOJ1576 Dijkstra+树链剖分+线段树

    分析: Dijkstra求最短路树,在最短路树上进行操作,详情可见上一篇博客:http://www.cnblogs.com/Winniechen/p/9042937.html 我觉得这个东西不压行写出 ...

  10. 全文检索选择-------- Elasticsearch与Solr

    Elasticsearch简介* Elasticsearch是一个实时的分布式搜索和分析引擎.它可以帮助你用前所未有的速度去处理大规模数据. 它可以用于全文搜索,结构化搜索以及分析,当然你也可以将这三 ...