D3.js 柱形图数据更新

最新推荐文章于 2024-09-03 17:16:44 发布

蜗牛速度额

最新推荐文章于 2024-09-03 17:16:44 发布

阅读量2.1k

点赞数

分类专栏： D3.js 文章标签： D3 数据可视化柱形图

本文链接：https://blog.csdn.net/weixin_41111068/article/details/82143915

版权

D3.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

用update、enter、exit的概念添加一个功能；当数据更新时，柱形图也得跟着变化。
这里写图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    <button type='button' onclick='mysort()'>排序</button>
    <button type='button' onclick='myadd()'>增加数据</button>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
    <script>
        let dataset = [50, 43, 120, 87, 99, 167, 300];
        // svg绘制区域的宽度
        let width = 400; 
        // svg绘制区域的高度
        let height = 400; 
        // 选择body
        let svg = d3.select('body')
          // 添加svg
          .append('svg')
          // 设置svg的宽度属性
          .attr('width', width)
          // 设置svg的高度属性
          .attr('height', height);
        // 定义上下左右的边距
        let padding = {
          top: 20,
          right: 20,
          bottom: 20,
          left: 20
        };
        // 矩形所占宽度（包括百空）， 单位像素
        let rectStep = 35;
        // 矩形所占宽度（不包括百空）， 单位像素
        let rectWidth = 30;
        function draw () {
              // 获取矩形的update部分
              let updateRect = svg.selectAll('rect')
                .data(dataset);
              // 获取矩形的enter部分
              let enterRect = updateRect.enter();
              // 获取矩形的exit部分
              let exitRect = updateRect.exit();
              // 矩形的update部分的处理方法
              // 设置颜色为steelbule
              updateRect.attr('fill', 'steelblue')
              // 设置矩形的x坐标
                .attr('x', function (d, i) {
                  return padding.left + i * rectStep;
                })
                // 设置矩形的y坐标
                .attr('y', function (d) {
                  return height - padding.bottom - d;
                })
                // 设置矩形的宽度
                .attr('width', rectWidth)
                // 设置矩形的高度
                .attr('height', function (d) {
                  return d;
                })
              // 矩形的enter部分的处理方法
              // 设置矩形颜色为steelblue
              enterRect.append('rect')
                // 设置颜色为steelbule              
                .attr('fill', 'steelblue')
                // 设置矩形的x坐标
                .attr('x', function (d, i) {
                  return padding.left + i *rectStep;
                })
                // 设置矩形的y坐标
                .attr('y', function (d) {
                  return height - padding.bottom -d;
                })
                // 设置矩形的宽度
                .attr('width', rectWidth)
                // 设置矩形的高度
                .attr('height', function (d) {
                  return d;
                });
                // 矩形的exit部分的处理方法
                exitRect.remove();
              // 获取文字的update部分
              let updateText = svg.selectAll('text')
                .data(dataset);
              // 获取文字的enter部分              
              let enterText = updateText.enter();
              // 获取文字的exit部分
              let exitText = updateText.exit();
              // 设置文字填充色
              updateText.attr('fill', 'white')
                // 设置字体大小
                .attr('font-size', '14px')
                // 后续为文字设置为矩形正中间 
                .attr('text-anchor', 'middle')
                // 设置x的与矩形一样
                .attr('x', function (d, i) {
                  return padding.left + i * rectStep;
                })
                // 设置y的与矩形一样
                .attr('y', function (d) {
                  return height - padding.bottom - d;
                })
                .attr('dx', rectWidth / 2)
                .attr('dy', '1em')
                // 设置文字内容
                .text(function (d) {
                  return d;
                })
              enterText.append('text')
                // 设置文字填充色
                .attr('fill', 'white')
                // 设置字体大小
                .attr('font-size', '14px')
                // 后续为文字设置为矩形正中间 
                .attr('text-anchor', 'middle')
                // 设置x的与矩形一样
                .attr('x', function (d, i) {
                  return padding.left + i * rectStep;
                })
                // 设置y的与矩形一样
                .attr('y', function (d) {
                  return height - padding.bottom -d;
                })
                .attr('dx', rectWidth / 2)
                .attr('dy', '1em')
                .text(function (d) {
                  return d;
                });
              exitText.remove();
            }
            function mysort() {
              //数据从小到大排序
              dataset.sort(d3.ascending);
              draw();
            }
            function myadd() {
              // 添加随机数
              dataset.push(Math.floor(Math.random() * 100))
              draw()
            }
    </script>
</body>
</html>