其他分享
首页 > 其他分享> > 基于d3的带轴的柱线图

基于d3的带轴的柱线图

作者：互联网

来源

https://iowiki.com/d3js/
https://www.d3js.org.cn/document/

总结

轴在左下角的对齐

纵轴比例尺渲染的最大高度 = 横轴在y方向的偏移量

横轴上刻度的间隔

本例中横轴使用的是离散比例尺，有padding()方法可以用来调整刻度间的间隔。
image

本例中使刻度的内外间隔保持一致。

csv数据

长这个样子
image

源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script>
      const svgWidth = 600,
        svgHeight = 400,
        margin = 120,
        axisWidth = svgWidth - margin,
        axisHeight = svgHeight - margin;
      const svg = d3
        .select('body')
        .append('svg')
        .attr('height', svgHeight)
        .attr('width', svgWidth);

      // 纵轴比例尺
      const yScale = d3.scaleLinear().range([axisHeight, 0]);
      // 横轴比例尺
      const xScale = d3.scaleBand().range([0, axisWidth]).padding(0.4);

      // 创建组元素，调整图表在svg中的位置
      const g = svg.append('g').attr('transform', 'translate(50, 50)');

      d3.csv('../bar_data.csv').then((data) => {
        xScale.domain(data.map((d) => d.year));
        yScale.domain([0, d3.max(data, (d) => d.value)]);

        // 添加横轴
        g.append('g')
          .attr('transform', `translate(0, ${axisHeight})`)
          .call(d3.axisBottom(xScale));
        // 添加纵轴
        g.append('g').call(d3.axisLeft(yScale));

        // 添加柱形
        g.selectAll('.bar')
          .data(data)
          .enter()
          .append('rect')
          .attr('class', 'bar')
          .attr('x', (d) => xScale(d.year))
          .attr('y', (d) => yScale(d.value))
          .attr('width', xScale.bandwidth())
          .attr('height', (d) => axisHeight - yScale(d.value))
          .attr('fill', 'green');
      });
    </script>
  </body>
</html>

标签：线图,基于,const,attr,xScale,data,d3,append
来源： https://www.cnblogs.com/zoexu/p/15627292.html