d3 Pie Chart - Image on Outside Label - d3.js

Question

Hi am trying to place an image on an outside label of a pie chart. Setting an img or image tag will show the tag written on the label.
replacing all text values does not work like:
var svgs = d3.selectAll("text");
svgs.append("svg:image")
.attr("xlink:href", "/web/images/edit.png")
.attr("width", 24)
.attr("height", 24);
Cannot believe that a simple thing like this cannot be made simple.Can anyone help?

Answer 1

Your question isn't specific enough for a concrete answer but as an example, I've taken this nice pie chart and modified to replace one of the labels with an image:
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();
Here's a working example.
EDITS FOR COMMENTS
My original answer was straight d3, but since you are using another library, d3pie, do it like this after calling d3pie:
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);
Working example here.