javascript - d3 附加带有 svg 扩展名的图像

Question

我正在尝试将扩展名为“.svg”的 svg 图像添加到我的图表(另一个使用 d3 创建的 svg 图像)。

这是代码:

d3.select("#chart1 svg")
  .append("svg:image")
  .attr("xlink:href", "img/icons/sun.svg")
  .attr("width", 40)
  .attr("height", 40)
  .attr("x", 228)
  .attr("y",53);

如您所见，我正在设置“xlink:href”属性，但 d3 在浏览器中将其更改为 href:

<image href="img/icons/sun.svg" width="40" height="40" x="228" y="53"></image>

事实上，如果我使用 png 扩展，这段代码可以完美运行。有什么想法吗？

Answer 1

代码应按原样工作 - 此处您可以看到将 .svg 文件附加到 d3 的示例:

http://jsfiddle.net/am8ZB/

不要忘记图片可能确实存在，但您看不到它 -您应该使用浏览器开发人员工具检查页面以查看图片是否已放置在 View 区域之外(例如，由于您的 x/y 值)。

有关 #chart1 的更多信息在这种情况下会有所帮助。