如何更改鼠标悬停效果上的图表拱形颜色?

问题描述 投票:0回答:1

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

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

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

javascript angular d3.js pie-chart
1个回答
0
投票
  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
  });
  1. 了解鼠标悬停时会发生什么:
.on("mouseover", function () {
    d3.select(this)
      .select("path")
      .transition()
      .attr("d", arcOver) // <-- this is applying your radius transformation on hover
      .duration(200);
  })
  1. 结合两个概念:
.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);
  })
  1. 记住在鼠标移出时重置转换:
.on("mouseout", function () {
    tooltip.style("display", "none");
    d3.select(this)
      .select("path")
      .transition()
      // reset the hover transformations back to initial state:
      .attr("d", arc)
      .style("fill", function (d) {
        return color(d.data.name);
      })
      .style("stroke", "steelblue")
      .duration(500);
  });
© www.soinside.com 2019 - 2024. All rights reserved.