Question

我正在尝试将csv数据导入到d3.map中，以创建类似于Mike Bostock所做的半径here。但不是使用随机数，而是拉入数据。当我在那里抛出一个随机数时，其余代码似乎工作正常。任何帮助将不胜感激，因为我仍然是d3的菜鸟。

    d3.csv("fuel.csv", function(csv) {

for (var i = 0; i < csv.length; i++) {
                parseFloat(csv[i].comb),
}

var nodesFuel = d3.range(csv.length)
                  .map(csv, function(d) { 
                      return {radius: d.comb};
                    });

    ...

Answer 1

解释原始代码：

var nodes = d3.range(200).map(function() { 
                                  return {radius: Math.random() * 12 + 4}; 
                             });

以d3.range(200)开头。该函数创建一个从0到199的整数数组。然后调用该数组的.map( callbackFunction )方法。 map函数创建一个与调用它的数组长度相同的新数组，但新数组的每个元素都是从回调函数返回的值。回调函数被赋予数组中的值及其索引作为参数，但这里不使用它们。相反，将忽略整数并返回一个新对象，其中包含一个属性radius，设置为4到16之间的随机数。

另一种做同样事情的方法（使用可能比较熟悉的语法，如果你有其他编程语言的经验）将是：

var nodes = new Array(200);
for(var i=0; i<200; i++) {
    nodes[i] = {radius: (Math.random() * 12 + 4)};
}

无论哪种方式，最终结果只是具有随机半径值的200个元素的对象数组。

这与d3.map object无关，它是一个hashmap数据结构的正式实现，供您在数据密钥可能与内部Javascript Object属性和函数名冲突时使用。

现在，关于你要做什么。 d3.csv函数读取您的文件并创建一个命名对象数组。该数组作为参数传递给回调函数。如果要创建一个新的对象数组，每个对象都基于csv文件中的单独数据行，那么您可以直接在csv数组上调用数组映射函数：

d3.csv("fuel.csv", function(csv) {

/* This doesn't do anything.  
// You're parsing the strings but not saving the result!
for (var i = 0; i < csv.length; i++) {
                parseFloat(csv[i].comb),
}
*/

var nodesFuel = csv.map(function(d) { 
                      return {radius: parseFloat(d.comb) };
                    });

/* or if you want to save the parsed value in the original array:
var nodesFuel = csv.map(function(d) { 
                      d.comb = parseFloat(d.comb);
                      return {radius: d.comb };
                    });
*/

数组nodesFuel现在是一个与csv长度相同的数组，每个条目都包含一个包含属性radius的对象，其中radius值是{{的解析值来自comb数组中相应条目的属性。

map函数从csv获取d3力布局的半径数据

1 个答案: