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

这是一个完整的例子：

＆＃13;

<!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>

＆＃13;

在mouseover事件上向d3饼图添加更多文本

1 个答案: