文本不可见但出现在检查员中

Question

我的上一个问题得到了如此迅速和顺利的回答，我以为我会回到另一个问题而我自己没有弄清楚。

我使用其中一个示例创建此图表：

data = [{ "label": "1", "value": 20 },
        { "label": "2", "value": 50 },
        { "label": "3", "value": 30 },
        { "label": "4", "value": 45 }];

var width = 400,
    height = 450;

var outerRadius = 200,
    innerRadius = outerRadius / 3,
    color = d3.scale.category20c();

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

var pieData = pie(data);

var arc = d3.svg.arc()
    .innerRadius(innerRadius);

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

svg.append("text")
    .attr("x", 0)
    .attr("y", -(outerRadius + 10))
    .style("text-anchor", "middle")
    .text("Title[enter image description here][1]");

svg.selectAll("path")
    .data(pieData)
  .enter().append("path")
    .each(function (d) { d.outerRadius = outerRadius - 20; })
    .attr("d", arc)
    .attr("fill", function (d, i) { return color(i); })
    .on("mouseover", arcTween(outerRadius, 0))
    .on("mouseout", arcTween(outerRadius - 20, 150));

svg.selectAll("path")
     .append("text")
     .attr("transform", function (d) {
         d.innerRadius = 0;
         d.outerRadius = outerRadius;
         return "translate(" + arc.centroid(d) + ")";
     })
     .attr("fill", "white")
     .attr("text-anchor", "middle")
     .text(function (d, i) { return data[i].label; });


function arcTween(outerRadius, delay) {
    return function () {
        d3.select(this).transition().delay(delay).attrTween("d", function (d) {
            var i = d3.interpolate(d.outerRadius, outerRadius);
            return function (t) { d.outerRadius = i(t); return arc(d); };
        });
    };
}

这个想法是，当你将鼠标悬停在饼图上的某个部分（圆环图？）时，它会扩展。然而，这使我的标签消失了，我无法让他们回来。我得到一个错误，或者他们只是没有出现在屏幕上（即使我在检查器中看到了标签）。我错过了任何明显的事情？

谢谢！

Answer 1

您无法将<text>元素附加到<path>元素。它根本不适用于SVG。即使不起作用，也会附加<text>元素。

话虽如此，一个解决方案是创造一个新的＆＃34;输入＆＃34;选择文本：

svg.selectAll(null)
    .data(pieData)
    .enter()
    .append("text")
    .attr("transform", function(d) {
        d.innerRadius = 0;
        d.outerRadius = outerRadius;
        return "translate(" + arc.centroid(d) + ")";
    })
    .attr("fill", "white")
    .attr("text-anchor", "middle")
    .text(function(d, i) {
        return data[i].label;
    });

这是您更新的代码：

＆＃13;

＆＃13;

data = [{
  "label": "1",
  "value": 20
}, {
  "label": "2",
  "value": 50
}, {
  "label": "3",
  "value": 30
}, {
  "label": "4",
  "value": 45
}];

var width = 400,
  height = 450;

var outerRadius = 200,
  innerRadius = outerRadius / 3,
  color = d3.scale.category20c();

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

var pieData = pie(data);

var arc = d3.svg.arc()
  .innerRadius(innerRadius);

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

svg.append("text")
  .attr("x", 0)
  .attr("y", -(outerRadius + 10))
  .style("text-anchor", "middle")
  .text("Title[enter image description here][1]");

svg.selectAll("path")
  .data(pieData)
  .enter().append("path")
  .each(function(d) {
    d.outerRadius = outerRadius - 20;
  })
  .attr("d", arc)
  .attr("fill", function(d, i) {
    return color(i);
  })
  .on("mouseover", arcTween(outerRadius, 0))
  .on("mouseout", arcTween(outerRadius - 20, 150));

svg.selectAll(null)
  .data(pieData)
  .enter()
  .append("text")
  .attr("transform", function(d) {
    d.innerRadius = 0;
    d.outerRadius = outerRadius;
    return "translate(" + arc.centroid(d) + ")";
  })
  .attr("fill", "white")
  .attr("text-anchor", "middle")
  .text(function(d, i) {
    return data[i].label;
  });


function arcTween(outerRadius, delay) {
  return function() {
    d3.select(this).transition().delay(delay).attrTween("d", function(d) {
      var i = d3.interpolate(d.outerRadius, outerRadius);
      return function(t) {
        d.outerRadius = i(t);
        return arc(d);
      };
    });
  };
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

＆＃13;

＆＃13;