d3棒グラフでフィルタリングされた後にデータが再描画されない

Question

棒グラフにフィルタを追加しようとしました。凡例をクリックするとバーが削除されますが、バーを再アクティブ化しようとすると再描画されません。

ここはplnkです。

http://plnkr.co/edit/GZtErHGdq8GbM2ZawQSD?p=preview

私は問題を動作するように見えることはできません - 誰もが手を貸すことができれば？

おかげ

---

JSコード。バーが消え

// load the data 
d3.json("data.json", function(error, data) { 
    var group = []; 

    function updateData() { 
    group = []; 

    var organization = data.organizations.indexOf("Org1"); 
    var dateS = $("#selectMonth").text() 

    for (var country = 0; country < data.countries.length; country++) { 

     var date = data.dates.indexOf(dateS); 
     group.push({ 
     question: data.organizations[organization], 
     label: data.countries[country], 
     value: data.values[organization][country][date] 

     }); 

    } 
    } 

    function draw(create) { 

    updateData(); 


    x.domain(group.map(function(d) { 
     return d.label; 
    })); 
    y.domain([0, 100]); 

    // add axis 




    // Add bar chart 
    var bar = svg.selectAll("rect") 
     .data(group); 
    if (create) { 
     bar 
     .enter().append("rect") 
     .attr('x', function(d) { 
      return x(d.label); 
     }) 
     .attr('y', function(d) { 
      return y(d.value); 
     }) 
     .attr('width', x.rangeBand()) 
     .attr('height', function(d) { 
      return height - y(d.value); 
     }); 


     svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis) 
     .selectAll("text") 
     .style("text-anchor", "end") 
     .attr("dx", "-.8em") 
     .attr("dy", "-.55em") 
     .attr("transform", "rotate(-90)"); 


     svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
     .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 5) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Value"); 
    } 



    bar 
     .transition() 
     .duration(750) 
     .attr("y", function(d) { 
     return y(d.value); 
     }) 
     .attr("height", function(d) { 
     return height - y(d.value); 
     }); 


    // Existing code to draw y-axis: 
    var legendGroups = d3.select("#legend") 
     .selectAll(".legendGroup") 
     .data(group, function(d) { 
     return d.label; // always try and use a key function to uniquely identify 
     }); 

    var enterGroups = legendGroups 
     .enter() 
     .append("g") 
     .attr("class", "legendGroup"); 

    legendGroups 
     .exit() 
     .remove(); 

    legendGroups 
     .attr("transform", function(d, i) { 
     return "translate(10," + (10 + i * 15) + ")"; // position the whole group 
     }); 

    enterGroups.append("text") 
     .text(function(d) { 
     return d.label; 
     }) 
     .attr("x", 15) 
     .attr("y", 10); 

    enterGroups 
     .append("rect") 
     .attr("width", 10) 
     .attr("height", 10) 
     .attr("fill", function(d) { 
     return "#bfe9bc"; 
     }) 
     .attr("class", function(d, i) { 
     return "legendcheckbox " + d.label.replace(/\s|\(|\)|\'|\,|\.+/g, '') 
     }) 

    .on("click", function(d) { 
     d.active = !d.active; 
     d3.select(this).attr("fill", function(d) { 
     if (d3.select(this).attr("fill") == "#cccccc") { 
      return "#bfe9bc"; 
     } else { 
      return "#cccccc"; 
     } 
     }) 
     var result = group.filter(function(d) { 
     return $("." + d.label.replace(/\s|\(|\)|\'|\,+/g, '')).attr("fill") != "#cccccc" 
     }) 

     x.domain(result.map(function(d) { 
     return d.label; 
     })); 

     bar 
     .select(".x.axis") 
     .transition() 
     .call(xAxis); 

     bar 
     .data(result, function(d) { 
      return d.label.replace(/\s|\(|\)|\'|\,|\.+/g, '') 
     }) 
     .enter() 
     .append("rect") 
     .attr("class", "bar") 


     bar 
     .transition() 
     .attr("x", function(d) { 
      return x(d.label); 
     }) 
     .attr("width", x.rangeBand()) 
     .attr("y", function(d) { 
      return y(d.value); 
     }) 
     .attr("height", function(d) { 
      return height - y(d.value); 
     }); 

     bar 
     .data(result, function(d) { 
      return d.label.replace(/\s|\(|\)|\'|\,|\.+/g, '') 
     }) 
     .exit() 
     .remove() 
    }); 

    } 

Answer 1

あなたは完全にあなたが何ができるか

  .remove() 

でそれを取り除くため、そのように選択されていないときの要素を隠している：

 d3.selectAll('.graph').selectAll("rect").attr("visibility", function(e) { 
      return e.active ? "hidden" : ""; 
     }) 

はhttp://plnkr.co/edit/2UWaZOsffkw1vkdIJuSA?p=preview

を参照してください。