d3js入门

D3.js是一款基于JavaScript的数据可视化库，通过操作SVG、HTML和CSS将数据转换为动态交互图表，其核心基于数据驱动文档（Data-Driven Documents）理念，开发者可利用数据绑定、DOM操作及过渡效果构建丰富图表，学习需熟悉Web基础技术，适合定制化需求较高的可视化项目。

当数据遇见视觉艺术,D3.js（Data-Driven Documents）作为JavaScript生态中最强大的可视化工具库，已帮助数百万开发者将枯燥数据转化为交互式叙事，本文将从环境搭建到核心机制，系统化呈现数据绑定（Data Binding）、比例尺（Scales）等关键技术点，配备可直接运行的代码示例。

环境搭建三部曲

基础环境配置

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

SVG画布初始化

const svg = d3.select("body")
  .append("svg")
  .attr("width", 800)
  .attr("height", 600);

数据加载方式

CSV文件：d3.csv("data.csv")
JSON数据：d3.json("data.json")
TSV格式：d3.tsv("data.tsv")

实战：动态柱状图构建

// 数据样本
const dataset = [12, 31, 22, 17, 25, 18];
<p>// 比例尺配置
const yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, 300]);</p>
<p>// 数据绑定与元素创建
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d,i) => i*60)
.attr("y", 100)
.attr("width", 50)
.attr("height", d => yScale(d))
.style("fill", "#4CAF50");

此代码段实现：