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. SHELL脚本--expr命令全解

    bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html expr命令可以实现数值运算.数值或字符串比较.字符串匹配.字 ...

  2. 功能强大的swagger-editor的介绍与使用

    一.Swagger Editor简介 Swagger Editor是一个开源的编辑器,并且它也是一个基于Angular的成功案例.在Swagger Editor中,我们可以基于YAML等语法定义我们的 ...

  3. CentOS6.5系统挂载NTFS分区的硬盘

    下载rpmforge,下载对应的版本,就是对应CentOS版本,还有32位与64位也要对应上.rpmforge拥有4000多种CentOS的软件包,被CentOS社区认为是最安全也是最稳定的一个软件仓 ...

  4. Intent里ACTION的CALL和DIAL的区别？

    Intent在进行activity之间的跳转的时候有一种方式是通过设置ACTION的方式来进行跳转的,这个ACTION是设置在manifest文件里Intent-filter里的,我们可以通过跳转自定 ...

  5. .Net Core微服务系列--理论篇

    微服务的由来 微服务最早由Martin Fowler与James Lewis于2014年共同提出来的,但是微服务也不是一个全新的概念,它是由一系列在实践中获得成功并流行起来的概念中总结出来的一种模式, ...

  6. 玩转zookeeper命令

    zkCli 是 zookeeper 原生的与 zk服务群连接的客户端的程序. 1.如何使用zkCli,sh 连接server 与参数 2.zkCli 下的增删查改指令 与 配额 quota 1.如何使 ...

  7. Python实现批量新建SecureCRT Session

    最近因为工作需要,我需要在ssh的时候保存几千台网关的session,工作量相当大(也就是ssh的时候需要记住用户名和密码,然后还要再session选项中录入enable密码,相当繁琐),而且设备的用 ...

  8. SOA专题---Dropwizard与Spring Boot比较

    在这篇文章中我们将讨论的Java轻量级框架Dropwizard和Spring Boot的相似性和差异. 首先,这是一个选择自由和速度需要,无论你在Dropwizard和Spring Boot选择哪个, ...

  9. node.js 使用forever守护进程

    //forever的安装:npm install forever -g//使用forever启动守护进程:forever start 路径/your_app.js//关闭守护进程:forever st ...

  10. textarea去掉右下角拖拽

    /*去掉textarea右下角三角符号*/ resize : none;