community/tools/d3-js-intro

D3.js 是一个强大的 JavaScript 库，用于数据可视化。在社区工具区，我们为您提供了 D3.js 的入门教程，帮助您快速上手。

入门教程

安装 Node.js 和 npm
D3.js 需要 Node.js 和 npm 来进行安装。您可以从官网下载并安装 Node.js，然后通过 npm 安装 D3.js。

创建 HTML 文件
创建一个 HTML 文件，并在其中引入 D3.js 库。

<!DOCTYPE html>
<html>
<head>
    <title>D3.js 入门</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <div id="chart"></div>
    <script>
        // D3.js 代码
    </script>
</body>
</html>

编写 D3.js 代码
在 HTML 文件的 <script> 标签中编写 D3.js 代码，用于创建图表。

const data = [10, 20, 30, 40, 50];

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

const bar = svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("width", d => d * 10)
    .attr("height", 30)
    .attr("x", (d, i) => i * 50)
    .attr("y", 50);

运行 HTML 文件
使用浏览器打开 HTML 文件，即可看到生成的图表。

扩展阅读

D3.js 官方文档

希望这个入门教程能帮助您快速上手 D3.js。如果您有任何疑问，欢迎在社区中提问。