d3.js——面积图表的制作

最新推荐文章于 2024-04-07 07:12:12 发布

AryaoO

最新推荐文章于 2024-04-07 07:12:12 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发——D3 前端开发基础文章标签： d3.js javascript d3.svg.line d3.svg.area 绘制面积图表

本文链接：https://blog.youkuaiyun.com/Selina_Chan/article/details/51161779

本文通过d3.js库详细介绍了如何制作面积图表，包括关键的d3.svg.line和d3.svg.area函数的运用，展示了具体的代码实现过程及运行后的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在上一篇的文章里我们可以知道，线型图表的制作主要是采用了 d3.svg.line() 这个函数进行绘制的，比较线型图表的绘制方法，我们只要采用 d3.svg.area() 这个函数即可实现面积图表的绘制啦~！

具体代码实现如下啦~：

/**
 * Created by Silence_C on 2016/4/14.
 */
var width = 500,height = 200;
margin = {left :50,top:30,right:20,bottom:20}
var g_width = width-margin.left- margin.right,
    g_height = height-margin.top-margin.bottom;

var svg = d3.select("#container")
    .append("svg")
    .attr("width",width)
    .attr("height",height)

var g = d3.select("svg")
    .append("g")
    .attr("transform","translate("+margin.left+","+margin.top+")")

var data = [1,3,5,7,8,4,3,7];
//设置比例缩放
var scale_x = d3.scale.linear()
    .domain([0,data.length-1])
    .range([0,g_width])
var scale_y = d3.scale.linear()
    .domain([0,d3.max(data)])