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

EN

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

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

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

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

我希望这能帮到你,

弗兰克

像这样试一下。

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