在d3.js中导入svg形状是否可行？

Question

在d3.js中导入svg形状是否可行？

svgd3.js

22

第一天使用d3.js，进行得很顺利，但我需要将占位圆形更改为稍微复杂一些的东西。

我创建的SVG形状（比如在Illustrator中）能否被“导入”到d3.js图表中？

我知道我可以在d3中重新绘制它...但我的头现在很疼...嗯...

它是一个带有尖端的简单气泡：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 14948)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="77px" height="41px" viewBox="0 0 77 41" enable-background="new 0 0 77 41" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#999999" d="M0,13C0,5.82,5.82,0,13,0h51c7.18,0,13,5.82,13,13s-5.82,13-13,13
    H47l-7,15l-7-15H13C5.82,26,0,20.18,0,13z"/>
</svg>

这能作为一个形状导入吗？

还是有一种方法可以直接在d3js中转换该路径吗？

谢谢！

- rolfsf

这个问题可能会有所帮助：https://dev59.com/L2_Xa4cB1Zd3GeqP25p0。 - Lars Kotthoff

@LarsKotthoff，例如：动态创建SVG OBJECT - http://codinginparadise.org/projects/svgweb/docs/UserManual.html#dynamic 和svg操作http://keith-wood.name/svg.html（来自该问题）。 - user1742529

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- explunit · Accepted Answer

如果“导入”是指作为页面标记的一部分，然后由您的d3代码使用，那么是的，您可以使用svg defs元素来保存自定义形状的定义。然后在代码中稍后创建一个use元素来引用它：

var node = svg.selectAll("g.node")
  .data(nodes)
  .enter()
  .append("g")
  .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; } )

node.append("use")
  .attr("xlink:href","#myshape")

这是上述方法的完整示例。我使用的是Inkscape，但概念相同：

http://bl.ocks.org/explunit/5988971

请注意，在SVG定义中使用xlink命名空间对于使use元素正常工作非常重要，而且我看到你已经在你的代码中使用了它：

xmlns:xlink="http://www.w3.org/1999/xlink"

如果你所谓的“导入”是指动态加载，那么需要采用不同的方法，就像@LarsKotthoff所建议的那样。但是，看起来您只想重复使用现有的形状定义，上面的方法可以让您这样做。 <g>元素设置形状的位置，然后添加子节点<use>以引入先前定义的实际形状。

形状的定义在body中的svg元素中，而不是在javascript代码中。这与许多D3.js示例不同，后者通过javascript代码动态创建svg元素。

两者之间唯一的连接是将ID字符串（在此情况下为“myshape”）放入href中，以匹配defs部分中的ID：

node.append("use").attr("xlink:href","#myshape")