使用JSON中的数据的D3.js Choropleth

我正在尝试制作一张类似于迈克·博斯托克的《乔洛佩斯》（Choropleth）的地图

最后，我希望有一个下拉列表来选择要显示的“列”，甚至找出如何过滤一系列年份。我的最终JSON结构如下：

[{
   "ID": "02",
   "Volume": "NULL",
   "SubCategory": "Other Housing",
   "Category": "Use",
   "Type": "PAB",
   "date": "2013-12-31",
   "State": "Ohio"
 },
 {
   "ID": "02",
   "Volume": 24800000,
   "SubCategory": "Student Loans",
   "Category": "Use",
   "Type": "PAB",
   "date": "2013-12-31",
   "State": "Ohio"
 },
 {
   "ID": "02",
   "DateExcelNo": "12/31/14",
   "Volume": 440200000,
   "SubCategory": "Mort Rev Bonds",
   "Category": "Use",
   "Type": "PAB",
   "date": "2014-12-31",
   "State": "Ohio"
 },
 {
   "ID": "02",
   "Volume": 1205000000,
   "SubCategory": "Total Cap",
   "Category": "VolumeCapacity",
   "Type": "PAB",
   "date": "2014-12-31",
   "State": "Ohio"
 },
 {   "ID": "01",
   "Volume": "NULL",
   "SubCategory": "Other Housing",
   "Category": "Use",
   "Type": "PAB",
   "date": "2013-12-31",
   "State": "Connecticut"
 },
 {
   "ID": "01",
   "Volume": 24800000,
   "SubCategory": "Student Loans",
   "Category": "Use",
   "Type": "PAB",
   "date": "2013-12-31",
   "State": "Connecticut"
 },
 {
   "ID": "01",
   "DateExcelNo": "12/31/14",
   "Volume": 440200000,
   "SubCategory": "Mort Rev Bonds",
   "Category": "Use",
   "Type": "PAB",
   "date": "2014-12-31",
   "State": "Connecticut"
 },
 {
   "ID": "01",
   "Volume": 1205000000,
   "SubCategory": "Total Cap",
   "Category": "VolumeCapacity",
   "Type": "PAB",
   "date": "2014-12-31",
   "State": "Connecticut"
 },
 {
   "ID": "01",
   "Volume": 663400000,
   "SubCategory": "Total Carryforward to Next Year",
   "Category": "Carryfwd",
   "Type": "PAB",
   "date": "2014-12-31",
   "State": "Connecticut"
 }]

---

这里的问题很简单：

d3.json

不接受行函数

我相信您会认为，考虑到您在问题中共享的JSON，您可以简单地更改这一行

.defer(d3.tsv, "unemployment.tsv", function(d) { unemployment.set(d.id, +d.rate); })

。。。为此：

.defer(d3.json, "unemployment.json", function(d) { unemployment.set(d.id, +d.rate); })

但是，这不起作用，因为您不能将该行函数（第二个逗号后的所有内容都是行函数）与

d3.json一起使用

解决方案：

创建JSON文件（此处名为“demission.JSON”），并在队列中执行以下操作：

.defer(d3.json, "unemployment.json")

然后，在
ready
函数中，将该JSON作为第三个参数加载（这里我称之为
un
）：

最后，填充您的
d3.map（）
：

这是更新的bl.ocks（当然，只有6个县有颜色，因为我使用的JSON只有6个数据点）：

PS：在s.O.每个问题只问一个问题是一个很好的做法。因此，我建议你发布另一个关于下拉问题的问题。
这里的问题很简单：
d3。json
不接受行函数

我相信您会认为，考虑到您在问题中共享的JSON，您可以简单地更改这一行

.defer(d3.tsv, "unemployment.tsv", function(d) { unemployment.set(d.id, +d.rate); })

。。。为此：

.defer(d3.json, "unemployment.json", function(d) { unemployment.set(d.id, +d.rate); })

但是，这不起作用，因为您不能将该行函数（第二个逗号后的所有内容都是行函数）与
d3.json一起使用

解决方案：

创建JSON文件（此处名为“demission.JSON”），并在队列中执行以下操作：

.defer(d3.json, "unemployment.json")

然后，在
ready
函数中，将该JSON作为第三个参数加载（这里我称之为
un
）：

最后，填充您的
d3.map（）
：

这是更新的bl.ocks（当然，只有6个县有颜色，因为我使用的JSON只有6个数据点）：

附言：在s.O.每个问题只问一个问题是一个很好的做法。因此，我建议你发布另一个关于下拉问题的问题

un.forEach(function(d) { 
    unemployment.set(d.id, +d.rate); 
});