javascript - D3 : How to adjust SVG image path elements programmatically?

Question

使用图标作为数据点

受到使用 svg 图像作为数据元素的能力的启发，如 this block演示后，我想更进一步并使用 SVG 图像(SVG 路径)，这样我还可以调整它们的描边颜色和粗细。

这是我上面链接的 block 的屏幕截图:

<小时/>

使用 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，因此它被视为图像。我正在复制上面提到的 block 中的示例，它执行以下操作:

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 并从那里操作和注入(inject)它。您可能最好使用非严格 SVG 的格式，这样更容易修改和注入(inject)。例如，SVG 片段(只是 <svg> 元素的内容)可以直接注入(inject)，然后可以通过 CSS 进行修改。

<小时/>

Here is a full example使用d3.xhr来演示如何做到这一点.