在甜甜圈中插入图像 [英] Inserting image inside donut
本文介绍了在甜甜圈中插入图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经使用D3js制作了各种甜甜圈图，我需要在甜甜圈中插入一个相同的图像，但是我不知道实现此目的的方法.谁能帮我这个?这是我的JS代码:
var data1 = [4,96];
var data2 = [1,99];
var data3 = [16,84];
var data4 = [12,88];
var data5 = [29,71];
var data6 = [15,85];
var data7 = [12,88];
var data8 = [10,90];
/* Reusable Drawing donut function*/
var width = 300,
height = 300,
radius = (Math.min(width, height) / 2) - 100;
function drawDonut(dataa,divchart){
var sym = "%"
var color = ["#00338D","#BC204B"];
var pie = d3.pie()
.value(function(d) { return d })(dataa);
var arc = d3.arc()
.outerRadius(radius - 10)
.innerRadius(radius - (radius/1.9));
var labelArc = d3.arc()
.outerRadius(radius - 31)
.innerRadius(radius - 31);
var svg = d3.select(divchart)
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" +60 + "," + 60 +")");
var g = svg.selectAll("arc")
.data(pie)
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.data(color)
.style("fill", function(d){return d});
}
drawDonut(data1,"#pie1")
drawDonut(data2,"#pie2")
drawDonut(data3,"#pie3")
drawDonut(data4,"#pie4")
drawDonut(data5,"#pie5")
drawDonut(data6,"#pie6")
drawDonut(data7,"#pie7")
drawDonut(data8,"#pie8")
我要插入的图像是一个svg，这是代码:
<g>
<path class="st0" d="M15.6,10.9c1.3,0,2.4-1.2,2.4-2.7c0-1.5-1.1-2.7-2.4-2.7c-1.3,0-2.4,1.2-2.4,2.7C13.2,9.7,14.2,10.9,15.6,10.9
L15.6,10.9z"/>
<path class="st0" d="M18.6,11.6h-1.2l-1.8,5.5l-1.8-5.5h-1.2c-1.3,0-2.4,1.2-2.4,2.7v13h2.4l1.2,16.4h3.6l1.2-16.4H21v-13
C21,12.8,19.9,11.6,18.6,11.6L18.6,11.6z"/>
<path class="st0" d="M31.9,10.9c1.3,0,2.4-1.2,2.4-2.7c0-1.5-1.1-2.7-2.4-2.7c-1.3,0-2.4,1.2-2.4,2.7C29.5,9.7,30.6,10.9,31.9,10.9
L31.9,10.9z"/>
<path class="st0" d="M39.8,25.2l-3.6-11.6c0,0-0.6-2-2.4-2h-3.6c-1.8,0-2.4,2-2.4,2l-3.6,11.6l1.2,0.7l4.2-9.5l-3.6,14.3h3.6
l1.2,13h2.4l1.2-13H38l-3.6-14.3l4.2,9.5L39.8,25.2L39.8,25.2z"/>
</g>
请问我能帮助decifer如何在甜甜圈图的孔中插入图像吗?谢谢
解决方案
您可以将每个d属性存储为单独的常量，并使用与父级相同的组选择将路径分别添加到drawDonut函数内部./p>
但是，一个更简单的解决方案是将所有内容保存为单个字符串...
var myGroup = '<g><path class="st0" d="M15.6,10.9c1.3,0,2.4-1.2,2.4-2.7c0-1.5-1.1-
-2.7c-1.3,0-2.4,1.2-2.4,2.7...etc...-14.3l4.2,9.5L39.8,25.2L39.8,25.2z"/></g>';
....并使用html方法将其附加:
g.append("g").html(myGroup);
注意事项:html()方法在内部使用innerHTML.在旧的浏览器中，这不适用于SVG元素.根据阿米莉亚·贝拉米·罗伊兹(Amelia Bellamy-Royds)的说法，在她的书
var myGroup = '<g><path class="st0" d="M15.6,10.9c1.3,0,2.4-1.2,2.4-2.7c0-1.5-1.1-2.7-2.4-2.7c-1.3,0-2.4,1.2-2.4,2.7C13.2,9.7,14.2,10.9,15.6,10.9L15.6,10.9z"/><path class="st0" d="M18.6,11.6h-1.2l-1.8,5.5l-1.8-5.5h-1.2c-1.3,0-2.4,1.2-2.4,2.7v13h2.4l1.2,16.4h3.6l1.2-16.4H21v-13C21,12.8,19.9,11.6,18.6,11.6L18.6,11.6z"/><path class="st0" d="M31.9,10.9c1.3,0,2.4-1.2,2.4-2.7c0-1.5-1.1-2.7-2.4-2.7c-1.3,0-2.4,1.2-2.4,2.7C29.5,9.7,30.6,10.9,31.9,10.9L31.9,10.9z"/><path class="st0" d="M39.8,25.2l-3.6-11.6c0,0-0.6-2-2.4-2h-3.6c-1.8,0-2.4,2-2.4,2l-3.6,11.6l1.2,0.7l4.2-9.5l-3.6,14.3h3.6l1.2,13h2.4l1.2-13H38l-3.6-14.3l4.2,9.5L39.8,25.2L39.8,25.2z"/></g>';
var data1 = [4, 96];
var data2 = [1, 99];
var data3 = [16, 84];
var data4 = [12, 88];
var data5 = [29, 71];
var data6 = [15, 85];
var data7 = [12, 88];
var data8 = [10, 90];
/* Reusable Drawing donut function*/
var width = 100,
height = 100,
radius = (Math.min(width, height) / 2);
function drawDonut(dataa, divchart) {
var sym = "%"
var color = ["#00338D", "#BC204B"];
var pie = d3.pie()
.value(function(d) {
return d
})(dataa);
var arc = d3.arc()
.outerRadius(radius - 10)
.innerRadius(radius - (radius / 1.9));
var labelArc = d3.arc()
.outerRadius(radius - 31)
.innerRadius(radius - 31);
var svg = d3.select(divchart)
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + 50 + "," + 50 + ")");
var g = svg.selectAll("arc")
.data(pie)
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.data(color)
.style("fill", function(d) {
return d
});
g.append("g")
.attr("transform", "translate(-15,-15) scale(0.6)")
.html(myGroup);
}
drawDonut(data1, "#pie1")
drawDonut(data2, "#pie2")
drawDonut(data3, "#pie3")
drawDonut(data4, "#pie4")
drawDonut(data5, "#pie5")
drawDonut(data6, "#pie6")
drawDonut(data7, "#pie7")
drawDonut(data8, "#pie8")
div {
display: inline;
}
<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="pie1"></div>
<div id="pie2"></div>
<div id="pie3"></div>
<div id="pie4"></div>
<div id="pie5"></div>
<div id="pie6"></div>
<div id="pie7"></div>
<div id="pie1"></div>
<div id="pie8"></div>
PS:变换中有一些魔术数字.您可以通过计算组的大小和初始绘制点来避免它们.
I have made various donut charts using D3js and I need to insert one same image inside the donut, but I can't figure out the way to achieve this. Can anyone help me with this? here's my JS code:
var data1 = [4,96];
var data2 = [1,99];
var data3 = [16,84];
var data4 = [12,88];
var data5 = [29,71];
var data6 = [15,85];
var data7 = [12,88];
var data8 = [10,90];
/* Reusable Drawing donut function*/
var width = 300,
height = 300,
radius = (Math.min(width, height) / 2) - 100;
function drawDonut(dataa,divchart){
var sym = "%"
var color = ["#00338D","#BC204B"];
var pie = d3.pie()
.value(function(d) { return d })(dataa);
var arc = d3.arc()
.outerRadius(radius - 10)
.innerRadius(radius - (radius/1.9));
var labelArc = d3.arc()
.outerRadius(radius - 31)
.innerRadius(radius - 31);
var svg = d3.select(divchart)
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" +60 + "," + 60 +")");
var g = svg.selectAll("arc")
.data(pie)
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.data(color)
.style("fill", function(d){return d});
}
drawDonut(data1,"#pie1")
drawDonut(data2,"#pie2")
drawDonut(data3,"#pie3")
drawDonut(data4,"#pie4")
drawDonut(data5,"#pie5")
drawDonut(data6,"#pie6")
drawDonut(data7,"#pie7")
drawDonut(data8,"#pie8")
the image I want to insert is a svg one, this is the code:
<g>
<path class="st0" d="M15.6,10.9c1.3,0,2.4-1.2,2.4-2.7c0-1.5-1.1-2.7-2.4-2.7c-1.3,0-2.4,1.2-2.4,2.7C13.2,9.7,14.2,10.9,15.6,10.9
L15.6,10.9z"/>
<path class="st0" d="M18.6,11.6h-1.2l-1.8,5.5l-1.8-5.5h-1.2c-1.3,0-2.4,1.2-2.4,2.7v13h2.4l1.2,16.4h3.6l1.2-16.4H21v-13
C21,12.8,19.9,11.6,18.6,11.6L18.6,11.6z"/>
<path class="st0" d="M31.9,10.9c1.3,0,2.4-1.2,2.4-2.7c0-1.5-1.1-2.7-2.4-2.7c-1.3,0-2.4,1.2-2.4,2.7C29.5,9.7,30.6,10.9,31.9,10.9
L31.9,10.9z"/>
<path class="st0" d="M39.8,25.2l-3.6-11.6c0,0-0.6-2-2.4-2h-3.6c-1.8,0-2.4,2-2.4,2l-3.6,11.6l1.2,0.7l4.2-9.5l-3.6,14.3h3.6
l1.2,13h2.4l1.2-13H38l-3.6-14.3l4.2,9.5L39.8,25.2L39.8,25.2z"/>
</g>
can you help me decifer how to insert the image in the hole of the donut chart please? thank you
解决方案
You can store each d attribute as an individual constant and append the paths individually inside the drawDonut function, using the same group selection as parent.
However, a simpler solution is just saving everything as a single string...
var myGroup = '<g><path class="st0" d="M15.6,10.9c1.3,0,2.4-1.2,2.4-2.7c0-1.5-1.1-
-2.7c-1.3,0-2.4,1.2-2.4,2.7...etc...-14.3l4.2,9.5L39.8,25.2L39.8,25.2z"/></g>';
.... and appending it using the html method:
g.append("g").html(myGroup);
Caveat, lector: the html() method uses innerHTML internally. That won't work on SVG elements in old browsers. According to Amelia Bellamy-Royds, in her book Using SVG with CCS3 and HTML5 (2018):
The latest version of web browsers even support
innerHTMLon SVG elements, but that is a recent addition to the core DOM specs.
For avoiding an unnecessary group inside another, you can also remove the <g> and </g> in the string.
Here is the demo:
var myGroup = '<g><path class="st0" d="M15.6,10.9c1.3,0,2.4-1.2,2.4-2.7c0-1.5-1.1-2.7-2.4-2.7c-1.3,0-2.4,1.2-2.4,2.7C13.2,9.7,14.2,10.9,15.6,10.9L15.6,10.9z"/><path class="st0" d="M18.6,11.6h-1.2l-1.8,5.5l-1.8-5.5h-1.2c-1.3,0-2.4,1.2-2.4,2.7v13h2.4l1.2,16.4h3.6l1.2-16.4H21v-13C21,12.8,19.9,11.6,18.6,11.6L18.6,11.6z"/><path class="st0" d="M31.9,10.9c1.3,0,2.4-1.2,2.4-2.7c0-1.5-1.1-2.7-2.4-2.7c-1.3,0-2.4,1.2-2.4,2.7C29.5,9.7,30.6,10.9,31.9,10.9L31.9,10.9z"/><path class="st0" d="M39.8,25.2l-3.6-11.6c0,0-0.6-2-2.4-2h-3.6c-1.8,0-2.4,2-2.4,2l-3.6,11.6l1.2,0.7l4.2-9.5l-3.6,14.3h3.6l1.2,13h2.4l1.2-13H38l-3.6-14.3l4.2,9.5L39.8,25.2L39.8,25.2z"/></g>';
var data1 = [4, 96];
var data2 = [1, 99];
var data3 = [16, 84];
var data4 = [12, 88];
var data5 = [29, 71];
var data6 = [15, 85];
var data7 = [12, 88];
var data8 = [10, 90];
/* Reusable Drawing donut function*/
var width = 100,
height = 100,
radius = (Math.min(width, height) / 2);
function drawDonut(dataa, divchart) {
var sym = "%"
var color = ["#00338D", "#BC204B"];
var pie = d3.pie()
.value(function(d) {
return d
})(dataa);
var arc = d3.arc()
.outerRadius(radius - 10)
.innerRadius(radius - (radius / 1.9));
var labelArc = d3.arc()
.outerRadius(radius - 31)
.innerRadius(radius - 31);
var svg = d3.select(divchart)
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + 50 + "," + 50 + ")");
var g = svg.selectAll("arc")
.data(pie)
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.data(color)
.style("fill", function(d) {
return d
});
g.append("g")
.attr("transform", "translate(-15,-15) scale(0.6)")
.html(myGroup);
}
drawDonut(data1, "#pie1")
drawDonut(data2, "#pie2")
drawDonut(data3, "#pie3")
drawDonut(data4, "#pie4")
drawDonut(data5, "#pie5")
drawDonut(data6, "#pie6")
drawDonut(data7, "#pie7")
drawDonut(data8, "#pie8")
div {
display: inline;
}
<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="pie1"></div>
<div id="pie2"></div>
<div id="pie3"></div>
<div id="pie4"></div>
<div id="pie5"></div>
<div id="pie6"></div>
<div id="pie7"></div>
<div id="pie1"></div>
<div id="pie8"></div>
PS: There are some magic numbers in the transform. You can avoid them by calculating the group's size and initial drawing point.
这篇关于在甜甜圈中插入图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
