如何在D3 js中基於多個過濾器值顯示條形圖

Question

我已經基於收入（x軸）和國家（y軸）制作了條形圖。我的條形圖已完成，但是我想從下拉列表中選擇國家的多個值，然后根據這些值，僅該國家/地區的條形應該被顯示為其他隱藏...對於單個選擇，我已經完成，但是對於國家的多個值，如何在D3 Js條形圖中進行過濾和顯示，我感到很困惑。 localDataJson包含以下數據：

localdatajson=[
           {"Country";"USA","Revenue":"12","TurnOver":"16"},
           {"Country";"Brazil","Revenue":"4.5","TurnOver":"16"},
           {"Country";"Belzium","Revenue":"4.8","TurnOver":"16"},
           {"Country";"Britain","Revenue":"20","TurnOver":"16"},
           {"Country";"Canada","Revenue":"6.5","TurnOver":"16"},
           {"Country";"DenMark","Revenue":"7.5","TurnOver":"16"}
         ]

文本參數在多個選擇的情況下將是一個數組，例如。 text = [“ USA”，“ Brazil”，“ British”]我只想顯示這三個國家/地區的酒吧...這是我的代碼

 function revenueBar(localDataJson, text) {
    var w = 400;
    var h = 400;
    var barPadding = 1;
    var maxRevenue = 0;
    var maxTurnOver = 0;
    var padding = {
        left: 45, right: 10,
        top: 40, bottom: 60
    }

    var maxWidth = w - padding.left - padding.right;
    var maxHeight = h - padding.top - padding.bottom;
    for (var j = 0; j < localDataJson.length; j++) {
        if (localDataJson[j].Revenue > maxRevenue) {
            maxRevenue = localDataJson[j].Revenue;
        }

    }
    for (var j = 0; j < localDataJson.length; j++) {
        if (localDataJson[j].TurnOver > maxTurnOver) {
            maxTurnOver = localDataJson[j].TurnOver;
        }

    }
    var convert = {
        x: d3.scale.ordinal(),
        y: d3.scale.linear()
    };
    // Define your axis
    var axis = {
        x: d3.svg.axis().orient('bottom')
        //y: d3.svg.axis().orient('left')
    };

    // Define the conversion function for the axis points
    axis.x.scale(convert.x);
   // axis.y.scale(convert.y);

    // Define the output range of your conversion functions
    convert.y.range([maxHeight, 0]);
    convert.x.rangeRoundBands([0, maxWidth]);

    convert.x.domain(localDataJson.map(function (d) {
        return d.Country;
    })
    );
    convert.y.domain([0, maxRevenue]);
    $('#chartBar').html("");
    var svg = d3.select("#chartBar")
               .append("svg")
               .attr("width", w)
               .attr("height", h);
    // The group node that will contain all the other nodes
    // that render your chart
    $('.bar-group').html("");
    var chart = svg.append('g')
                         .attr({
                             class: 'container',
                             transform: function (d, i) {
                                 return 'translate(' + padding.left + ',' + padding.top + ')';
                             }
                         });

    chart.append('g') // Container for the axis
                .attr({
                    class: 'x axis',
                    transform: 'translate(0,' + maxHeight + ')'
                })
               .call(axis.x)
                .selectAll("text")
                             .attr("x", "-.8em")
                             .attr("y", ".15em")
                     .style("text-anchor", "end")
                            .attr("transform", "rotate(-65)");// Insert an axis inside this node
    $('.axis path').css("fill", "none");
    chart.append('g') // Container for the axis
       // .attr({
       //     class: 'y axis',
       //     height: maxHeight,

       // })
       //.call(axis.y);

    var bars = chart
         .selectAll('g.bar-group')
         .data(localDataJson)
         .enter()
         .append('g') // Container for the each bar
         .attr({
             transform: function (d, i) {
                 return 'translate(' + convert.x(d.Country) + ', 1)';
             },
             class: 'bar-group'
         });

    //Here goes filter thing ,bar of filter values will be shown others hide
    if (text != "All" && text != "Clear Filter") {

        svg.selectAll('g.bar-group')
          .filter(function (d) {
                 return text != d.Country;
          })
          .attr("display", "none");

        svg.selectAll('g.bar-group')
                  .filter(function (d) {
                  return text == d.Country;
                   })
            .attr("display", "inline");
    }
    var color = d3.scale.category20();
   // var color = d3.scale.ordinal()
                 // .range(['#f1595f', '#79c36a', '#599ad3', '#f9a65a', '#9e66ab','#cd7058']);
    bars.append('rect')
                .attr({
                    y: maxHeight,
                    height: 0,
                    width: function (d) { return convert.x.rangeBand(d) - 3; },
                    class: 'bar'
                })
                .transition()
                .duration(1500)
                .attr({
                    y: function (d, i) {
                        return convert.y(d.Revenue);
                    },
                    height: function (d, i) {
                        return maxHeight - convert.y(d.Revenue);
                    }
                })
                .attr("fill", function (d, i) {
                    // return color(i);
                    return color(d.Country);
                })
   // for (var i = 0; i < text.length; i++) {

   // }


    svg.append("text")
     .attr("x", (w + padding.left + padding.right) / 2)
     .attr("y", 25)
     .attr("class", "title")
     .attr("text-anchor", "middle")
     .text("Revenue Bar Chart")
    ;

    var svgs = svg.select("g.container").selectAll("text.label")
  //  svgs.selectAll("text")
      .data(localDataJson)

      .enter()
      .append("text")
      .classed("label", true)
        //.transition()        // <-- This is new,
      // .duration(5000)
      .text(function (d) {
          return (d.Revenue);
      })
      .attr("text-anchor", "middle")
      //// Set x position to the left edge of each bar plus half the bar width
      .attr("x", function (d, i) {
          // return (i * (w / localDataJson.length)) + ((w / localDataJson.length - barPadding) / 2);
          return convert.x(d.Country) + (convert.x.rangeBand(d) - 3) / 2;
      })
     .attr({
         y: function (d, i) {
            return convert.y(d.Revenue) +20;
            // return maxHeight;
         },

     })
   .attr("font-family", "sans-serif")
    .attr("font-size", "13px")
    .attr("fill", "white")


}

Answer 1

Garima您需要在使用display：none隱藏條的部分中這樣做

svg.selectAll('g.bar-group')
          .filter(function (d) {
                if(text.indexOf(d.Country) == -1)
                 return true;
                else
                 return false;
          })
          .attr("display", "none");

注意：在此，我假設文本是所選國家/地區的數組，即使僅是單個選項也是如此。

希望這可以幫助