当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 可视化工具D3.js教程 入门 （第五章）—— 一个简单的图表

可视化工具D3.js教程 入门 （第五章）—— 一个简单的图表

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

从这里开始  我们就将开始画一个简单的图表了

在此之前 ，最好掌握以下svg的基本知识。

一个间的的例子如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>

<svg width="100%" height="300"></svg>

</body>

<script>

    var data = [730,530,330,230,130];
    var g = d3.select('svg')// 获取svg
        .append('g')// 创建分组
        .attr('transform','translate(30,30)');// 图表距离视口的左、上距离

    var rectheight = 30;//设定矩形的高＋与下一个矩形的边距  共30px

    g.selectall('rect')
        .data(data)
        .enter()
        .append('rect')//利用enter 创建与数据个数一样的rect矩形
        .attr('x',0)//这里设定矩形左上顶点的x值
        .attr('y',function (d,i) {
            return rectheight*i;//这里设定矩形左上顶点的y值
        })
        .attr('width',function (d,i) {
            return d;//矩形宽度
        })
        .attr('height',rectheight - 5)//这里矩形实际的高度就是25  与下一个矩形的边距是5
        .style('fill','pink');//填充色

</script>

</html>

 

 

您可能感兴趣的文章:

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

相关文章:

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