image.png

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8" />
  5.   <title>testD3-3-drawingDivBar</title>
  6.   <style>
  7.     .box {
  8.       border: 1px solid #ddd;
  9.     }
  10.     .bar {
  11.       display: inline-block;
  12.       width: 24px;
  13.       background-color: teal;
  14.     }
  15.   </style>
  16.   <script src="https://cdn.bootcdn.net/ajax/libs/d3/7.3.0/d3.js"></script>
  17. </head>
  18. <body>
  19. <div class="box"></div>
  20. <script>
  21.   const dataset = [3, 5, 10, 15, 20, 25];
  22.   const gutter = 16;
  24.   d3.select(".box")
  25.     .selectAll('.bar')
  26.     .data(dataset)
  27.     .enter()
  28.     .append("div")
  29.     .attr("class", "bar")
  30.     .style("height", (d) => `${d * 10}px`)
  31.     .style('margin-right', `${gutter}px`)
  32. </script>
  33. </body>
  34. </html>

柱状图

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>d3</title>
  6.   <style>
  7.     * {
  8.       box-sizing: border-box;
  9.     }
  10.     body {
  11.       width: 960px;
  12.       margin: 32px auto;
  13.     }
  14.     .bar {
  15.       width: 500px;
  16.       height: 265px;
  17.       background: rgba(0, 0, 0, 0.2);
  18.       position: relative;
  19.     }
  21.     p {
  22.       position: absolute;
  23.       margin: 0;
  24.       padding-right: 8px;
  25.       line-height: 24px;
  26.       text-align: right;
  27.       color: #fff;
  28.       font-size: 12px;
  29.     }
  30.   </style>
  31.   <script src="https://cdn.bootcdn.net/ajax/libs/d3/7.3.0/d3.js"></script>
  32. </head>
  33. <body>
  34. <div class="bar"></div>
  36. <script>
  37.   const dataset = [100, 200, 250, 300, 350, 450, 500];
  38.   const [width, height] = [16, 24]
  40.   const root = d3.select('.bar')
  41.     .selectAll('p')
  42.     .data(dataset)
  43.     .enter().append('p')
  44.     .style('left', 0)
  45.     .style('top', (d, i) => {
  46.       console.log('d', d, i)
  47.       return `${i * (width + height)}px`;
  48.     })
  49.     .style('width', (d, i) => {
  50.       return `${d}px`;
  51.     })
  52.     .style('height', `${height}px`)
  53.     .style('background', '#90f')
  54.     .text(d => d);
  56. </script>
  57. </body>
  58. </html>