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

Question

我想弄清楚如何使用 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 数组的长度相同。我真的希望通过替换上面的 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 始终是最后一个索引。我该怎么做？我可以用另一种方式显示我想要的文本吗？提前谢谢你。

Answer 1

首先，变量arcs是一个数据绑定的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>

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

Adding more text to d3 pie chart on mouseover event

javascript

mouseover

d3.js