前端数据可视化D3 ——（案例1）柱状图

最新推荐文章于 2024-03-27 20:00:41 发布

提交什么都对

最新推荐文章于 2024-03-27 20:00:41 发布

阅读量2k

点赞数 1

分类专栏：前端 #数据可视化文章标签：数据可视化 d3.js js

本文链接：https://blog.csdn.net/cuckooii/article/details/106589359

版权

本文介绍了如何使用D3.js创建数据驱动的柱状图。首先概述了D3的基本概念，然后详细分析了柱状图的实现步骤，包括设置画布、利用比例尺确定柱体尺寸、动态显示数据标签，并提供了关键代码示例。文章最后鼓励读者提问交流。

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

从本篇博客开始，我将使用D3来完成一些基础的demo，关于数据可视化方面的介绍我就不多说了，关于d3的简单介绍：

D3 的全称是（Data-Driven Documents），一个被数据驱动的文档。听名字有点抽象，说简单一点，其实就是一个 JavaScript 的函数库，主要是用来做数据可视化，将强大的可视化组件应用于需求中。

查看这个系列的代码前，请先熟悉一些d3基础知识，关于基础可移步至官网：

首先我们先来看看，要实现的柱状图的效果：

简单分析一下：

1.首先我们需要一张画布。

2.柱体由长方形构成，并且高度由数据驱动显示。

3.由于柱体的宽度和高度刚好近似铺满整个画布，所以需要用到比例尺

4.柱体上有对应数据显示，大于30的文字被标红。

下面来看一些重要的代码块：

    //线性比例尺
    const linear = d3.scaleLinear()
      .domain([0, d3.max(datalist)])
      .range([2, 398])

    //序数比例尺
    const

关注

专栏目录