D3 在鼠标悬停时填充饼图段
D3 fill pie chart segment on mouseover
我有一个这样定义的饼图:
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");});
最后一行只工作了一半 - 控制台打印 'over',但该段没有改变颜色。这是错误的做法吗?
您应该 select 当前元素悬停在 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>
我有一个这样定义的饼图:
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");});
最后一行只工作了一半 - 控制台打印 'over',但该段没有改变颜色。这是错误的做法吗?
您应该 select 当前元素悬停在 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>