我试图将 svg 图像附加到 rect svg 图像中的元素，使用 d3 并尝试
chart.selectAll("rect.bar")
.each(function(datum, index) {
d3.select(this)
.append("svg:image")
// ..some attributes
});
这增加了 <image>到dom，但图像不显示。我也试过使用 jquery 来选择 this在.each block ，将其添加到 dom，但也不显示。
对于 jquery，我添加了它
$(this).after("<svg:image xlink:href='/images/image.svg' x='20' y='20' width='20' height='20'/>");
与 svg和 xlink html 中的命名空间元素
<html lang="en" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
我已经能够为每个 rect.bar 创建一个图像与 .selectAll , 但我想根据 datum 创建更多值(value)。
最佳答案
我需要使用 jquery 来选择父元素，这样图像就不会被放在 inside 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]。不知道为什么。
关于javascript - 如何将 svg 图像附加到另一个 svg 图像的 rect 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10337375/