D3.js 是一个强大的 JavaScript 库，用于在网页上创建动态的、交互式的图表和数据可视化。以下是一些关于 D3.js 的基本指南。

快速开始

  1. 安装 D3.js 首先，你需要将 D3.js 添加到你的项目中。你可以从 D3.js 官网 下载或使用 CDN 链接。

  2. HTML 结构 在你的 HTML 文件中，添加一个 <div> 元素，用于放置图表。

    <div id="chart"></div>

  3. 引入 D3.js 在你的 HTML 文件中，引入 D3.js 库。

    <script src="https://d3js.org/d3.v6.min.js"></script>

  4. 编写代码 使用 D3.js 创建图表。

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

svg.selectAll("circle")
  .data([30, 50, 70, 90])
  .enter().append("circle")
  .attr("cx", (d, i) => i * 50)
  .attr("cy", (d) => 150 - d)
  .attr("r", 20)
  .style("fill", "blue");

图表类型

D3.js 支持多种图表类型，包括：

  • 散点图
  • 折线图
  • 柱状图
  • 饼图
  • 树状图

资源

希望这些信息能帮助你入门 D3.js！🎉

D3_js_chart