使用json的D3日曆視圖

Question

我想在d3js中做這個日曆，但我想使它與json一起工作。

http://bl.ocks.org/mbostock/4063318

我有這樣的JSON：

[{ 
"category": "business", 
"date": "01/10/2011", 
"city": "New York" 
}, 
{ 
"category": "holidays", 
"date": "02/10/2011", 
"city": "New York" 
}, 
{ 
"category": "business", 
"date": "03/10/2011", 
"city": "New York" 
}, 
{ 
"category": "family", 
"date": "03/10/2011", 
"city": "New York" 
}, 
{ 
"category": "holidays", 
"date": "01/10/2011", 
"city": "San Francisco" 
}, 
{ 
"category": "family", 
"date": "02/10/2011", 
"city": "San Francisco" 
}, 
{ 
"category": "holidays", 
"date": "03/10/2011", 
"city": "San Francisco" 
}, 
{ 
"category": "family", 
"date": "01/10/2011", 
"city": "Austin" 
}, 
{ 
"category": "holidays", 
"date": "02/10/2011", 
"city": "Austin" 
}, 
{ 
"category": "family", 
"date": "03/10/2011", 
"city": "Austin" 
} 
] 

我更換鏈接的原代碼，這些代碼的。

var color = d3.scale.quantize() 
.domain([-.05, .05]) 
.range(d3.range(11).map(function(d) { return "q" + d + "-11"; })); 

通過

var color = d3.scale.category10(); 

和

d3.csv("dji.csv", function(error, csv) { 
var data = d3.nest() 
.key(function(d) { return d.Date; }) 
.rollup(function(d) { return (d[0].Close - d[0].Open)/d[0].Open; }) 
.map(csv); 

rect.filter(function(d) { return d in data; }) 
    .attr("class", function(d) { return "day " + color(data[d]); }) 
.select("title") 
    .text(function(d) { return d + ": " + percent(data[d]); }); 
}); 

通過

d3.json("data3.json", function(error, data) { 

alert(data); 
rect.filter(function(d) { return d in data; }) 
    .attr("class", function(d) { return "day " + color(data); }) 
    .select("title") 
    .text(function(d) { return d + ": " + d.city; }); 
}); 

但這並不顯示文本，也沒有油漆的顏色。問題是什麼？

Answer 1

我冒昧地創建了一個新的gist我認爲你以後，但仍有一些問題需要您解決。你可以看看：http://bl.ocks.org/benlyall/b237f16dda3125423130

你得到的問題是，每個日期有多個條目在你的數據。我假設這只是樣本數據，所以對於最終用例可能不是問題，但是您需要決定如何最好地處理這種情況。現在，我只是引用代碼中每個日期的第一個條目。

主要的事情我做：

1. 創建了數據的嵌套版本，按照最初的例子。
2. 使用您的類別作爲關鍵字在色階中添加了domain。
3. 解析數據中的日期以匹配原始示例使用的日期。
4. 將rect.attr更改爲rect.style以設置填充顏色。 color比例將直接返回十六進制顏色值，而不是類似原始示例的類名稱。
5. 已更新各種位以支持新的nest對象，而不是錯誤地引用數據（格式錯誤）。
6. 改變了年，所以你可以看到現在的價值（你的日子感興趣的是在2011年，原來只上漲到2010年）。

如果您查看底層gist的修訂，您會看到我所做的更改。它們並不太複雜。