D3 - クリック時のチャートの更新とクリア

Question

この単純なダッシュボードhttp://bl.ocks.org/diethardsteiner/3287802を実装して、バックエンドで動作させようとしています。問題は、バックエンドが常に同じ量の「カテゴリ」を提供しているわけではないため、棒グラフが必要に応じて機能していないことです。私はサンプルデータでフィドルを作成しました。問題は円グラフhttps://jsfiddle.net/7t67yxfk/1/の異なる「グループ」をクリックした後に発生します。

function up(d, i) { 
      /* update bar chart when user selects piece of the pie chart */ 
      //updateBarChart(dataset[i].category); 
      updateBarChart(d.data.category, color(i));   
} 

棒グラフからデータを消去し、各グループで使用できる棒グラフとラベルのみを表示するにはどうすればよいですか？

Answer 1

グラフでは余分な要素は削除されず、必要に応じて追加されます。 私が入力した更新出口パターンを適用するために、あなたのplunkを更新：

var plot = d3.select("#barChartPlot") 
    .datum(currentDatasetBarChart) 
    .select('g.plot'); 

    var dataBound = plot.selectAll("rect") 
     .data(currentDatasetBarChart); 
    dataBound.exit() 
     .remove(); 
    dataBound.enter().append('rect'); 
    dataBound.transition() 
     .duration(750) 
     .attr("x", function(d, i) { 
      return xScale(i); 
     }) 
     .attr("width", width/currentDatasetBarChart.length - barPadding) 
     .attr("y", function(d) { 
      return yScale(d.measure); 
     }) 
     .attr("height", function(d) { 
      return height-yScale(d.measure); 
     }) 
     .attr("fill", colorChosen); 

この基本的には選択の変更は、すべてのあなたの四角形を再選択する必要があるたびに、、、役に立たないものを削除し、新しいものを追加することを意味し、すべてのプロパティを更新します。

また、適切な場所でそれらを操作できるように、矩形を含むグループにplotクラスを追加しました。

• はRECTとテキストを含む、
• はバーごとに1つのSVGグループを作成する代わりに、ラベルを自分で操作するのaxisを使用し、その完全なグループを翻訳：に

  サイドノートとして、私はお勧めします

• 使用d3 v4