basic.html

<!DOCTYPE html>
<html lang="zh-cn">
  <meta charset="utf-8">
  <style>

  </style>
  <body>
    <svg width="1400" height="1000"></svg>

    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script>
    let data = new Array(10).fill(0).map(() => {
        return (1 + Math.random() * 99).toFixed(0)
    })
    let dataName = ['a','b','c','d','e','f','g','h','i','j']

    let barWidth = 50

    // 绘制x轴
    let x = d3.scaleLinear() // 线性比例尺
              .domain([0,100]) // 定义域
              .range([20,1020]) // 值域
    let xAxis = g => g.call(d3.axisBottom(x).ticks(10))


    let y = d3.scaleBand()
              .domain(dataName)
              .range([20, 520])
    let yAxis = g => g.call(d3.axisRight(y).tickSizeOuter(0))

    let svg = d3.select("svg")
    svg.append('g').call(xAxis)
    svg.append('g').call(yAxis)

    // 绘制柱形
    let barGroup = svg.append('g').selectAll('rect')
       .data(data).enter()
       .append('rect')
       .attr('x', 20)
       .attr('y', (d,i) => {
          return i * (500 / 10) + 20
       })
       .attr('width', 0)
       .transition().duration(1000)
       .attr('width', (d) => {
           return d * 10
       })
       .attr('height', barWidth - 10)
       .attr("fill","steelblue")

    // 绘制为文本
    let textGroup = svg.append('g').selectAll('text')
       .data(data).enter()
       .append('text')
       .attr('x', (d) => {
           return (d * 10) + 25
       })
       .attr('dx', (d) => {
           return -10
       })
       .attr('y', (d,i) => {
          return i * (500 / 10) + 50
       })
       .text((d) => {
           return d
       })
       .attr('font-size', '0px')
       .transition().delay(1000)
       .attr('font-size', '30px')
       .attr("fill","#fff")
       .attr("stroke","steelblue")
       .attr('text-anchor', 'end')
    </script>
</body>
</html>