4

私はこのライブラリを使用しています: CrossFilter 機能を必要とするいくつかの比較的標準的なチャートを構築するためにDimensional Chartingを使用しています。

私は例に従っていますが、うまくいきません。

これが私のコードです：

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

クロスフィルター データが正しく機能していることはわかっています。グループのサンプルを次に示します。

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軸を正しく計算しているように見えるため、データを読み取ることができるように見えますが、バーの値は表示されません:

ここに画像の説明を入力

4

2 に答える 2

5

配列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 を提供すると、何が問題なのかが分かりやすくなります。

于 2013-04-16T15:15:37.710 に答える
0

数日前に 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});

于 2013-04-09T19:19:28.643 に答える