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

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

转载于:https://www.cnblogs.com/feiquan/p/10759393.html

使用d3.v5实现折线图与面积图相关推荐

绘制商务感十足的折线图和面积图
今天接着大家讲解一下如何使用Excel绘制折线图与面积图. 先上样图,大家可以看一下: 今天这两个图都是单系列的折线图与面积图.折线图与面积图一般都用来描述在时间序列上数据的变化情况.在一些特定的情况 ...
解决在excel绘制折线图或面积图中横坐标时间间隔不相等问题
本人在基于一些国际文件的预测绘制2020-2070碳排放的折线图时,遇到了横坐标刻度调整相关的问题.当前我有2020-2070年,以五年为间隔的碳排放值.数据如下: year value 2017 1 ...
ggplot绘制时间相关性折线图和面积图（2）
折线图和面积图属于时间相关的周期性图表,既往我们已经介绍了使用ggplot绘制简单折线图的,今天我们继续使用我们的GDP数据来进一步深入绘制折线图,数据来源于网址: http://www.icane. ...
用Echarts绘制折线图-----堆积面积图和堆积折线图
堆积折线图的作用是用于显示每一数据所占大小随时间或有序类别而变化的趋势,展示的是部分与整体的关系. 堆积面积图是在折线图中添加面积图,属于组合图形中的一种.堆积面积图又被称为堆积区域图,它强调数量随时 ...
pyecharts数据可视化—雷达图、折线图、面积图
①绘制雷达图: from pyecharts.charts import Radar from pyecharts import options as optsradar_data1 = [[4300 ...
【python数据分析（24）】Matplotlib库基本图形绘制（1）（线形图、柱状图、堆叠图、面积图、填图、饼图）
0. 前期准备: 导入三个必备的库,推荐使用jupyter notebook或者spyder编程环境 import numpy as npimport pandas as pdimport matpl ...
python画饼图柱状图_荐【python数据分析（24）】Matplotlib库基本图形绘制（1）（线形图、柱状图、堆叠图、面积图、填图、饼图）...
0. 前期准备: 导入三个必备的库,推荐使用jupyter notebook或者spyder编程环境 import numpy as np import pandas as pd import mat ...
Antd Charts 折线图（面积图）踩的坑
问题一:在多tab下包裹折线图,当切换tab后,折线图的高度会缩小,整个图缩成一团: 代码 return (<ProCard ><Procard.TabPane key=" ...
excel 折线图和面积图拼接
描述:每个柱形图上面是一年内销售的走向的折线图,柱形图是一年内该产品的销量原始数据: Step1:10种产品的一年数据列到一列中: 1.写上"=C2" 2.向右拖动 3.向下拖动 ...

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

使用d3.v5实现折线图与面积图相关推荐

最新文章

热门文章