D3.js d3饼图-外部标签上的图像

您好，我正在尝试将图像放置在饼图的外部标签上。设置img或图像标签将显示标签上写的标签

替换所有文本值的工作方式不同于：

var svgs =  d3.selectAll("text");            
    svgs.append("svg:image")
      .attr("xlink:href", "/web/images/edit.png")
      .attr("width", 24)
      .attr("height", 24);

---

真不敢相信像这样简单的事情不可能变得简单。有人能帮忙吗

您的问题不够具体，无法给出具体的答案，但作为一个示例，我已将其修改为用图像替换其中一个标签：

var text = svg.select(".labels").selectAll("text")
    .data(pie(data), key);

var img = svg.select(".images").selectAll("image")
  .data(pie(data), key);

 text.enter()
    .append("text")
    .filter(function(d,i){
      return d.data.label !== "do";  //<-- on the "do" label suppress the text
    })
    .attr("dy", ".35em")
    .text(function(d) {
        return d.data.label;
    });

text.transition().duration(1000)
    .attrTween("transform", function(d) {
        this._current = this._current || d;
        var interpolate = d3.interpolate(this._current, d);
        this._current = interpolate(0);
        return function(t) {
            var d2 = interpolate(t);
            var pos = outerArc.centroid(d2);
            pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
            return "translate("+ pos +")";
        };
    })
    .styleTween("text-anchor", function(d){
        this._current = this._current || d;
        var interpolate = d3.interpolate(this._current, d);
        this._current = interpolate(0);
        return function(t) {
            var d2 = interpolate(t);
            return midAngle(d2) < Math.PI ? "start":"end";
        };
    });

function midAngle(d){
    return d.startAngle + (d.endAngle - d.startAngle)/2;
}

text.exit()
    .remove();

img.enter()
    .append("image")
    .filter(function(d,i){
      return d.data.label === "do"; //<-- only add image on "do"
    })
    .attr("xlink:href", "http://placehold.it/24x24")
.attr("width", 24)
.attr("height", 24);

img.transition().duration(1000)
    .attrTween("transform", function(d) {
        this._current = this._current || d;
        var interpolate = d3.interpolate(this._current, d);
        this._current = interpolate(0);
        return function(t) {
            var d2 = interpolate(t);
            var pos = outerArc.centroid(d2);
            pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
            return "translate("+ pos +")";
        };
    })

img.exit()
    .remove();

---

工作示例。

很好，是的，我正在寻找这样的图像，但在常规的基本d3馅饼上，不是甜甜圈。我的javascript太糟糕了，我无法将此信息传输到常规派。没有.labels类。不明白为什么selectAll（“文本”）不能像上面那样工作。@user1786641，上面的代码无法工作，因为它将附加一个图像作为

文本

元素的子元素。这不是有效的SVG。创建一个示例Plunker或JSFIDLE，这样我就可以看到你在做什么。在我的常规Pie SVG中，标签存储在这样的标签中：标签的文本，所以我认为是d3。selectAll（“文本”）返回我需要修改的所有SVG标签元素。不幸的是，d3pie源不可用，所以你不会see@user1786641，见上面的新答案。对于未来的问题，请包括所有相关细节和示例。例如，如果我知道你使用的是

d3pie

，而不是直接

d3

，那会节省我一点时间。

setTimeout(function(){
    var labelG = d3.select('#p0_labelGroup1-outer');
    labelG.select('text').remove();
    labelG
      .append("svg:image")
      .attr("xlink:href", "http://lorempixel.com/60/60/animals/")
      .attr("width", 61)
      .attr("height", 61)
      .attr("x", -20)
      .attr("y", -30);
    }, 10);