如何在鼠标悬停时改变饼图拱形颜色? 使用 .outerRadius(103 + 5);对于悬停变换,但如何对拱门应用一些颜色变化?请帮忙
var arcOver = d3.arc()
.innerRadius(0)
.outerRadius(103 + 5);
您看到的颜色来自预定义的颜色调色板(在本例中为
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
});
.on("mouseover", function () {
d3.select(this)
.select("path")
.transition()
.attr("d", arcOver) // <-- this is applying your radius transformation on hover
.duration(200);
})
.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);
})
.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);
});