D3.js 如何在D3中使用CSV数据

我是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"
  },];

 ....

在这篇文章中，我用这些数据为每个物种创建了一个菜单，在点击事件时在种群数据之间转换。我现在想开始处理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（），但在获取数据时遇到了问题。因此，我想知道是否可以使用这些数据制作与我最初制作的图表相同的图表，以及最好的方法是什么？

您实际上不需要嵌套数据，因为您使用的是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);
     });

工作代码

编辑

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

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

关于变化：

   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);
     });

工作代码

---

希望这有帮助

您实际上不需要嵌套数据，因为您使用的是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);
     });

工作代码

编辑

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

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

关于变化：

   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);
     });

工作代码

---

希望这有帮助

英雄！非常感谢如果我在d3中动态创建下拉列表，这也可以吗？我在这里添加了它，但是现在有很多重复的菜单项，这就是为什么我认为我需要嵌套。对不起，我知道这不是原来的问题！检查一下我的答案对不起，我走了。这是一个很好的解释，我不知道你可以通过这种方式获得数据！你救了我好几天，谢谢你，英雄！非常感谢如果我在d3中动态创建下拉列表，这也可以吗？我在这里添加了它，但是现在有很多重复的菜单项，这就是为什么我认为我需要嵌套。对不起，我知道这不是原来的问题！检查一下我的答案对不起，我走了。这是一个很好的解释，我不知道你可以通过这种方式获得数据！你救了我几天，谢谢你