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

Question

使用图标作为数据点

受到使用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，{{1就像我使用普通的图像一样，而不是真正灵活的SVG路径元素。

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

Answer 1

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

Here is a full example使用d3.xhr来证明如何做到这一点。