1

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

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

这增加<image>了 dom，但图像不显示。我也尝试使用 jquerythis在.each块中进行选择，将其添加到 dom 中，但也没有显示。

对于 jquery，我添加了它

$(this).after("<svg:image xlink:href='/images/image.svg' x='20' y='20' width='20' height='20'/>");

在元素中使用svgandxlink命名空间html

<html lang="en" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

我已经能够创建一个图像，但我想根据价值创建更多rect.bar图像。.selectAlldatum

4

3 回答 3

2

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

于 2012-04-27T09:06:07.347 回答
1

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

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

在示例“混合常见 HTML 布局结构的多个 D3 饼图”中，我首先根据 HTML 页面上的 HTML DIV 位置创建多个 SVG 画布。然后，我将条形图放置在 SVG 画布上的特定位置。然后我将图例项目符号附加并放置在同一个 SVG 画布上的不同点。最后，我将图例文本附加并放置在同一 SVG 画布的不同位置。在每种情况下，我都使用 dx 和 dy 坐标控制器来控制对象的放置。

我希望这有帮助，

坦率

于 2012-05-02T00:26:25.247 回答
0

像这样试试。

chart.selectAll("rect.bar")
  .each(function(datum, index) {
    $(this).append("<img href='http://www.mysite.com/images/test.jpg' />")
        // ..some attributes
  });
于 2012-04-26T16:27:11.307 回答