How to add image at the end of Arc - d3.js

Question

I am using d3 js i have to show image at the end of the arc how can i achieve that below is my example
var total_codes = 8;
var remaining_codes = 4;
var issued = total_codes - remaining_codes;
var coloursArray = ["#128ED2", "#dadada"];
var dataset = {
privileges: [issued, remaining_codes]
};
var width = 160,
height = 160,
radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal()
.range(coloursArray);
var pie = d3.layout.pie()
.sort(null);
var arc = d3.svg.arc()
.innerRadius(radius - 30)
.outerRadius(radius);
var svg = d3.select("#donut").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var path = svg.selectAll("path")
.data(pie(dataset.privileges))
.enter().append("path")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", arc);
path.transition().duration(750);
var point = path.node().getPointAtLength(path.node().getTotalLength() / 2);
svg.append("image")
.attr("cx", point.x)
.attr("cy", point.y)
.attr({
"xlink:href": "http://run.plnkr.co/preview/ckf41wu0g00082c6g6bzer2cc/images/pacman_active_icon.png", //nothing visible
width: 35,
height: 36
});
svg.append("text")
.attr("dy", ".0em")
.style("text-anchor", "middle")
.attr("class", "inside")
.html(function() {
return "<tspan x='0' dy='0em'>External</tspan><tspan x='0' dy='1.2em'>Privileges</tspan>";
}); // Add your code here
<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="donut"></div>

Answer 1

It's a bit tedious, but the following works.
You take the first element of pieData, which denotes the blue arc. Then calculate the offset to put the pacman in the right position, using trigonometry. Finally, first translate it so it rotates around its centre, then rotate it the required amount.
I placed it at radius - 15 from the centre, because that is the middle of the 30 pixel wide arc.
var total_codes = 8;
var remaining_codes = 5;
var issued = total_codes - remaining_codes;
var coloursArray = ["#128ED2", "#dadada"];
var dataset = {
privileges: [issued, remaining_codes]
};
var width = 160,
height = 160,
radius = Math.min(width, height) / 2,
iconSize = 48;
var color = d3.scale.ordinal()
.range(coloursArray);
var pie = d3.layout.pie()
.sort(null);
var arc = d3.svg.arc()
.innerRadius(radius - 30)
.outerRadius(radius);
var svg = d3.select("#donut").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var pieData = pie(dataset.privileges);
var path = svg.selectAll("path")
.data(pieData)
.enter().append("path")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", arc);
path.transition().duration(750);
svg
.append('g')
.attr('class', 'pacmancontainer')
.style('transform', function() {
// the radius of the center of the arc, also the hypothenuse of a triangle
var meanRadius = radius - 15;
var angleRadians = pieData[0].endAngle - Math.PI / 2;
var xOffset = Math.cos(angleRadians) * meanRadius;
var yOffset = Math.sin(angleRadians) * meanRadius;
return " translate(" + xOffset + "px, " + yOffset + "px)";
})
.append("image")
.attr({
"xlink:href": "http://run.plnkr.co/preview/ckf41wu0g00082c6g6bzer2cc/images/pacman_active_icon.png", //nothing visible
width: iconSize,
height: iconSize
})
// Make sure the Pacman rotates around its center
.style('transform-origin', (iconSize / 2) + 'px ' + (iconSize / 2) + 'px')
.style('transform', function() {
var angleDegrees = pieData[0].endAngle / (2 * Math.PI) * 360;
return "translate(-" + (iconSize / 2) + "px, -" + (iconSize / 2) + "px) rotate(" + angleDegrees + "deg)";
});
svg.append("text")
.attr("dy", ".0em")
.style("text-anchor", "middle")
.attr("class", "inside")
.html(function() {
return "<tspan x='0' dy='0em'>External</tspan><tspan x='0' dy='1.2em'>Privileges</tspan>";
}); // Add your code here
<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="donut"></div>