ユーザーが特定の棒をクリックしたときに棒グラフの関数を呼び出そうとしています。レンダーレットを使用してレンダー関数にリスナーを追加し、そこからクリックイベントが追加される各バーのグループを作成する必要があることに気付きました。
一般的な棒グラフでこれを呼んでいると仮定します：
barChart.on('renderlet', function(chart, filter)
{
// TODO Select the bars here and add an on click function
});
唯一の問題は、そのチャートオブジェクトを使用してバーでd3.select呼び出しを行う方法を見つけることができないことです。オブジェクトをダンプしたときに、オブジェクトにバーのようなものは表示されません。
この種のことを見つける最も簡単な方法は、ソースにアクセスすることです。この場合、
var enter = bars.enter()
.append('rect')
.attr('class', 'bar')
https://github.com/dc-js/dc.js/blob/develop/src/bar-chart.js#L90-L92
したがって、セレクターはrect.barです。また、chart.selectAll()現在のチャート内でのみ選択されるため、d3を直接使用するよりも便利な方法の方が優れています。
最後に、dc.jsによって内部的に使用されるイベントを踏みつけないようにするために、イベントハンドラーに名前空間を付けることができます。
合計すると、
barChart.on('renderlet.barclicker', function(chart, filter)
{
chart.selectAll('rect.bar').on('click.custom', function(d) {
// use the data in d to take the right action
});
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加