36、使用 D3 构建可视化及生产部署相关要点

使用 D3 构建可视化及生产部署相关要点

1. 使用 D3 加载数据文件

在之前的操作中，我们仅使用了硬编码在 app.js 里的少量数据。现在是时候让代码处理真实数据了。可以使用 D3 的 json 函数从 Web 服务器以 JSON 格式异步获取数据（也能使用 CSV 数据）。以下是示例代码：

d3.json("data/us-space-junk.json") 
    .then(function (spaceJunkData) {
        // ... 在此构建可视化 ...
    })
    .catch(function (err) { 
        console.error("Failed to load data file."); 
        console.error(err); 
    }); 

运行这段代码后，可借助浏览器的开发者工具来探索和理解使用 D3 构建的 DOM。

2. 太空垃圾可视化代码

大部分代码如下所示：

var width = window.innerWidth; 
var height = window.innerHeight;
var earthRadius = 6371;
var earthTranslation = "translate(" + (width/2) + ", " + (height/2) + ")";
var m