Javascript 在鼠标悬停事件中向d3饼图添加更多文本

我试图弄清楚如何使用

mouseover

在饼图上显示更多的文本，而不仅仅是绑定到饼图的数据。下面是我的功能代码

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

数组的长度相同。我真的希望，通过替换上面的

鼠标盖

，这样的东西会起作用

.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]);)
            })

---

但它所做的唯一一件事是显示

值

数组的所有元素，一个叠在另一个上，以及

名称

数组的最后一个元素。在这种情况下，

i

似乎总是最后一个索引。我该怎么做呢？我可以用另一种方式显示我想要的文本吗？提前感谢。

首先，变量

arcs

是一个数据绑定d3选择，它表示饼图的所有圆弧。因此，通过调用

arcs.append

，您将为饼图的每个部分追加一个

text

元素。我认为您的意思是根据鼠标悬停的内容仅附加一个

文本
元素，因此请将其重新编写为：

svg.append('text')
  ...

第二，在这个表达中：

.text(function(d,i){return (d.data +" " + names[i]);)

mouseover函数中的
d
和
i
已经表示正在鼠标移动的饼图切片的数据和索引。没有理由将其包装到另一个函数中，应重新编写：

.text(d.data +" " + names[i]);

下面是一个完整的示例：



身体{
字体：10px无衬线；
}
.弧形路径{
冲程：#fff；
}
可变宽度=960，
高度=500，
半径=数学最小值（宽度、高度）/2；
var color=d3.scale.category10（）；
var arc=d3.svg.arc（）
.外层（半径-10）
.内半径（0）；
var pie=d3.layout.pie（）
.sort（空）
.价值（功能（d）{
返回d值；
});
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
风险值数据=[{
值：Math.random（），
}, {
值：Math.random（），
}, {
值：Math.random（），
}, {
值：Math.random（），
}, {
值：Math.random（），
}]
变量名称=[“A”、“B”、“C”、“D”、“E”]；
var arcs=svg.selectAll（“.arc”）
.数据（pie（数据））
.enter（）.append（“g”）
.attr（“类”、“弧”）；
arcs.append（“路径”）
.attr（“d”，弧）
.样式（“填充”，功能（d，i）{
返回颜色（i）；
})
.on（“鼠标悬停”，功能（d，i）{
控制台日志（d）；
svg.append（“文本”）
.attr（“dy”，“.5em”）
.style（“文本锚定”、“中间”）
.style（“字体大小”，45）
.attr（“类别”、“标签”）
.style（“fill”，函数（d，i）{返回“black”；}）
.文本（名称[i]）；
})
.开启（“鼠标出”，功能（d）{
选择（“.label”）.remove（）；
});
这就是我要找的。非常感谢你。