d3.js嵌套数据更新html表中的线条图

D3.js 是一个强大的 JavaScript 库，用于创建数据驱动的文档。它可以让你使用 HTML、SVG 和 CSS 将数据绑定到 DOM 上，并将数据驱动的转换应用于文档。嵌套数据是指数据结构中包含子项的数据，这在处理层次结构或分组数据时非常常见。

基础概念

在 D3.js 中，嵌套数据通常是指具有父子关系的数据结构。例如，一个组织结构可能包含部门，每个部门又包含员工。在 D3.js 中，这种数据结构可以通过嵌套数组或对象来表示。

优势

灵活性：D3.js 提供了丰富的 API 来处理和可视化复杂的数据集。
数据驱动：D3.js 的核心理念是将数据直接绑定到 DOM 元素上，使得数据的更新可以自动反映在视图上。
强大的选择器：D3.js 的选择器类似于 jQuery，但功能更强大，可以方便地选择和操作 DOM 元素。

类型

D3.js 支持多种图表类型，包括：

折线图
柱状图
饼图
树状图
网络图等

应用场景

D3.js 可以应用于各种数据可视化场景，例如：

数据报告
仪表板
科学可视化
地理信息系统等

更新 HTML 表中的线条图

假设我们有一个嵌套数据结构，表示不同年份的销售数据，我们想要更新一个 HTML 表中的线条图来反映这些数据的变化。

数据示例

{
  "years": [
    {
      "year": 2020,
      "sales": [
        {"month": "Jan", "value": 30},
        {"month": "Feb", "value": 80},
        // ... 其他月份
      ]
    },
    {
      "year": 2021,
      "sales": [
        {"month": "Jan", "value": 40},
        {"month": "Feb", "value": 90},
        // ... 其他月份
      ]
    }
    // ... 其他年份
  ]
}

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>D3.js Nested Data Line Chart</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <style>
    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 2px;
    }
  </style>
</head>
<body>
  <svg width="800" height="400"></svg>
  <script>
    const data = {
      "years": [
        // ... 上面的数据示例
      ]
    };

    const svg = d3.select("svg");
    const margin = { top: 20, right: 30, bottom: 30, left: 40 };
    const width = +svg.attr("width") - margin.left - margin.right;
    const height = +svg.attr("height") - margin.top - margin.bottom;

    const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);

    const x = d3.scaleBand()
      .rangeRound([0, width])
      .padding(0.1)
      .domain(data.years.map(d => d.year));

    const y = d3.scaleLinear()
      .rangeRound([height, 0]);

    const line = d3.line()
      .x(d => x(d.year))
      .y(d => y(d.value));

    g.append("g")
      .attr("transform", `translate(0,${height})`)
      .call(d3.axisBottom(x));

    g.append("g")
      .call(d3.axisLeft(y));

    data.years.forEach(yearData => {
      y.domain([0, d3.max(yearData.sales, d => d.value)]);
      g.append("path")
        .datum(yearData.sales)
        .attr("class", "line")
        .attr("d", line);
    });
  </script>
</body>
</html>

可能遇到的问题及解决方法

数据更新不反映在图表上：确保在数据更新后重新调用相关的 D3.js 方法来更新图表。例如，使用 data() 方法重新绑定数据，并使用 enter(), update(), exit() 方法来处理数据的进入、更新和退出。
坐标轴不更新：在数据更新后，需要重新计算坐标轴的比例尺（scale）和域（domain），并重新绘制坐标轴。
线条图重叠：确保每个线条图使用唯一的类名或 ID，以便可以单独选择和更新它们。