AngularJS D3JS 圆环图悬停时圆弧颜色变化

Question

我正在使用 d3.js 和 AngularJS 创建甜甜圈。这是我的 Donut，默认情况下，我需要为甜甜圈图的所有弧线设置相同的颜色，这样效果很好。现在，在悬停特定弧线时，我需要将该特定弧线的颜色更改为蓝色，但这是行不通的。任何人都可以帮助我吗？

以下是提供的参考插件的答案。 :

 scope.mouseOverPath = function(d) {

          d3.select(this)
            .transition()
            .duration(duration)
            .style("fill", "blue")
            .each("start", function(d) {
              labelRadius = radius + chartConfig.labelPaddingOver;
              d3.select(this.parentNode).select('.legend')
                .transition()
                .attr("transform", function(d) {
                  var c = arc.centroid(d),
                    x = c[0],
                    y = c[1],
                    height = Math.sqrt(x * x + y * y);
                  return "translate(" + (x / height * labelRadius) + ',' +
                    (y / height * labelRadius) + ")";
                });
            })

... }

scope.mouseOutPath = function(d) {

          d3.select(this)
            .transition()
            .style('fill', function(d) {
              return color(d.data.label);
            })
            .each("start", function(d) {

              labelRadius = radius + chartConfig.labelPadding;


              d3.select(this.parentNode).select('.legend')
                .transition()
                .attr("transform", function(d) {
                  var c = arc.centroid(d),
                    x = c[0],
                    y = c[1],
                    height = Math.sqrt(x * x + y * y);
                  return "translate(" + (x / height * labelRadius) + ',' +
                    (y / height * labelRadius) + ")";
                });

 
           })
...
}

Answer 1

在指令的 scope.mouseOverPath 和 scope.mouseOutPath 方法中使用 d3 的 style 方法就可以了。

https://plnkr.co/edit/P98rPVKOHOgN5fKB

AngularJS D3JS 圆环图悬停时圆弧颜色变化

AngularJS D3JS Donut chart colour change of arc on hover

javascript

d3.js

angularjs

donut-chart

angularjs-directive