如何在D3.js中的鼠標懸停時更改餅圖的其他分段？

Question

現在，在鼠標懸停時，“此”段會更改其不透明度。 如何使其他段更改其不透明度而不是“ this”？ 用純Javascript。

Answer 1

您可以使用數組filter功能查找其他餅圖切片。

filter（）方法創建一個新數組，其中所有元素都通過了由提供的函數實現的測試。

碼：

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>