Question

我是D3的新手，并且一直在使用看起来像这样的数据

  buzzard = [{
    "year": "1997",
    "population": "14500"
  }, {
    "year": "2006",
    "population": "37600"
  }, {
    "year": "2013",
    "population": "68000"
  }, ];

  redkite = [{
    "year": "1997",
    "population": "160"
  }, {
    "year": "2006",
    "population": "431"
  }, {
    "year": "2013",
    "population": "1600"
  },];

 ....

在带有该数据的fiddle中，我为每个物种创建了一个菜单，点击事件在人口数据之间转换。我现在想开始使用CSV数据，但我不确定如何进行此操作

species,year,population
Buzzard,1997,14500
Buzzard,2006,37600
Buzzard,2013,68000
Red Kite,1997,160
Red Kite,2006,431
Red Kite,2013,1600
Sparrowhawk,1997,32000
Sparrowhawk,2006,21000
Sparrowhawk,2013,35000

我尝试过使用d3.nest（）但是无法获取数据。所以我想知道是否有可能使用这些数据制作我原来做的相同图表，最好的方法是什么？

Answer 1

你真的不需要使用csv来嵌套你的数据。

您可以改用过滤器。

   d3.select('#opts')
     .on('change', function() {
       var selected = d3.select(this).property('value');
       //filter the data which has this value
       var cd = data.filter(function(d) {
         return (selected.toLowerCase() == d.species.toLowerCase())
       });
       updateLegend(cd);
     });

工作代码here

修改

首先从数据中获取选择框的唯一名称。

data.forEach(function(d) { if (uniqueNames.indexOf(d.species) < 0) uniqueNames.push(d.species) });

然后使用：
进行选择
list.append("select").selectAll("option") .data(uniqueNames) .enter().append("option") .attr("value", function(d) { return d; }) .text(function(d) { return d; });

改变：

list .on('change', function() { var selected = d3.select(this).select("select").property("value"); console.log(selected) //filter the data which has this value var cd = data.filter(function(d) { return (selected == d.species) }); updateLegend(cd); });

工作代码here

希望这有帮助！

如何在D3中使用CSV数据

1 个答案: