D3：如何以编程方式调整 SVG 图像路径元素？

Question

使用图标作为数据点

受this block 演示的将 svg 图像用作数据元素的能力的启发，我想更进一步并使用 SVG 图像（SVG 路径），这样我还可以调整它们的笔触颜色和粗细。

这是我上面链接的块的屏幕截图：

---

使用 SVG 路径作为图标

代码使用图像，而不是 SVG 路径。我模仿了代码，将我的 .attr("xlink:href", "https://github.com/favicon.ico") 等价物指向一个 svg 图像。例如，.attr("xlink:href", "../images/my_logo.svg")，其中my_logo.svg 是一个图标，类似于上面示例中显示的内容，但具有有效的 svg 元素。例如，my_logo.svg 元素的开头是这样的：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="900.000000pt" height="900.000000pt" viewBox="0 0 900.000000 900.000000"
 preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,900.000000) scale(0.100000,-0.100000)">
<path d="M4280 8997 c-3 -2 -54 -7 -115 -10 -684 -37 -1449 -290 -2080 -690
-621 -393 -1182 -990 -1525 -1622 -24 -44 -53 -98 -65 -120 -44 -81 -139 -294

。 . .

2310 880 278 21 516 20 785 -6z" stroke="red" stroke-width="2" fill="red" />

。 . .

---

将这些 SVG 路径文件合并到 D3 环境中

但是，我错误地阅读了这个 SVG，因此它被视为图像。我正在复制上面提到的块中的示例，它执行以下操作：

node.append("image")
.attr("xlink:href", "https://github.com/favicon.ico")

具体来说，就我而言，我正在尝试制作散点图，所以我的代码如下所示：

var points = svg.selectAll('image').data(data)
                .enter().append('image').classed('point', true)
                .attr("xlink:href", "../images/my_logo.svg")

这显然将 SVG 作为“图像”引入，这不允许我调整笔触宽度或颜色或我希望调整的这些东西。例如，如果我查看控制台中的元素，使用d3.selectAll("image")，我会看到我可以访问x、y、width、height 等，就像我一样使用普通的图像，而不是真正灵活的 SVG 路径元素。

我知道问题是因为我将此图标作为图像导入，但我只是不知道正确的方法。

Answer 1

当然，您不能修改作为图像引入的 SVG。但是，您可以通过 AJAX 加载 SVG 并从那里操作和注入它。您最好使用不是严格意义上的 SVG 格式，以便更容易修改和注入。例如，一个 SVG 片段（只是 <svg> 元素的内容）可以直接注入，然后可以通过 CSS 进行修改。

---

Here is a full example 演示如何使用d3.xhr 完成此操作。