我有一个这样定义的饼图:
var pie = d3.pie()
.sort(null)
.value(function(d) { return +d.value; });
var path = d3.arc()
.outerRadius(radius - 10)
.innerRadius(0.65*radius);
var arc = g.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc")
arc.append("path")
.attr("d", path)
.attr("fill", function(d, i) { return colours[i]; }) //Everything up to here works
.on('mouseover', function() {console.log('over'); arc.style("fill","red");});
最后一行只工作了一半 - 控制台确实打印“结束”,但该段没有改变颜色。这是错误的做法吗?
最佳答案
您应该使用 d3.select(this)
而不是 arc
选择当前悬停的元素:
// .on('mouseover', function() { arc.style("fill","red"); });
.on('mouseover', function() { d3.select(this).style("fill","red"); });
这是一个演示:
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var g = svg.append("g").attr("transform", "translate(100,100)")
var data = [
{ value: 4 }, { value: 12 }
];
var colours = ["green", "blue"];
var radius = 25;
var pie = d3.pie()
.sort(null)
.value(function(d) { return +d.value; });
var path = d3.arc()
.outerRadius(radius - 10)
.innerRadius(0.65*radius);
var arc = g.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc")
arc.append("path")
.attr("d", path)
.attr("fill", function(d, i) { return colours[i]; }) //Everything up to here works
// .on('mouseover', function() { console.log('over'); arc.style("fill","red"); });
.on('mouseover', function() { console.log('over'); d3.select(this).style("fill","red"); });
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
关于html - D3 在鼠标悬停时填充饼图段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50190526/