D3.js v5.0 折线图

最新推荐文章于 2019-09-09 16:27:15 发布

哈利路亚阿弥陀佛么么哒

最新推荐文章于 2019-09-09 16:27:15 发布

阅读量1.8k

点赞数 1

分类专栏： D3.js 文章标签： D3.js 折线图数据可视化

D3.js 专栏收录该内容

23 篇文章 7 订阅

订阅专栏

本文详细介绍了如何使用D3.js库的最新版本v5.0创建动态和交互式的折线图，涵盖了数据绑定、坐标轴生成、线的绘制以及动态更新等关键步骤，为数据可视化提供了一个实用的教程。

摘要由CSDN通过智能技术生成

#折线图

 export default function CountyLC(id,dataset) {
  const width = 400;
  const height = 400;
  const svg = d3
    .select(id)
    .append('svg')
    .attr('width', width)
    .attr('height', height)
    .style('border', '1px dashed #ccc');
  const color = d3.scaleOrdinal(d3.schemeCategory10);
  const padding = { left: 50, right: 30, top: 20, bottom: 20 };
  const xScale = d3 // x轴比例尺
    .scaleBand()
    .domain(d3.range(dataset.length))
    .range([0, width - padding.left - padding.right]);
  const yScale = d3 // y轴比例尺
    .scaleLinear()
    .domain([0, d3.max(dataset)])
    .range([width - padding.top - padding.bottom, 0]);
  // x轴
  svg
    .append('g')
    .attr('transform', `translate(${padding.left},${height - padding.bottom})`)
    .call(d3.axisBottom(xScale));
  // y轴
  svg
    .append('g')
    .attr('transform', `translate(${padding.left},${padding.top})`)
    .call(d3.axisLeft(yScale));
  // 折线图
  const ss = svg
    .selectAll('.line')
    .data(dataset)
    .enter()
    .append('line')
    .attr('style', 'stroke:red')
    .attr('curve', 'curve')
    .attr('transform', `translate(${padding.left},${padding.bottom})`)
    .attr('x1', (_, i) => {
      return xScale(i) + xScale.step() / 2;
    })
    .attr('y1', d => {
      return yScale(d);
    })
    .attr('x2', (_, i) => {
      return i + 1 < dataset.length
        ? xScale(i + 1) + xScale.step() / 2
        : xScale(i) + xScale.step() / 2;
    })
    .attr('y2', (_, i) => {
      return i + 1 < dataset.length ? yScale(dataset[i + 1]) : yScale(dataset[i]);
    });
  const line = d3.line().curve(d3.curveCatmullRom.alpha(0));
  line(ss);

  // 圆点
  svg
    .selectAll('circle')
    .data(dataset)
    .enter()
    .append('circle')
    .attr('transform', `translate(${padding.left},${padding.bottom})`)
    .attr('cx', function(d, i) {
      return xScale(i) + xScale.step() / 2;
    })
    .attr('cy', function(d) {
      return yScale(d);
    })
    .attr('r', 5)
    .attr('fill', (_, i) => color(i));

  // 标注
  svg
    .selectAll('MyText')
    .data(dataset)
    .enter()
    .append('text')
    .attr('fill', 'black')
    .attr('transform', `translate(${padding.left},${padding.top})`)
    .attr('x', (_, i) => {
      return xScale(i) + xScale.step() / 2;
    })
    .attr('y', d => {
      return yScale(d);
    })
    .text(function(d) {
      return d;
    });
    }
    ```
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190530110533511.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzc3MDA1,size_16,color_FFFFFF,t_70)