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. 利用Swagger2自动生成对外接口的文档

    一直以来做对外的接口文档都比较原始,基本上都是手写的文档传来传去,最近发现了一个新玩具,可以在接口上省去不少麻烦. swagger是一款方便展示的API文档框架.它可以将接口的类型最全面的展示给对方开 ...

  2. PAT1100:Mars Numbers

    1100. Mars Numbers (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue People o ...

  3. SSIS 检查点

    在SSIS中,检查点实际上是一个记录系统,用于记录控制流中Task组件的执行状态.通过合理地配置Checkpoint,在Package运行出错之后,重新执行Package,可以跳过上一次已经成功执行的 ...

  4. VirtualBox不能为虚拟电脑打开一个新任务——The VirtualBox kernel modules do not match this version of VirtualBox

    本文由荒原之梦原创,原文链接:http://zhaokaifeng.com/?p=608 一.问题产生的环境 物理机操作系统:Ubuntu 17.10 (Ubuntu版本查看命令: cat /etc/ ...

  5. Hibernate Validator 6.0.9.Final - JSR 380 Reference Implementation: Reference Guide

    Preface Validating data is a common task that occurs throughout all application layers, from the pre ...

  6. Spring Batch 专题

    如今微服务架构讨论的如火如荼.但在企业架构里除了大量的OLTP交易外,还存在海量的批处理交易.在诸如银行的金融机构中,每天有3-4万笔的批处理作业需要处理.针对OLTP,业界有大量的开源框架.优秀的架 ...

  7. JavaScript设计模式Item 1—多态

    多态的实际含义是:同一操作作用于不同的对象上面,可以产生不同的解释和不同的执行结果.换句话说,给不同的对象发送同一个消息的时候,这些对象会根据这个消息分别给出不同的反馈. 从字面上来理解多态不太容易, ...

  8. Windows下Pytesser安装

    安装流程   详细步骤 安装PIL 32位机器:去到PIL官网进行安装 64位机器:建议使用Pillow代替PIL,PIL官网的安装包在64位机器下无法找到,安装Pillow也非常简单,使用pip就可 ...

  9. 在echarts里在geojson绘制的地图上展示散点图（气泡）、线集。

    先来要实现的效果图: 下方图1是官网的案例:http://www.echartsjs.com/gallery/editor.html?c=scatter-map 下图2是展示气泡类型为pin的效果: ...

  10. 「CodeChef Dec13 REALSET」 Petya and Sequence 循环卷积

    题目大意: 传送门 T组询问. 每组给一个数组,询问该数组是否循环移位线性无关,输出YES或NO. 题解: LCA冬令营有讲……然而当时…… 并不知道如何计算一个数组是否循环移位线性无关……网上也没有 ...