当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 使用d3.v5实现折线图与面积图

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

2019年04月24日  | 移动技术网IT编程  | 我要评论

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>

 

#container{
    background: #ddd;
    width: 500px;
    height: 250px;
}

path{
    fill: none;
    stroke: steelblue;
    stroke-width: 2;
}

.domain ,.tick line{
    stroke:gray;
    stroke-width: 1;
}
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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网