D3 charts - Image in center of donut chart SVG

Question

I want to append a image to the center donut svg in D3 charts. I am trying to change the SVG in JS, but I am not able to achieve this.

Currently I have added the image in html and it is not in center of donut chart.

Link to codepen : https://codepen.io/durairaj-the-looper/pen/xxbVWNG

JS :

var dataset = [
    { name: 'Stomach issues', percent: 29 },
    { name: 'Urinary tract infections (UTI)', percent: 13 },
    { name: 'Skin conditions', percent: 12 },
    { name: 'Cancer', percent: 12 },
    { name: 'Eye conditions', percent: 11 },
    { name: 'Ear infections', percent: 8 },
    { name: 'Pain', percent: 6 },
    { name: 'Growth', percent: 4 },
    { name: 'Foreign body obstruction', percent: 3 },
    { name: 'Allergies', percent: 2 }
];
var div = d3.select(".widget").append("div").attr("class", "toolTip");

var pie=d3.layout.pie()
        .value(function(d){return d.percent})
        .sort(null)
        .padAngle(.03);

var w=300,h=300;

var outerRadius=w/2;
var innerRadius=100;

var color = d3.scale.category10();

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

var svg=d3.select("#chart")
        .append("svg")
        .attr({
            width:700,
            height:h,
            class:'shadow'
        }).append('g')
        .attr({
            transform:'translate('+w/2+','+h/2+')'
        });
var path=svg.selectAll('path')
        .data(pie(dataset))
        .enter()
        .append('path')
        .attr({
            d:arc,
            fill:function(d,i){
                return color(d.data.name);
            }
        });

path.transition()
        .duration(1000)
        .attrTween('d', function(d) {
            var interpolate = d3.interpolate({startAngle: 0, endAngle: 0}, d);
            return function(t) {
                return arc(interpolate(t));
            };
        });

var restOfTheData=function(){
    var text=svg.selectAll('text')
            .data(pie(dataset))
            .enter()
            .append("text")
            .transition()
            .duration(200)
            .attr("transform", function (d) {
                return "translate(" + arc.centroid(d) + ")";
            })
            .attr("dy", ".4em")
            .attr("text-anchor", "middle")
            .text(function(d){
                return d.data.percent+"%";
            })
            .style({
                fill:'#fff',
                'font-size':'10px'
            });

    var legendRectSize=20;
    var legendSpacing=7;
    var legendHeight=legendRectSize+legendSpacing;


    var legend=svg.selectAll('.legend')
            .data(color.domain())
            .enter()
            .append('g')
            .attr({
                class:'legend',
                transform:function(d,i){
                    //Just a calculation for x & y position
                    return 'translate(+200,' + ((i*legendHeight)-125) + ')';
                }
            });
    legend.append('rect')
            .attr({
                width:legendRectSize,
                height:legendRectSize,
                rx:20,
                ry:20
            })
            .style({
                fill:color,
                stroke:color
            });

    legend.append('text')
            .attr({
                x:30,
                y:15
            })
            .text(function(d){
                return d;
            }).style({  
                'font-size':'14px'
            });
};

setTimeout(restOfTheData,1000);

I want to append a image to donut svg in D3 charts. I am trying to change the SVG in JS, but I am not able to achieve this.

Answer 1

You can do that using CSS

here is the code which worked.

Here is the codepen example: https://codepen.io/chintuyadav/pen/VwYmxzv

 var dataset = [ { name: 'Stomach issues', percent: 29 }, { name: 'Urinary tract infections (UTI)', percent: 13 }, { name: 'Skin conditions', percent: 12 }, { name: 'Cancer', percent: 12 }, { name: 'Eye conditions', percent: 11 }, { name: 'Ear infections', percent: 8 }, { name: 'Pain', percent: 6 }, { name: 'Growth', percent: 4 }, { name: 'Foreign body obstruction', percent: 3 }, { name: 'Allergies', percent: 2 } ]; var pie=d3.layout.pie() .value(function(d){return d.percent}) .sort(null) .padAngle(.03); var w=300,h=300; var outerRadius=w/2; var innerRadius=100; var color = d3.scale.category10(); var arc=d3.svg.arc() .outerRadius(outerRadius) .innerRadius(innerRadius); var svg=d3.select("#chart") .append("svg") .attr({ width:w, height:h, class:'shadow' }).append('g') .attr({ transform:'translate('+w/2+','+h/2+')' }); var path=svg.selectAll('path') .data(pie(dataset)) .enter() .append('path') .attr({ d:arc, fill:function(d,i){ return color(d.data.name); } }); path.transition() .duration(1000) .attrTween('d', function(d) { var interpolate = d3.interpolate({startAngle: 0, endAngle: 0}, d); return function(t) { return arc(interpolate(t)); }; }); var restOfTheData=function(){ var text=svg.selectAll('text') .data(pie(dataset)) .enter() .append("text") .transition() .duration(200) .attr("transform", function (d) { return "translate(" + arc.centroid(d) + ")"; }) .attr("dy", ".4em") .attr("text-anchor", "middle") .text(function(d){ return d.data.percent+"%"; }) .style({ fill:'#fff', 'font-size':'10px' }); var legendRectSize=20; var legendSpacing=7; var legendHeight=legendRectSize+legendSpacing; var legend=svg.selectAll('.legend') .data(color.domain()) .enter() .append('g') .attr({ class:'legend', transform:function(d,i){ //Just a calculation for x & y position return 'translate(-35,' + ((i*legendHeight)-65) + ')'; } }); legend.append('rect') .attr({ width:legendRectSize, height:legendRectSize, rx:20, ry:20 }) .style({ fill:color, stroke:color }); legend.append('text') .attr({ x:30, y:15 }) .text(function(d){ return d; }).style({ fill:'#929DAF', 'font-size':'14px' }); }; setTimeout(restOfTheData,1000);

 body { width: 100%; font-family: 'Roboto', sans-serif; height: 100%; } .legend { display:none; } .widget { margin: 0 auto; width:350px; margin-top:50px; background-color: #222D3A; border-radius: 5px; } .header{ background-color: #29384D; height:40px; color:#929DAF; text-align: center; line-height: 40px; border-top-left-radius: 7px; border-top-right-radius: 7px; font-weight: 400; font-size: 1.5em; text-shadow: 1px 1px #06060d; } .chart-container{ padding:25px; background: white url('https://www.iconsdb.com/icons/preview/gray/github-10-xxl.png') no-repeat center ; background-size:200px 200px; border: none !important; } .shadow { -webkit-filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.5) ); filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.5) ); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <div class="widget"> <div id="chart" class="chart-container"> </div> </div>