Question

我尝试将svg图像附加到svg图像中的rect元素，使用d3并尝试

chart.selectAll("rect.bar")
  .each(function(datum, index) {
    d3.select(this)
      .append("svg:image")
        // ..some attributes
  });

这会将<image>添加到dom，但图片不会显示。我还尝试使用jquery在this块中选择.each，将其添加到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值创建更多图片。

Answer 1

我需要使用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]。不知道为什么。

Answer 2

我不知道这对你是否重要，但我相信你可以在不使用jquery的情况下做到这一点。 Mike Bostock的“D3 Workshop”演示文稿展示了如何在DOM中正确选择和追加元素。

一旦你可以选择任何元素，你可以附加任何SVG绘图（例如矩形，圆形，文本等甚至外部图像）。为了控制附加图像的位置，我相信你可以简单地使用“dx”和“dy”坐标偏移控制器。

在示例“Multiple D3 Pie Charts Mixed With Common HTML Layout Constructs”中，我首先根据HTML页面上的HTML DIV位置创建多个SVG画布。然后我将条形放在SVG画布上的特定位置。然后我追加并将图例项目符号放在同一SVG画布上的不同点上。最后，我将图例文本附加到不同位置的同一SVG画布上。在每种情况下，我都使用dx和dy坐标控制器来控制对象的放置。

我希望这有帮助，

谢

Answer 3

试试这样。

chart.selectAll("rect.bar")
  .each(function(datum, index) {
    $(this).append("<img href='http://www.mysite.com/images/test.jpg' />")
        // ..some attributes
  });

如何将svg图像附加到另一个svg图像的rect元素？

3 个答案: