d3js - image not showing in arc - d3.js

Question

I am creating a group with arc, and appending a image tag in it. in the image tag i am attaching a image using xlink:href but in the out put i am able to see anything.
any one help me to find the issue with my code:
here is my full code:
var dashBoardViewer = function (params) {
var container = params.container,
width = params.width,
height = params.height,
groups = params.requiredGroup,
inRadius = params.inRadius,
outRadius = params.outRadius;
return {
init : function () {
this.createSvg();
this.createGroup();
},
createSvg : function () {
this.svg = d3.select(container).append('svg').attr({
width:width,
height:height
});
},
createGroup : function () {
for(var i = 1; i <= groups; ++i) {
var group = this.svg.append('svg:g')
.attr({
id : 'group'+i,
class:'group'
});
this.arcCreator(group, i);
}
},
arcCreator : function (group, index) {
//move group
switch (index) {
case 1 :
group.attr('transform', "translate("+outRadius+','+outRadius+")");
break;
case 2 :
group.attr('transform', "translate("+(width/2)+','+(outRadius*2)+")");
break;
case 3 :
group.attr('transform', "translate("+(width-outRadius)+','+outRadius+")");
break;
case 4 :
group.attr('transform', "translate("+outRadius*1.5+','+(height-outRadius)+")");
break;
case 5 :
group.attr('transform', "translate("+(width-(outRadius*1.5))+','+(height-outRadius)+")");
break;
}
var arc = d3.svg.arc()
.innerRadius(inRadius)
.outerRadius(outRadius-10) //deducting the stroke width
.startAngle(0)
.endAngle(360)
return group.append("path")
.attr({"fill":"none",'stroke-width':5,'stroke':'#fff'})
.attr("id", function(d,i){return "s"+i;})
.attr("d",arc)
.append('image')
.attr({
"xlink:href":"images/circleImg.png", //nothing visible
width:257,
height:258
});
}
}
}
dashBoardViewer({
container:'.container',
width:1100,
height:630,
requiredGroup : 5,
inRadius : 0,
outRadius : 129
}).init();
my html output : one of the group
<g id="group1" class="group" transform="translate(129,129)"><path fill="none" stroke-width="5" stroke="#fff" id="s0" d="M0,119A119,119 0 1,1 0,-119A119,119 0 1,1 0,119Z"><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/circleImg.png" width="257" height="258"></image></path></g>

Answer 1

The way you're doing the xlink:href isn't correct. Try this:
.attr('xlink:href', 'path/to/image.png')
.attr('height', '258')
.attr('width', '257')
It's easier for d3 to understand those different attributes when they are split up. Also, if the xlink:href doesn't work, try just using href
EDIT
If you wanted to add a click handler, d3 has the ability to do that as well, but order is what matters. So let's take your example from earlier
return group.append("path")
.attr({"fill":"none",'stroke-width':5,'stroke':'#fff'})
.attr("id", function(d,i){return "s"+i;})
.attr("d",arc)
.append('image')
.attr('xlink:href', 'path/to/image.png')
.attr('height', '258')
.attr('width', '257')
If you wanted a click handler onto the path, you would put it right before you append the image, like so:
return group.append("path")
.attr({"fill":"none",'stroke-width':5,'stroke':'#fff'})
.attr("id", function(d,i){return "s"+i;})
.attr("d",arc)
.on('click', /*insert function name or anonymous function*/)
.append('image')
.attr('xlink:href', 'path/to/image.png')
.attr('height', '258')
.attr('width', '257')
If you want it to be appended to the image, you would do that same little line of code, just further down so it is attached to the image
return group.append("path")
.attr({"fill":"none",'stroke-width':5,'stroke':'#fff'})
.attr("id", function(d,i){return "s"+i;})
.attr("d",arc)
.append('image')
.attr('xlink:href', 'path/to/image.png')
.attr('height', '258')
.attr('width', '257')
.on('click', /*insert function name or anonymous function*/)
d3 also has the ability to do transitions which follow the format of d3.transition(). I haven't really gone too far into the transitions with d3, but Visual.ly did a great blog post explaining the basics of them. d3's API is also very thorough in explaining how they work