d3中json怎么调用

D3.js 中如何调用 JSON 数据：从基础到实践的完整指南

在数据可视化领域，D3.js（Data-Driven Documents）以其强大的数据绑定和 DOM 操作能力著称，而 JSON（JavaScript Object Notation）作为轻量级的数据交换格式，因其结构清晰、易于解析，成为 D3.js 中最常用的数据源之一，本文将详细介绍 D3.js 中调用 JSON 数据的完整流程，从基础方法到进阶技巧,帮助你数据驱动的可视化核心逻辑。

D3.js 调用 JSON 数据的核心方法：`d3.json()`

D3.js 提供了 d3.json() 方法专门用于加载和解析 JSON 数据，该方法属于 D3 的“加载模块”（d3-fetch），本质是对浏览器原生 fetch API 的封装，支持异步加载，并返回一个 Promise 对象,便于处理加载成功或失败的情况。

基本语法

d3.json(url[, options]).then(callback).catch(errorCallback);

url：JSON 文件的路径（可以是本地文件或远程 URL，注意浏览器跨域限制）。
options：可选配置项（如 headers、method 等，通常较少使用）。
callback：数据加载成功后的回调函数，参数为解析后的 JSON 数据。
errorCallback：数据加载失败时的回调函数，参数为错误信息。

简单示例：加载本地 JSON 文件

假设项目目录下有一个 data.json 文件,内容如下：

[
  {"name": "北京", "value": 2154},
  {"name": "上海", "value": 2424},
  {"name": "广州", "value": 1840},
  {"name": "深圳", "value": 1768}
]

通过 d3.json() 加载并打印数据的代码如下：

d3.json("data.json")
  .then(function(data) {
    console.log("加载成功:", data);
    // 此处可调用 D3 的可视化方法（如 d3.select、d3.scale 等）
  })
  .catch(function(error) {
    console.error("加载失败:", error);
  });

JSON 数据加载的完整流程：从文件到可视化

d3.json() 仅负责数据加载，真正的可视化需要结合 D3 的其他模块（如选择器、比例尺、形状生成器等）,以下是完整的流程拆解：

准备 JSON 数据源

JSON 数据可以是本地文件（需通过 Web 服务器访问，因浏览器安全限制，直接打开 HTML 文件无法加载本地 JSON），也可以是远程 API 接口（需支持 CORS 跨域），使用公开的 COVID-19 数据 API：

const apiUrl = "https://d3js.org/us-10k.json"; // D3 官方示例数据

加载数据并处理

加载数据后，通常需要对数据进行预处理（如过滤、转换、计算等），假设 JSON 数据为：

{"nodes": [{"id": 1}, {"id": 2}], "links": [{"source": 1, "target": 2}]}

预处理代码：

d3.json(apiUrl)
  .then(function(data) {
    // 提取节点和链接数据
    const nodes = data.nodes;
    const links = data.links;
    console.log("节点数据:", nodes);
    console.log("链接数据:", links);
    return { nodes, links }; // 返回处理后的数据
  })
  .then(function(processedData) {
    // 基于处理后的数据绘制可视化
    drawVisualization(processedData);
  });

绘制可视化（以简单柱状图为例）

结合 D3 的选择器、比例尺、坐标轴等模块，将 JSON 数据映射到 DOM 元素：

function drawVisualization(data) {
  // 1. 设置画布尺寸和边距
  const width = 600;
  const height = 400;
  const margin = { top: 20, right: 20, bottom: 40, left: 40 };
  // 2. 创建 SVG 容器
  const svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);
  // 3. 定义比例尺
  const xScale = d3.scaleBand()
    .domain(data.map(d => d.name)) // 从 JSON 数据中提取名称
    .range([margin.left, width - margin.right])
    .padding(0.1);
  const yScale = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)]) // 从 JSON 数据中提取最大值
    .range([height - margin.bottom, margin.top]);
  // 4. 绘制柱状图
  svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", d => xScale(d.name))
    .attr("y", d => yScale(d.value))
    .attr("width", xScale.bandwidth())
    .attr("height", d => height - margin.bottom - yScale(d.value))
    .attr("fill", "steelblue");
  // 5. 添加坐标轴（可选）
  svg.append("g")
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(xScale));
  svg.append("g")
    .attr("transform", `translate(${margin.left},0)`)
    .call(d3.axisLeft(yScale));
}

进阶技巧：处理复杂数据与异步加载

嵌套 JSON 数据的解析

实际项目中，JSON 数据可能是嵌套结构（如分类数据、层级数据）。

{
  "category": "城市人口",
  "data": [
    {"city": "北京", "population": 21540000, "growth": 2.1},
    {"city": "上海", "population": 24240000, "growth": 1.8}
  ]
}

解析时需通过属性名逐层访问：

d3.json("nested-data.json")
  .then(function(data) {
    const cities = data.data; // 获取嵌套的数组数据
    cities.forEach(d => {
      console.log(`${d.city}: 人口${d.population}万，增长率${d.growth}%`);
    });
  });

异步加载多个 JSON 文件

若需同时加载多个 JSON 文件（如主数据+配置文件），可使用 Promise.all：

const dataUrl = "main-data.json";
const configUrl = "config.json";
Promise.all([d3.json(dataUrl), d3.json(configUrl)])
  .then(function([data, config]) {
    console.log("数据:", data);
    console.log("配置:", config);
    // 结合数据和配置绘制可视化
    drawWithConfig(data, config);
  })
  .catch(function(error) {
    console.error("部分数据加载失败:", error);
  });