d3.js - 筛选 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 中的所有矩形，并在函数中过滤它们，因此代码如下所示:

    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。