d3.js v4入门之——简单的柱状图

最新推荐文章于 2021-04-23 16:25:00 发布

XSemperFI

最新推荐文章于 2021-04-23 16:25:00 发布

阅读量195

点赞数

分类专栏：前端文章标签： svg d3.js js

本文链接：https://blog.csdn.net/XSemperFI/article/details/104384098

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

预备内容

深入理解 SVG 系列（一） —— SVG 基础
 深入理解 SVG 系列（二） —— SVG 坐标系统

注意：SVG 中，x 轴的正方向是水平向右，y 轴的正方向是垂直向下的。

柱状图

<!--
@author Semper_Fi
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <title></title>
    <style>
    </style>
</head>

<body>
    <svg>
    </svg>

</body>
<script>
    var rectHeight = 20; // 柱体的宽度
    var rectSet = [ 100 , 200 , 170 , 130 , 50 ]; // 柱体的长度

    var svg = d3.select("body").select("svg");
    
    svg.selectAll("rect")
        .data(rectSet)
        .enter()
        .append("rect")
        .attr("x",20)
        .attr("y", function(val, index){
            return index * rectHeight;
        })
        .attr("width", function(val){
            return val;
        })
        .attr("height", rectHeight - 2)
        .attr("fill", "blue");

    svg.selectAll("rect")   //选择svg内所有的矩形
        .data(rectSet)  //绑定数组
        .append("rect") //添加同数组长度相同数量的矩形元素
</script>
</html>

等同于svg中的

<!DOCTYPE html>
<html>
<body>

<svg>
  <rect x="20" y="20" width="100" height="18" style="fill:blue" />
  <rect x="20" y="40" width="120" height="18" style="fill:blue" />
  <rect x="20" y="60" width="170" height="18" style="fill:blue" />
  <rect x="20" y="80" width="50" height="18" style="fill:blue" />
</svg>
 
</body>
</html>

实现效果

在这里插入图片描述

XSemperFI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
d3.js v4入门之——简单的柱状图

预备内容深入理解 SVG 系列（一） —— SVG 基础深入理解 SVG 系列（二） —— SVG 坐标系统注意：SVG 中，x 轴的正方向是水平向右，y 轴的正方向是垂直向下的。柱状图<!DOCTYPE html><html><head> <meta charse...
复制链接

扫一扫

专栏目录