javascript - 如何在 D3.js 中鼠标悬停时更改饼图的其他部分？

Question

现在，将鼠标悬停在“此”段上会更改其不透明度。如何使其他部分改变其不透明度而不是“这个”？在纯 JavaScript 中。

Answer 1

您可以使用数组filter函数来查找其他饼图切片。

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

代码:

var g = svg.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
    .attr("class", "arc")
    .on('mouseover', function() {
        var current = this;
        var others = svg.selectAll(".arc").filter(function(el) {
            return this != current
        });
        others.selectAll("path").style('opacity', 0.8);
    })
    .on('mouseout', function() {
        var current = this;
        var others = svg.selectAll(".arc").filter(function(el) {
            return this != current
        });
        others.selectAll("path").style('opacity', 1);
    });

var json_data = [{
  "sex": "male",
  "name": "Ted",
  "age": 23
}, {
  "sex": "male",
  "name": "Mark",
  "age": 33
}, {
  "sex": "female",
  "name": "Mary",
  "age": 32
}, {
  "sex": "male",
  "name": "Valery",
  "age": 26
}, {
  "sex": "female",
  "name ": "Olga",
  "age": 29
}, {
  "sex": "male",
  "name": "John",
  "age": 26
}];

var width = 960,
  height = 500,
  radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
  .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var percentageFormat = d3.format("%");

var arc = d3.svg.arc()
  .outerRadius(radius - 10)
  .innerRadius(0);

var pie = d3.layout.pie()
  .sort(null)
  .value(function(d) {
    return d.values;
  });

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


//d3.json("staff3.json", function(error, json_data) {

  var data = d3.nest()
    .key(function(d) {
      return d.sex;
    })
    .rollup(function(d) {
      return d.length;
    }).entries(json_data);

  data.forEach(function(d) {
    d.percentage = d.values / json_data.length;
  });

  console.log("data variable", data);
  console.log("pie(data)", pie(data));

  var g = svg.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
    .attr("class", "arc")
    .on('mouseover', function() {
      var current = this;  
      var others = svg.selectAll(".arc").filter(function(el) {
        return this != current
      });
      others.selectAll("path").style('opacity', 0.8);
    })
    .on('mouseout', function() {
      var current = this;
      d3.select(this)
        .style('opacity', 1);
      var others = svg.selectAll(".arc").filter(function(el) {
        return this != current
      });
      others.selectAll("path").style('opacity', 1);
    })   

  g.append("path")
    .attr("d", arc)
    .style("fill", function(d, i) {
      return color(i);
    });

  g.append("text")
    .attr("transform", function(d) {
      return "translate(" + arc.centroid(d) + ")";
    })
    .attr("dy", ".35em")
    .style("text-anchor", "middle")
    .text(function(d) {
      console.log("d is", d);
      return percentageFormat(d.data.percentage);
    });
//});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>