d3jsグループ化された棒グラフの切り替え凡例

これを実行する方法はいくつかあります。開始/更新/終了のサイクルは簡単に使用できますが、ネストされた要素とチャートの状態間のスムーズな遷移を保証するためにキーを設定する必要があるため、サイクルの通常の使用と比較すると少し複雑です。

この状況では、配列を使用して、フィルターで除外するバーを保持し、それらのバーを非表示にし、それらのキーの値を使用しないようにスケールを更新し、残りのバーを更新する方が簡単な場合があります。

これには、凡例アイテムごとにonclickイベントが必要です。クリックすると、クリックした関数で、フィルターで除外された（filtered）アイテムの配列を次のように管理します。ここdで、は凡例の長方形に関連付けられたデータです。

// add the clicked key if not included:
if (filtered.indexOf(d) == -1) {
 filtered.push(d); 
  // if all bars are un-checked, reset:
  if(filtered.length == keys.length) filtered = [];
}
// otherwise remove it:
else {
  filtered.splice(filtered.indexOf(d), 1);
}

次に、スケールを更新できます（スケールのドメインx1、つまりnewKeys変数のフィルター処理された配列にないすべてのキーが必要です）。

var newKeys = [];
    keys.forEach(function(d) {
      if (filtered.indexOf(d) == -1 ) {
        newKeys.push(d);
      }
    })
    x1.domain(newKeys).rangeRound([0, x0.bandwidth()]);
    y.domain([0, d3.max(data, function(d) { return d3.max(keys, function(key) { if (filtered.indexOf(key) == -1) return d[key]; }); })]).nice();

次に、長方形を選択し、非表示にするか表示するかでフィルタリングし、それに応じて更新します。

var bars = svg.selectAll(".bar").selectAll("rect")
  .data(function(d) { return keys.map(function(key) { return {key: key, value: d[key]}; }); })

// filter out bars:
bars.filter(function(d) {
  return filtered.indexOf(d.key) > -1;
})
.transition()
.attr("x", function(d) {
  return (+d3.select(this).attr("x")) + (+d3.select(this).attr("width"))/2;  
})
.attr("height",0)
.attr("width",0)     
.attr("y", function(d) { return height; })
.duration(500);

// update persistent bars:
bars.filter(function(d) {
    return filtered.indexOf(d.key) == -1;
  })
  .transition()
  .attr("x", function(d) { return x1(d.key); })
  .attr("y", function(d) { return y(d.value); })
  .attr("height", function(d) { return height - y(d.value); })
  .attr("width", x1.bandwidth())
  .attr("fill", function(d) { return z(d.key); })
  .duration(500);

このソリューションは、入力/更新/終了のサイクルでもう少し「d3-ish」にすることができますが、要素の数が比較的固定されているため、これは他の多くの状況ほど有用ではありません。

上記の動作中のコードは次のとおりです。

https://bl.ocks.org/andrew-reid/64a6c1892d1893009d2b99b8abee75a7

また、コメントに記載されているように、スケールだけでなく、軸も更新する必要があります。そのために、チャートを更新するときに簡単に選択できるように、yスケールにクラスを追加しました。

       svg.select(".y")
        .transition()
        .call(d3.axisLeft(y).ticks(null, "s"))
        .duration(500);