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

Question

我想在 D3 图表中将图像附加到中心甜甜圈 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 图表中的甜甜圈 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>