D3.js 是一个强大的 JavaScript 库,用于创建动态的数据可视化。以下是 D3.js 的基本教程,帮助您入门。

简介

D3.js 允许您将数据绑定到 DOM 元素,并通过数据操作来改变 DOM 的结构。这使得您能够创建交互式和动态的图表。

安装

要开始使用 D3.js,首先需要在您的项目中安装它。您可以通过以下命令进行安装:

npm install d3

基本示例

以下是一个简单的 D3.js 示例,展示了如何创建一个柱状图:

const data = [30, 70, 20, 50, 80, 60];

const svg = d3.select("svg")
  .attr("width", 500)
  .attr("height", 300);

const xScale = d3.scaleBand()
  .domain(data.map((d, i) => i))
  .range([0, 500])
  .padding(0.2);

const yScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([300, 0]);

svg.selectAll("rect")
  .data(data)
  .enter().append("rect")
  .attr("x", (d, i) => xScale(i))
  .attr("y", d => yScale(d))
  .attr("width", xScale.bandwidth())
  .attr("height", d => 300 - yScale(d))
  .attr("fill", "#69b3a2");

更多资源

要了解更多关于 D3.js 的信息,您可以访问以下链接:

图片示例

柱状图示例