dc.js折れ線グラフは、各点

Question

後私は折れ線グラフを有します。しかし、プロットが三角形になるように1つの変更を加える必要があり、一連の不規則な三角形を見ることができます。私はYのすべての点の後に、0に落ちて新たに開始する必要があります。私は、データポイントを明示的に追加して0にすることでこれを達成できることは分かっていますが、追加のデータポイントを作成せずにデータポイントを行うことができるかどうかは不思議です。

HTML：

<div id="line-chart"></div> 
<div id="log">Incoming Data:</div> 

JS：

var startDate = new Date("2011-11-14T16:17:54Z"); 
var currDate = moment(startDate); 
var cf = crossfilter([{date: startDate, quantity: 1}]); 
AddData(); 

var timeDimension = cf.dimension(function(d){ return d.date; }); 
var totalGroup = timeDimension.group().reduceSum(function(d){ return d.quantity; }); 

var lineChart = dc.lineChart("#line-chart") 
    .brushOn(false) 
    .width(800) 
    .height(200) 
    .elasticY(true) 
    .x(d3.time.scale().domain([startDate, currDate])) 
    .dimension(timeDimension) 
    .group(totalGroup); 

dc.renderAll(); 

window.setInterval(function(){ 
    AddData(); 
    lineChart.x(d3.time.scale().domain([startDate, currDate])); 
    dc.renderAll(); 
}, 800); 

function AddData(){ 
    var q = Math.floor(Math.random() * 6) + 1; 
    currDate = currDate.add('day', 5); 
    cf.add([{date: currDate.clone().toDate(), quantity: q}]); 
    $("#log").append(q + ", "); 
} 

CSS：

#log{ 
    clear:both; 
} 

おかげで、

ヴィッキー

Answer 1

この効果を得るには"fake group"を使用できます。

これは、クロスフィルターのデータを変更せずにグラフに表示される内容を変更できる汎用データ処理技術です。この場合、クロスポイントグループによって返された各ポイントの直後にデータポイントを追加します。

偽のグループは、グループのように機能するオブジェクトにクロスフィルタグループをラップします。ほとんどの場合にのみdc.js​​を呼び出す必要があるので、これは非常に簡単です：

は

function drop_to_zero_group(key_incrementor, group) { 
    return { 
     all: function() { 
      var _all = group.all(), result = []; 
      _all.forEach(function(kv) { 
       result.push(kv); 
       result.push({key: key_incrementor(kv.key), value: 0}); 
      }) 
      return result; 
     } 
    } 
} 

偽物グループは、ここでは、読み込むそれぞれに対して2つのデータポイントを生成します。最初のものはオリジナルの重複（または参照）であり、2番目のものはユーザー指定の関数によってそのキーがインクリメントされています。

この関数をゼロ値でもパラメータ化するのは意味があるかもしれませんが、私は主に日付インクリメンタを取りたいと思っていました。ここでは、日付のインクリメンタです：

function increment_date(date) { 
    return new Date(date.getTime()+1); 
} 

これは（milliseconds since the beginning of 1970中）の整数値を取得するためにdate.getTime()を使用して、1を加算し、これまでに戻って変換します。

実際、これを初めて試したときには、+1を含めるのを忘れてしまいましたが、それでも機能しました。しかし、同じx値を持つ複数の点があると、dc.jsが混乱する可能性があるので、これはお勧めしません。

は、チャートに

lineChart 
    .group(drop_to_zero_group(increment_date, totalGroup)); 

を渡す前にグループをラップすることにより、偽のグループを適用します。ここDJのフィドルのフォークです：http://jsfiddle.net/gordonwoodhull/dwfgma8j/4/

FWIW私もdc.redrawAll()にdc.renderAll()を変更毎回白く点滅したり、最初からレンダリングしたりする代わりに、アニメートされたトランジションを可能にします。トランジションは完璧ではありませんが、瞬きよりもまだ良いと思います。私は修正がありますが、それは急変ですので、dc.js 2.1に入ります。