D3.js 柱形图数据更新

<!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 () {
              let updateRect = svg.selectAll('rect')
                .data(dataset);
              let enterRect = updateRect.enter();
              let exitRect = updateRect.exit();
              updateRect.attr('fill', 'steelblue')
                .attr('x', function (d, i) {
                  return padding.left + i * rectStep;
                })
                .attr('y', function (d) {
                  return height - padding.bottom - d;
                })
                .attr('width', rectWidth)
                .attr('height', function (d) {
                  return d;
                })
              enterRect.append('rect')
                .attr('fill', 'steelblue')
                .attr('x', function (d, i) {
                  return padding.left + i *rectStep;
                })
                .attr('y', function (d) {
                  return height - padding.bottom -d;
                })
                .attr('width', rectWidth)
                .attr('height', function (d) {
                  return d;
                });
                exitRect.remove();
              let updateText = svg.selectAll('text')
                .data(dataset);
              let enterText = updateText.enter();
              let exitText = updateText.exit();
              updateText.attr('fill', 'white')
                .attr('font-size', '14px')
                .attr('text-anchor', 'middle')
                .attr('x', function (d, i) {
                  return padding.left + i * rectStep;
                })
                .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')
                .attr('x', function (d, i) {
                  return padding.left + i * rectStep;
                })
                .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>
D3.js 柱形图数据更新

猜你喜欢
