D3.js 示例代码库

D3.js 是一个强大的JavaScript库，用于数据可视化和交互式图形。以下是一些D3.js示例代码，您可以在这里找到更多资源和教程。

基础示例

以下是一个简单的D3.js示例，展示了如何使用SVG创建一个饼图。

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

// 数据
const data = [30, 20, 50, 10];

// 创建SVG画布
const svg = d3.select("body").append("svg")
    .attr("width", 200)
    .attr("height", 200);

// 创建饼图
const arc = d3.arc().outerRadius(80);

// 绘制饼图
svg.selectAll("path")
    .data(data)
    .enter().append("path")
    .attr("d", arc)
    .style("fill", (d, i) => `hsl(${i * 120}, 100%, 50%)`);

进阶示例

动画和过渡

以下示例展示了如何使用D3.js为饼图添加动画和过渡效果。

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

// 数据
const data = [30, 20, 50, 10];

// 创建SVG画布
const svg = d3.select("body").append("svg")
    .attr("width", 200)
    .attr("height", 200);

// 创建饼图
const arc = d3.arc().outerRadius(80);

// 初始饼图
svg.selectAll("path")
    .data(data)
    .enter().append("path")
    .attr("d", arc)
    .style("fill", (d, i) => `hsl(${i * 120}, 100%, 50%)`);

// 动画
d3.select("svg").transition()
    .duration(1000)
    .attr("width", 300)
    .attr("height", 300)
    .attr("viewBox", "-100 -100 200 200")
    .select("path")
    .attr("d", arc)
    .attr("fill", "hsl(0, 100%, 50%)");

资源链接

更多D3.js教程和示例，请访问我们的社区教程页面。

<div><center><img src="https://cloud-image.ullrai.com/q/D3.js_Logo/" alt="D3.js Logo"/></center></div>