D3饼图拱形鼠标悬停效果

Question

如何在鼠标悬停时改变饼图拱形颜色？ 使用 .outerRadius(103 + 5);对于悬停变换，但如何对拱门应用一些颜色变化？请帮忙

var arcOver = d3.arc()
        .innerRadius(0)
        .outerRadius(103 + 5);

https://jsfiddle.net/anoopsuda/1jnLda78/1/

Answer 1

1. 了解如何应用颜色：

您看到的颜色来自预定义的颜色调色板（在本例中为

d3.schemeCategory20

）：

var color = d3.scaleOrdinal(d3.schemeCategory20);

这部分定义了饼图中切片的初始外观：

g.append("path")
  .attr("d", arc)
  .style("fill", function (d) {
    return color(d.data.name); // <-- fill each slice with a unique color for a unique name
  });

2. 了解鼠标悬停时会发生什么：

.on("mouseover", function () {
    d3.select(this)
      .select("path")
      .transition()
      .attr("d", arcOver) // <-- this is applying your radius transformation on hover
      .duration(200);
  })

3. 结合两个概念：

.on("mouseover", function () {
    d3.select(this)
      .select("path")
      .transition()
      // increase the radius:
      .attr("d", arcOver)
      // AND ALSO change the colors:
      .style("fill", function (d) {
        // get the current color:
        var fillColor = color(d.data.name);
        // i.e. increase its brightness a little:
        var brigtherColor = d3.color(fillColor).brighter(0.5);
        // apply the brightened color
        return brigtherColor;
      })
      // we can do the same to the stroke/border:
      .style("stroke", function (d) {
        var fillColor = color(d.data.name);
        // in this case we darken it a little to show the contrast:
        var darkerStrokeColor = d3.color(fillColor).darker(0.5);
        return darkerStrokeColor;
      })
      .duration(200);
  })

4. 记住在鼠标移出时重置转换：

.on("mouseout", function () {
    tooltip.style("display", "none");
    d3.select(this)
      .select("path")
      .transition()
      // reset the hover transformations back to initial:
      .attr("d", arc)
      .style("fill", function (d) {
        return color(d.data.name);
      })
      .style("stroke", "steelblue")
      .duration(500);
  });