![](/img/trans.png)
[英]d3/dc.js - How to create a stacked bar chart while telling crossfilter to treat elements in an array as separate records?
[英]Trouble using DC.js (crossfilter and d3 convenience library) - bar chart not showing values
我正在使用這個庫: Dimensional Charting來構建一些需要CrossFilter功能的相對標准的圖表。
我一直在關注這些例子,但他們並不適合我。
這是我的代碼:
var dashData = crossfilter(data.report),
dataByHour = dashData.dimension(function(d){ return d3.time.hour(new Date(d.timestamp))}),
totalByHour = dataByHour.group().reduceSum(function(d) { return d.amount }),
dc.barChart("#graphTimeOverview")
.width(990) // (optional) define chart width, :default = 200
.height(250) // (optional) define chart height, :default = 200
.transitionDuration(500) // (optional) define chart transition duration, :default = 500
.margins({top: 10, right: 50, bottom: 30, left: 40})
.dimension(dataByHour) // set dimension
.group(totalByHour) // set group
.elasticY(true)
.centerBar(true)
.gap(1)
.x(d3.time.scale().domain([new Date(data.report[0].timestamp), new Date(data.report[(data.report.length - 1)].timestamp)]))
.round(d3.time.hour.round)
.xUnits(d3.time.hours)
.renderHorizontalGridLines(true);
dc.renderAll();
我知道crossfilter數據工作正常,這是一個組的示例:
totalByHour:
[ {key:(new Date(1361746800000)), value:6170.17},
{key:(new Date(1361678400000)), value:3003},
{key:(new Date(1361581200000)), value:2350.42},
{key:(new Date(1361667600000)), value:1636.19},
etc...
]
不幸的是,這一切都讓我得到了一個空圖,它似乎正確地計算了y軸,所以在我看來它可以讀取數據,但是我從來沒有看到任何條形值:
也許data.report
數組沒有按時間戳排序(提供的樣本是未排序的)。 在您的代碼中,您假設這些值已排序。 你可以嘗試使用
// Compute the timestamp extent
var timeExtent = d3.extent(data.report, function(d) { return d.timestamp; });
dc.barChart("#graphTimeOverview")
// more settings here
.x(d3.time.scale().domain(timeExtent.map(function(d) { return new Date(d); })))
.round(d3.time.hour.round)
.xUnits(d3.time.hours)
.renderHorizontalGridLines(true);
如果你提供一個jsFiddle,會更容易分辨出問題所在。
我幾天前開始使用dc.js,所以我不確定。 但是,我認為你的代碼應該進入
d3.csv("data.csv", function(data) { //your-code };
或d3.json("data.json", function(data) {//your-code};
或jQuery.getJson("data.json", function(data){//your-code});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.