javascript - D3 圆环图 : Display Value on segment hover

Question

长期潜伏者第一次海报。当饼图的相关部分悬停在上方时，我尝试显示 CSV 文件中的文本值。我有饼图(感谢 Mike Bostock)和悬停时的显示，但无法在鼠标移开时将其删除。在此阶段，任何帮助将不胜感激。

var width = 960,
    height = 600,
    radius = Math.min(width, height) / 2.5;

var arc = d3.svg.arc()
    .outerRadius(radius + 10)
    .innerRadius(radius - 70);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var color = d3.scale.ordinal()
    .range(["#0bd0d2", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);


var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.Total; });


var pieSlice = svg.selectAll("g.slice");

d3.csv("childcare.csv", function(error, data) {

  data.forEach(function(d) {
    d.population = +d.population;
  });

  var arcs = svg.selectAll("g.slice")
      .data(pie(data))
    .enter()
    .append("g")
      .attr("class", "arc")
    arcs.append("path")
        .attr("d", arc)
        .style("fill", function(d) { return color(d.data.place); })

        .on("mouseenter", function(d) {
                //console.log("mousein")
                 arcs.append("text")
                    .attr("transform", arc.centroid(d))
                    .attr("dy", ".5em")
                    .style("text-anchor", "middle")
                    .style("fill", "blue")
                    .attr("class", "on")
                    .text(d.data.place);
        })

        .on("mouseout", function(d) {
                 console.log("mouseout")
        });

});

Answer 1

您可以保存文本并在鼠标移开时将其删除:

var text;

var arcs = svg.selectAll("g.slice")
    .data(pie(data))
  .enter()
  .append("g")
    .attr("class", "arc")
  arcs.append("path")
      .attr("d", arc)
      .style("fill", function(d) { return color(d.data.place); })

      .on("mouseenter", function(d) {
              //console.log("mousein")
              text = arcs.append("text")
                  .attr("transform", arc.centroid(d))
                  .attr("dy", ".5em")
                  .style("text-anchor", "middle")
                  .style("fill", "blue")
                  .attr("class", "on")
                  .text(d.data.place);
      })

      .on("mouseout", function(d) {
               text.remove();
      });