dc.jsコンポジットチャートトグルチャート

Question

複合チャートのにトグルチャートのオン/オフを切り替える方法はありますか？

私が凡例にカーソルを合わせると、それぞれのグラフが強調表示されますが、表示するものを選択できると便利です（凡例では表示/非表示、チェックボックスなど）。

私はhideStackへの参照を見つけましたが、これは私が必要と考えるものではありません。

アイデア？

（現在のDCバージョン：2.0.0 -alpha.2）

Answer 1

あなたは正しい、伝説のトグルは、現在のスタックではなく、複合チャートのサブチャートに焦点を当てています。

凡例のトグルシステムをハックする可能性がありますが、ここでは拡張機能としてトグル機能を追加するだけです。

pretransitionイベントでグラフが描画されるまで待ってから、独自のクリックハンドラを各凡例アイテムに追加します。

composite.on('pretransition.hideshow', function(chart) { 
    chart.selectAll('g.dc-legend .dc-legend-item') 
    .on('click.hideshow', function(d, i) { 
     var subchart = chart.select('g.sub._' + i); 
     var visible = subchart.style('visibility') !== 'hidden'; 
     subchart.style('visibility', function() { 
     return visible ? 'hidden' : 'visible'; 
     }); 
     d3.select(this).style('opacity', visible ? 0.2 : 1); 
    }); 
}); 

はまた、我々はアイテムが隠されていることを示すために、凡例項目を半透明に設定します：これは、そのCSSの表示を切り替えると、対応するサブチャートのためのセレクタを作成するために、凡例項目のインデックスを使用します。