D3.js Shapes: 创建图形的快速指南

2023-11-23 03:55:36

继 Learn D3: Scales 第五篇，只是英文翻译，可修改代码的部分用静态图片替代了，想要实时交互请阅读原文。

D3.js Shapes 简介

D3.js Shapes 模块提供了一组方法，用于在 SVG 中创建基本图形，包括矩形、圆形、线条和其他几何形状。这些形状可用于创建各种可视化效果，如条形图、饼状图和散点图。

创建形状

要创建形状，首先需要选择一个 SVG 元素作为容器。然后，可以使用 D3.js 的 shape() 方法来创建所需的形状。

以下是如何创建矩形、圆形和线条的示例：

// 创建一个 SVG 容器
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

// 创建一个矩形
svg.append("rect")
  .attr("x", 10)
  .attr("y", 10)
  .attr("width", 100)
  .attr("height", 100)
  .attr("fill", "blue");

// 创建一个圆形
svg.append("circle")
  .attr("cx", 250)
  .attr("cy", 250)
  .attr("r", 50)
  .attr("fill", "red");

// 创建一条线
svg.append("line")
  .attr("x1", 100)
  .attr("y1", 100)
  .attr("x2", 400)
  .attr("y2", 400)
  .attr("stroke", "green")
  .attr("stroke-width", 2);

使用数据创建形状

还可以使用数据来创建形状。这可以通过将数据绑定到 SVG 元素来实现。

以下是如何使用数据创建条形图的示例：

// 创建一个 SVG 容器
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

// 加载数据
var data = [10, 20, 30, 40, 50];

// 将数据绑定到 SVG 元素
var bars = svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect");

// 设置条形图的属性
bars.attr("x", function(d, i) {
  return i * 100 + 10;
})
.attr("y", function(d) {
  return 500 - d * 10;
})
.attr("width", 50)
.attr("height", function(d) {
  return d * 10;
})
.attr("fill", "blue");

交互式图形

还可以使用 D3.js 创建交互式图形。这可以通过添加事件监听器来实现。

以下是如何创建可缩放的圆形的示例：

// 创建一个 SVG 容器
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

// 创建一个圆形
var circle = svg.append("circle")
  .attr("cx", 250)
  .attr("cy", 250)
  .attr("r", 50)
  .attr("fill", "red");

// 添加事件监听器
circle.on("mouseover", function() {
  d3.select(this)
    .attr("r", 100);
})
.on("mouseout", function() {
  d3.select(this)
    .attr("r", 50);
});