D3横向柱状图

 

const svg = d3.select('#barBox')

  // 外容器宽高

  const width = svg.attr('width')

  const height = svg.attr('height')

  // 外边距

  const margin = {top: 50, right: 50, bottom: 50, left: 80}

  // 内容器宽高

  const innerWidth = width - margin.right - margin.left

  const innerHeight = height - margin.top - margin.bottom

  // 横向比例尺

  const xScale = d3.scaleLinear().domain([0, d3.max(data, d => d.value)]).range([0, innerWidth])

  const xAxis = d3.axisBottom(xScale)

  // 纵向比例尺

  const yScale = d3.scaleBand().domain(data.map(d => d.name)).range([0, innerHeight]).padding(0.5)

  const yAxis = d3.axisLeft(yScale)

  // 添加图形容器

  const g = svg.append('g').attr('transform', `translate(${margin.left}, ${margin.top})`)

  g.append('g').call(xAxis).attr('transform', `translate(0, ${innerHeight})`)

  g.append('g').call(yAxis)

  g.selectAll('.barItem')

  .data(data)

  .enter()

  .append('rect')

  .attr('class', 'barItem')

  .attr('width', d => xScale(d.value))

  .attr('height', yScale.bandwidth())

  .attr('y', d => yScale(d.name))

  .attr('fill', 'green')

  .attr('opacity', .8)