我想弄清楚如何使用 mouseover 在饼图上显示更多文本，而不仅仅是绑定(bind)到饼图的数据。下面是我的功能代码
function Pie(value,names){
svg.selectAll("g.arc").remove()
var outerRadius = 100;
var innerRadius = 0;
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
var pie = d3.layout.pie();
var color = d3.scale.category10();
var arcs = svg.selectAll("g.arc")
.data(pie(value))
.enter()
.append("g")
.attr("class", "arc")
.attr("transform", "translate(950,80)");
arcs.append("path")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", arc)
.on("mouseover",function(d,i) {
arcs.append("text")
.attr("dy", ".5em")
.style("text-anchor", "middle")
.style("fill", function(d,i){return "black";})
.text(d.data)
})
.on("mouseout", function(d) {
arcs.select("text").remove();
});}
names 数组的长度与传递给饼图的value 数组的长度相同。我真的希望通过替换上面的 mouseover 可以实现类似的功能。
.on("mouseover",function(d,i) {
arcs.append("text")
.attr("dy", ".5em")
.style("text-anchor", "middle")
.style("fill", function(d,i){return "black";})
.text(function(d,i){return (d.data +" " + names[i]);)
})
但它所做的唯一一件事就是显示 values 数组的所有元素，一个一个地堆叠在另一个之上，以及 names 数组的最后一个元素。在这种情况下，i 似乎始终是最后一个索引。我该怎么做？我可以用另一种方式显示我想要的文本吗？提前谢谢你。
最佳答案
首先，变量 arcs 是一个数据绑定(bind)的 d3 选择，代表饼图的所有弧线。因此，通过调用 arcs.append，您将为每个饼图附加一个 text 元素。我想你的意思是只根据鼠标悬停的内容附加一个 text 元素，所以将其重写为:
svg.append('text')
...
其次，在这个表达式中:
.text(function(d,i){return (d.data +" " + names[i]);)
d 和i 已经表示鼠标悬停的饼图切片的数据和索引。没有理由将它包装在另一个函数中，应该重写:
.text(d.data +" " + names[i]);
这是一个完整的例子:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.arc path {
stroke: #fff;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500,
radius = Math.min(width, height) / 2;
var color = d3.scale.category10();
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.value;
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var data = [{
value: Math.random(),
}, {
value: Math.random(),
}, {
value: Math.random(),
}, {
value: Math.random(),
}, {
value: Math.random(),
}]
var names = ["A","B","C","D","E"];
var arcs = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
arcs.append("path")
.attr("d", arc)
.style("fill", function(d,i) {
return color(i);
})
.on("mouseover", function(d, i) {
console.log(d);
svg.append("text")
.attr("dy", ".5em")
.style("text-anchor", "middle")
.style("font-size", 45)
.attr("class","label")
.style("fill", function(d,i){return "black";})
.text(names[i]);
})
.on("mouseout", function(d) {
svg.select(".label").remove();
});
</script>
</body>
</html>关于javascript - 在鼠标悬停事件上向 d3 饼图添加更多文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33860070/