javascript - D3 图表 - 圆环图 SVG 中心的图像

Question

我想将图像附加到 D3 图表中的中心 donut svg。我正在尝试更改 JS 中的 SVG，但无法实现此目的。

目前我已在 html 中添加了图像，但它不在圆环图的中心。

代码笔链接: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);

我想将图像附加到 D3 图表中的 donut svg。我正在尝试在 JS 中更改 SVG，但无法实现此目的。

Answer 1

您可以使用 CSS 来做到这一点

这是有效的代码。

这是代码笔示例: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>