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

D3: How to adjust SVG image path elements programmatically?

使用图标作为数据点

受到使用 svg 图像作为数据元素的能力的启发，如 this block 所示，我想更进一步并使用 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，等等，就像我使用普通的 image 一样，而不是真正灵活的 SVG 路径元素。

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

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

进行修改

Here is a full example 使用 d3.xhr.

演示如何做到这一点