html - 鼠标悬停在 d3 圆环图上时图例文本背景发生变化

Question

我有一个圆环图，其值显示在鼠标悬停时。但是，我想在将鼠标悬停在相应的圆环图区域上时更改图例文本背景。

return {
    restrict: 'E',
    scope: {
        values: '='
    },
    link: function (scope, element, attrs) {
        scope.$watch('values', function(values) {
            var data = [];
            if(values) { 
                console.log('values from directive: ', values); 

              var w = 700,
                h = 700,
                r = 290,
                inner = 190,
                color = d3.scale.category20();

          data=values;
            var total = d3.sum(data, function(d) {
                return d3.sum(d3.values(d));
            });
            var vis = d3.select("#pieChartsD3")
                .append("svg:svg")
                .data([data])
                .attr("width", w)
                .attr("height", h)
                .append("svg:g")
                .attr("transform", "translate(" +320+ "," +320+ ")")
            var textTop = vis.append("text")
                .attr("dy", ".35em")
                .style("text-anchor", "middle")
                .attr("class", "textTop")
                .text( "TOTAL" )
                .attr("y", -10),
            textBottom = vis.append("text")
                .attr("dy", ".35em")
                .style("text-anchor", "middle")
                .attr("class", "textBottom")
                .text(total.toFixed(0) )
                .attr("y", 10);
            var arc = d3.svg.arc()
                .innerRadius(inner)
                .outerRadius(r);
            var arcOver = d3.svg.arc()
                .innerRadius(inner + 20)
                .outerRadius(r + 20);

            var pie = d3.layout.pie()
                .value(function(d) { return d.val; });

            var arcs = vis.selectAll("g.slice")
                .data(pie)
                .enter()
                    .append("svg:g")
                        .attr("class", "slice")
                         .style('word-wrap', 'break-word')
                        .on("mouseover", function(d) {
                            d3.select(this).select("path").transition()
                                .duration(200)
                                .attr("d", arcOver)

                            textTop.text(d3.select(this).datum().data.name)
                                .style('fill', 'red')

                                .attr("y", -10);
                            textBottom.text(d3.select(this).datum().data.val.toFixed(0))
                                .style('fill', 'blue')
                                .attr("y", 10);
                        })
                        .on("mouseout", function(d) {
                            d3.select(this).select("path").transition()
                                .duration(100)
                                .attr("d", arc);

                            textTop.text( "TOTAL" )
                                .attr("y", -10);
                            textBottom.text(total.toFixed(0));
                        });
            arcs.append("svg:path")
                .attr("fill", function(d, i) { return color(i); } )
                .attr("d", arc);
            console.log("datas length: "+data.length)
            var legend = d3.select("#legend").append("svg")
                .attr("class", "legend")
                .attr("width", 400)
                .attr("height", 20*data.length)
                .selectAll("g")
                .data(data)
                .enter().append("g")
                .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
            legend.append("rect")
                .attr("width", 18)
                .attr("height", 18)
                .style("fill", function(d, i) { return color(i); });
            legend.append("text")
                .attr("x", 24)
                .attr("y", 9)
                .attr("dy", ".35em")
                .text(function(d) { return d.name; });


        }

    })
}
}

Answer 1

(顺便说一句，我正在推断你的请求，因为你没有明确提出问题。话虽如此......)

在 .on("mouseover", function(d) { block 中，添加另一个部分:

legend.filter(function(l){
  l === d; // remember d is the value bound to the donut segment
})
.attr("fill","yellow")

并确保通过在 .on("mouseout".

中将 fill 设置回灰色或无来编写撤销它的逻辑。