NVD3ライブラリを使用して、スタックされたmultiBarChartを表示しています。また、平均値がどこにあるかを示すために、各バーに1本の水平線(---)を追加する必要があります。
最後のデータセット(シリーズ)を平均と見なしました。
test_data = [
{"key":"Series 1", "values":[{"x":0,"y":30},{"x":1,"y":15},{"x":2,"y":10}]},
{"key":"Series 2", "values":[{"x":0,"y":2},{"x":1,"y":7},{"x":2,"y":3}]},
{"key":"Average","values": [{"x":0,"y":6},{"x":1,"y":4},{"x":2,"y":40}]}
];
最後のシリーズを選択し、高さを1に変更して、正方形ではなく線をシミュレートしました。また、「y」の値を変更することで、線の位置を垂直方向に制御することもできました。
var lastBars = $('.nv-group:last rect');
lastBars.attr('height', 2);
lastBars.attr('y',function(a, y, c){
return parseFloat(y) + 50;
});
画面の右側のYに「水平線」を配置するには、データとともに提供される「y」を画面の対応する「Y」にスケーリングして、Y軸の正しい値に合わせる方法を見つける必要があります。
NVD3のソースコードを読んでいて、yDomainとyScaleを使ってscreen-Y値を計算しているようですが、それらの使い方やライブラリコードの外部からアクセスする方法がわかりません。
何か案が?