javascript - d3.map() 函数未返回预期结果

Question

我正在尝试将 map.set(key, value) 用于特定数据集 - 并将其分配给变量 mapdata - 而不是在我排队 csv 时指定它。

即，而不是:

d3.queue()
  .defer(d3.json, 'counties.json')
  .defer(d3.csv, 'employmentdata.csv') function(d) {
      d3.map()
      .set(d.county, +d.rate);
   })
  .await(ready);

我想要更多类似的东西

var mapdata = d3.map(data)
  .set(function(d) {d.county}, function(d) {d.rate});

除了代码没有返回我想要的。索引是键而不是县，值包括整个数据集而不仅仅是比率。我将如何解决这个问题？

提前致谢

Answer 1

当这样使用时:

.defer(d3.csv, 'employmentdata.csv') function(d) {
      map
      .set(d.county, +d.rate);
   })

map.set 的回调函数为 csv 中的每一行调用，并且每个键和值都是单独设置的。如果你已经有一个数据数组，你可以用一个 forEach 循环来模拟它:

var data = [
  {key: "A", value: 100},
  {key: "B", value: 200},
  {key: "C", value: 300},
  {key: "D", value: 400},
  {key: "E", value: 500}
]

var map = d3.map();
data.forEach(function(d) {
  map.set(d.key, d.value);
})

console.log(map.get("A"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

我们可以扩展它来操作键和值，因为行函数或 forEach 循环允许访问数据 d ，我们实际上不需要将操作包含在一个函数中:

var data = [
  {key: "A", value: 100},
  {key: "B", value: 200},
  {key: "C", value: 300},
  {key: "D", value: 400},
  {key: "E", value: 500}
]

var map = d3.map();
data.forEach(function(d,i) {
  map.set(d.key+"-"+i, d.value*2);
})

console.log(map.get("A-0"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

你的第二个例子:

var mapdata = d3.map(data)
  .set(function(d) {d.county}, function(d) {d.rate});

这将不起作用，因为 .set只被调用一次， d没有定义。事实上，这些函数根本不会被调用。

在我们看 set 方法中的函数之前，让我们更仔细地看一下第一行:

   var mapdata = d3.map(data)

d3.map 需要两个参数，一个定义数据数组，一个定义键。由于您不提供键，因此使用默认键，索引:

d3.map([object[, key]]) <>

Constructs a new map. If object is specified, copies all enumerable properties from the specified object into this map. The specified object may also be an array or another map. An optional key function may be specified to compute the key for each value in the array. (source)

因此，您看到的行为并非来自 .set方法，但只是从默认索引:

var data = [
  {key: "A", value: 100},
  {key: "B", value: 200},
  {key: "C", value: 300},
  {key: "D", value: 400},
  {key: "E", value: 500}
]

var map = d3.map(data);

console.log(map.get(0));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

那么 .set是什么？在你的例子中做什么？它正在向您的数据集添加一个新的值键对，让我们仔细看看之前和之后的 map :

var data = [
  {key: "A", value: 100},
  {key: "B", value: 200},
  {key: "C", value: 300},
  {key: "D", value: 400},
  {key: "E", value: 500}
]

var map = d3.map(data);

console.log(map);
console.log("---------------");

map.set(function(d) { console.log(d); },
        function(d) { console.log(d); })
        
console.log(map);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

这是一个有趣的行为，不仅是 console.log s 没有在 set 方法中调用，这两个函数作为键值对添加到数组中。很容易错过(主要是由于堆栈片段的日志记录)，但这里是 map 的补充:
"$function (d) { console.log(d); }": function (d) { console.log(d); },
set 方法只会添加一个键值对，它不会修改现有的键值对(除非覆盖一个)。这就是为什么 .set 可以在行函数或 forEach 循环中工作，但在设置多个键/值对时不能。

虽然作为键的函数被强制转换为字符串，但您可以将函数嵌入为值:

var data = [
  {key: "A", value: 100},
]

var map = d3.map(data);

map.set("B",function() { return "Hello"; })
        
console.log(map.get("B")());

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

总结

因此，如果您想使用键创建 map 并将整个对象作为值，您可以使用:

var data = [
  {key: "A", value: 100},
  {key: "B", value: 200},
  {key: "C", value: 300},
  {key: "D", value: 400},
  {key: "E", value: 500}
]

var map = d3.map(data, function(d) { return d.key; });

console.log(map.get("A"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

但是，如果您想为每个键(而不是数据数组项)指定某个值，则使用 forEach 循环会更容易(如本答案的第一个片段所示):

var map = d3.map()
data.forEach(function(d) {
  map.set(d.key,d.value)
})

如果您想在此处的 set 方法中使用函数，则需要执行该函数并具有返回值(在您的第二个示例/所需代码中都缺少)，您需要函数的输出，而不是函数本身:

var data = [
  {key: "A", value: 100},
  {key: "B", value: 200},
  {key: "C", value: 300},
  {key: "D", value: 400},
  {key: "E", value: 500}
]

var map = d3.map();

data.forEach(function(d) {
  map.set(function() { return d.key + "-key"}(),
          double(d.value))
})

console.log(map.get("A-key"));

function double(n) { return n*2; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

最后一点，您的初始(引用/起点)代码块设置不正确， d3.map() 创建了一个新 map 。我们不想为每一行创建一个新 map ，我们想创建一个 map ，然后为每一行使用 set。

因此:

d3.queue()
  .defer(d3.json, 'counties.json')
  .defer(d3.csv, 'employmentdata.csv') function(d) {
      d3.map()
      .set(d.county, +d.rate);
   })
  .await(ready);

应该是这样的:

var map = d3.map();  // create a map.
d3.queue()
  .defer(d3.json, 'counties.json')
  .defer(d3.csv, 'employmentdata.csv') function(d) {
      map // use that same map for each row.
      .set(d.county, +d.rate);
   })
  .await(ready);

上面的片段使用相同的方法，创建一个 map ，然后调用 .set对于数组中的每个项目。

相反，类似: d3.map().get(d.property)不会返回任何内容，因为您刚刚创建了一个新 map ，该 map 为 d3.map() 为空.