过滤器d3

Question

我从d3开始使用版本3。

我创建了一个分组的条形图，如下所示：

我添加了一个下拉列表，其中包含所有性别（女人（女性），情侣...）。

我被封锁是因为当我从下拉列表中进行选择时，我无法突出显示与特定性别对应的条形。

我在互联网上发现可以使用以下代码：

d3.select('#inds')
    .on("change", function () {
        var sect = document.getElementById("inds");
        var section = sect.options[sect.selectedIndex].value;

        //some code here
    });

“部分”部分包含我选择的性别

例如，当我选择扭矩时，我希望与扭矩相对应的条保持彩色，而其他条保持灰色。

这是全部代码：

source : https://bl.ocks.org/hydrosquall/7966e9c8e8414ffcd8b5
Highlight : https://bl.ocks.org/bricedev/0d95074b6d83a77dc3ad
var margin = {top: 20, right: 20, bottom: 30, left: 40},
 width = 600,
 height = 250 ;


var x0 = d3.scale.ordinal()
 .rangeRoundBands([0, width], .1);

var x1 = d3.scale.ordinal();

var y = d3.scale.linear()
 .range([height, 0]);

var color = d3.scale.ordinal()
 .range(["#54E868", "#54CCE8", "#6395FF", "#50FFC5"]);

var xAxis = d3.svg.axis()
 .scale(x0)
 .tickSize(0)
 .orient("bottom");

var yAxis = d3.svg.axis()
 .scale(y)
 .orient("left")

var svg = d3.select("body").append("svg")
 .attr("width", width + margin.left+ margin.right)
 .attr("height", height + margin.top + margin.bottom)
 .append("g")
 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("../CSV/GenreOrigine.csv", function(error, data) {
 if (error) throw error;

 //Couples, Famille...
 var genreNames = d3.keys(data[0]).filter(function(key) { return key !== "Origine"; });

 data.forEach(function(d) {
     //Valeur pour chacune des origines par rapport au genre
     d.genres = genreNames.map(function(name) { return {name: name, value: +d[name]}; });

 });



 x0.domain(data.map(function(d) { return d.Origine; }));
 x1.domain(genreNames).rangeRoundBands([0, x0.rangeBand()]);
 y.domain([0, d3.max(data, function(d) { return d3.max(d.genres, function(d) { return d.value; }); })]);

 svg.append("g")
     .attr("class", "x axis")
     .attr("transform", "translate(0," + height + ")")
     .call(xAxis);

 svg.append("g")
     .attr("class", "y axis")
     .call(yAxis)
     .append("text")
     .attr("transform", "rotate(-90)")
     .attr("y", 0.3)
     .attr("dy", ".71em")
     .style("text-anchor", "end")
     .text("Nombre de personnes");

 svg.select('.y').transition().duration(500).delay(1300).style('opacity','1');

 var Origine = svg.selectAll(".Origine")
     .data(data)
     .enter().append("g")
     .attr("class", "g")
     .attr("transform", function(d) { return "translate(" + x0(d.Origine) + ",0)"; });

 Origine.selectAll("rect")
     .data(function(d) { return d.genres; })
     .enter().append("rect")
     .attr("width", x1.rangeBand())
     .attr("x", function(d) { return x1(d.name); })
     .style("fill", function(d) { return color(d.name) })
     .attr("y", function(d) { return y(d.value); })
     .attr("height", function(d) { return height - y(d.value); })
     .on("mouseover", function(d) {
         d3.select(this).style("fill", d3.rgb(color(d.name)).darker(2));
     })
     .on("mouseout", function(d) {
         d3.select(this).style("fill", color(d.name));
     });

 Origine.selectAll("rect")
     .transition()
     .delay(function (d) {return Math.random()*1000;})
     .duration(1000)


 var legend = svg.selectAll(".legend")
     .data(genreNames.slice().reverse())
     .enter().append("g")
     .attr("class", "legend")
     .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

 legend.append("rect")
     .attr("x", width - 18)
     .attr("width", 18)
     .attr("height", 18)
     .style("fill", color);

 legend.append("text")
     .attr("x", width - 24)
     .attr("y", 9)
     .attr("dy", ".35em")
     .style("text-anchor", "end")
     .text(function(d) { return d; });

 d3.select('#inds')
     .on("change", function () {
         var sect = document.getElementById("inds");
         var section = sect.options[sect.selectedIndex].value;

         //some code here
     });

});

Answer 1

您可以在SVG中选择所有rect，然后在function中进行过滤，因此代码如下：

    var sect = document.getElementById('inds');
    var section = sect.options[sect.selectedIndex].value;

    if(section !== '') {
      d3.selectAll("rect")
        .attr('opacity', function(d) {
          if(d.name !== section) {
            return 0.2;
          } else {
            return 1;
          }              
        })
    } else {
      d3.selectAll('rect')
        .attr('opacity', 1)
    }

在上面的示例中，我更改了opacity属性，但是您可以使用相同的方法更改fill。