Javascript 用JSON替换D3.js CSV源

编辑：根据下面的答案，为了将来的参考，原始来源是palewire

我试图通过将数据源从CSV切换到JSON来重用Mike的一堆示例

原始数据源从CSV文件加载，如下所示：

// Load external data and boot
d3.queue()
    .defer(d3.json, "http://enjalot.github.io/wwsd/data/world/world-110m.geojson")
    .defer(d3.csv, "mooc-countries.csv", function(d) { data.set(d.code, +d.total); })
    .await(ready);

function ready(error, topo) {
    if (error) throw error;

    // Draw the map
    svg.append("g")
        .attr("class", "countries")
        .selectAll("path")
        .data(topo.features)
        .enter().append("path")
            .attr("fill", function (d){
                // Pull data for this country
                d.total = data.get(d.id) || 0;
                // Set the color
                return colorScale(d.total);
            })
            .attr("d", path);
}

但我正在第二次尝试更改。延迟从JSON文件获取数据，到目前为止，我认为应该与此接近：

.defer(d3.json, "data.json", function(error, data) {
      data.forEach(function(d) {
          return {
               d.code,
               d.total;
             };
           });
         })

JSON源代码：

[
  {
    "name" : "Burkina Faso",
    "total" : 5,
    "percent" : 0.3,
    "code" : "BFA"
  },
  {
    "name" : "Democratic Republic of the Congo",
    "total" : 4,
    "percent" : 0.3,
    "code" : "COD"
  },
  {
    "name" : "Haiti",
    "total" : 8,
    "percent" : 0.3,
    "code" : "HTI"
  }
]

---

您可能正在寻找使用所选键返回一个新数组。当前的问题是

forEach

中的返回。也许你想退货

map

将对象数组转换为不同的格式，然后返回到defer函数

.defer(d3.json, "data.json", function(error, data) {
      return data.map(function(d) {
          return {
               id: d.code,
               total: d.total;
             };
           });
         })

---

你没有包括任何链接到原始块，但做了一些谷歌搜索，我想你是指py palewire。将其移植使用需要一些额外的步骤

有一个全局变量

data

，它是：

此词典包含

代码

→ <代码>总计从CSV中提取的映射，并在以后确定填充时使用。如果希望保持代码的一般结构，则需要从JSON输入中填充相同的值。这使我们直接进入下一个问题

在原始代码中，映射由此行的函数填充：

.defer(d3.csv, "mooc-countries.csv", function(d) { data.set(d.code, +d.total); })

但是，重要的是要理解此函数不是处理接收数据集的回调函数；该回调是隐藏的，由队列隐式提供。相反，这是每行CSV执行的行转换函数。这用于将每一行放入地图中。遵循D3的命名约定，函数的参数表示为

d

，指的是单个数据，而不是整个数据集

另一方面，没有行转换函数，因为JSON数据本质上是分层的，不像CSV那样基于行。您可以将该逻辑放入传递到

.await（）

的回调中：

---

其余代码仍有很大的改进空间（例如，迁移到D3V5和ES6），但上述操作可能是侵入性最小的方法，将保持大部分原始代码不变。

您的问题是什么？这是一个错误吗？如果是，错误是什么？

.defer(d3.csv, "mooc-countries.csv", function(d) { data.set(d.code, +d.total); })

d3.queue()
  .defer(d3.json, "http://enjalot.github.io/wwsd/data/world/world-110m.geojson")
  .defer(d3.json, "data.json")   // No callback, just loading.
  .await(ready);

function ready(error, topo, json) {
  if (error) throw error;

  var data = d3.map();   // Can be moved here, no need to pollute the global scope.
  json.forEach(function(d) { data.set(d.code, +d.total); });  // Populate the map.
  // ...business as usual
}