如何將svg圖像附加到另一個svg圖像的rect元素？
[英]How do you append a svg image to a rect element of another svg image?
問題描述
我試圖將svg圖像附加到svg圖像中的rect元素，使用d3並嘗試
chart.selectAll("rect.bar")
.each(function(datum, index) {
d3.select(this)
.append("svg:image")
// ..some attributes
});
這會將<image>添加到dom，但圖像不會顯示。 我也嘗試使用jquery在.each塊中選擇this ，將其添加到dom中，但也沒有顯示。
對於jquery我添加了它
$(this).after("<svg:image xlink:href='/images/image.svg' x='20' y='20' width='20' height='20'/>");
使用html元素中的svg和xlink命名空間
<html lang="en" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
我已經能夠使用.selectAll為每個rect.bar創建一個圖像，但我想根據datum值創建更多圖像。
3 個解決方案
解決方案1
2 2012-04-27 09:06:07
我需要使用jQuery選擇父元素，使圖像不會被放在里面 rect.bar元素，但在它旁邊。 代碼在這里：
chart.selectAll("rect.bar")
.each(function(datum, index) {
var rectBar = $(this).parent()[0]; // Needs parent object, otherwise it will append inside rect
var num = 4;
for (var i = 0; i < num; i++) {
d3.select(rectBar)
.append("svg:image")
// ...some attributes
}
});
此外.parent()本身也不起作用。 我需要明確地做.parent()[0] 。 不知道為什么。
解決方案2
1 2012-05-02 00:26:25
我不知道這對你是否重要，但我相信你可以不使用jquery來做到這一點。 Mike Bostock的“ D3 Workshop ”演示文稿展示了如何在DOM中正確選擇和追加元素。
一旦你可以選擇任何元素，你可以附加任何SVG繪圖（例如矩形，圓形，文本等甚至外部圖像）。 為了控制附加圖像的位置，我相信你可以簡單地使用“dx”和“dy”坐標偏移控制器。
在示例“ 與常見HTML布局構造混合的多個D3餅圖 ”中，我首先基於HTML頁面上的HTML DIV位置創建多個SVG畫布。 然后我將條形放在SVG畫布上的特定位置。 然后我追加並將圖例項目符號放在同一SVG畫布上的不同點上。 最后，我將圖例文本附加到不同位置的同一SVG畫布上。 在每種情況下，我都使用dx和dy坐標控制器來控制對象的位置。
我希望這有幫助，
坦率
解決方案3
0 2012-04-26 16:27:11
試試吧。
chart.selectAll("rect.bar")
.each(function(datum, index) {
$(this).append("<img href='http://www.mysite.com/images/test.jpg' />")
// ..some attributes
});
如何將div標簽附加到SVG rect元素？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.