D3 基础 02：从零开始使用 SVG

在开始之前，确保您已经安装了 D3 库。您可以从 D3 网站下载最新版本，或使用以下命令通过 npm 安装：

npm install d3

SVG 简介

SVG（可缩放矢量图形）是一种基于 XML 的图形格式。它独立于分辨率，这意味着它可以在任何设备上缩放而不会丢失质量。SVG 非常适合创建交互式图形，因为它可以轻松地使用 JavaScript 进行操作。

SVG 的基本结构

SVG 文档由 <svg> 元素开始，然后包含一系列图形元素，例如 <path>、<rect> 和 <text>。这些元素用于创建形状、矩形和文本。

<svg width="100%" height="100%">
  <path d="M10,10 L90,90" stroke="blue" stroke-width="2" fill="none" />
  <rect x="10" y="10" width="80" height="80" stroke="red" stroke-width="2" fill="none" />
  <text x="50%" y="50%" text-anchor="middle" fill="green">Hello, world!</text>
</svg>

SVG 的优点

• 独立于分辨率：SVG 图形可以在任何设备上缩放而不会丢失质量。
• 易于操作：SVG 图形可以使用 JavaScript 轻松操作。
• 交互性强：SVG 图形可以与用户进行交互。

SVG 的缺点

• 文件大小较大：SVG 图形的文件大小通常比像素图形更大。
• 渲染速度较慢：SVG 图形在某些浏览器中的渲染速度可能较慢。

使用 D3 操作 SVG

D3 是一个 JavaScript 库，用于操作 SVG 元素。D3 提供了一组强大的工具，可以轻松地创建、更新和删除 SVG 元素。

选择 SVG 元素

要选择 SVG 元素，您可以使用 D3 的 select() 方法。该方法接受一个 CSS 选择器作为参数，并返回一个包含所选元素的集合。

var svg = d3.select("svg");

创建 SVG 元素

要创建 SVG 元素，您可以使用 D3 的 append() 方法。该方法接受一个元素名称作为参数，并返回一个新创建的元素。

var path = svg.append("path");

更新 SVG 元素

要更新 SVG 元素，您可以使用 D3 的 attr() 方法。该方法接受一个属性名称和一个值作为参数，并更新元素的属性。

path.attr("d", "M10,10 L90,90");

删除 SVG 元素

要删除 SVG 元素，您可以使用 D3 的 remove() 方法。该方法将从 DOM 中删除元素。

path.remove();

使用 D3 创建交互式图形

D3 可以轻松地创建交互式图形。例如，您可以使用 D3 来创建可缩放的条形图或饼图。您还可以使用 D3 来创建交互式地图或网络图。

创建可缩放的条形图

要创建可缩放的条形图，您可以使用 D3 的 scaleLinear() 方法来创建一个线性比例。然后，您可以使用 scaleBand() 方法来创建一个条形图的比例。最后，您可以使用 rect() 方法来创建条形。

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

var xScale = d3.scaleLinear()
  .domain([0, data.length])
  .range([0, width]);

var yScale = d3.scaleBand()
  .domain(data)
  .range([0, height]);

var bars = svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", function(d, i) { return xScale(i); })
  .attr("y", function(d) { return yScale(d); })
  .attr("width", xScale.bandwidth())
  .attr("height", function(d) { return yScale.bandwidth(); })
  .attr("fill", "blue");

创建交互式地图

要创建交互式地图，您可以使用 D3 的 geoPath() 方法来创建一个地理路径。然后，您可以使用 data() 方法来绑定数据到地理路径。最后，您可以使用 enter() 和 append() 方法来创建地图的元素。

var data = [
  {
    "country": "China",
    "population": 1429020000
  },
  {
    "country": "India",
    "population": 1393409038
  },
  {
    "country": "United States",
    "population": 331002651
  }
];

var geoPath = d3.geoPath();

var map = svg.selectAll("path")
  .data(data)
  .enter()
  .append("path")
  .attr("d", geoPath)
  .attr("fill", function(d) { return colorScale(d.population); })
  .on("mouseover", function(d) {
    tooltip.text(d.country + ": " + d.population);
    tooltip.style("visibility", "visible");
  })
  .on("mousemove", function(d) {
    tooltip.style("top", (d3.event.pageY - 10) + "px")
      .style("left", (d3.event.pageX + 10) + "px");
  })
  .on("mouseout", function(d) {
    tooltip.style("visibility", "hidden");