22

d3.js 的第一天，进展顺利，但我需要将占位符圆形更改为更复杂的东西。

我在 Illustrator 中创建的 SVG 形状可以“导入”到 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 中翻译该路径？

谢谢！

4

1 回答 1

15

如果通过“导入”您的意思是成为页面标记的一部分，然后由您的 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>添加子节点以拉入之前定义的实际形状。

形状的定义在正文中的 svg 元素中，而不是在 javascript 本身中。这与许多具有由 javascript 代码动态创建的 svg 元素的 D3.js 示例不同。

两者之间的唯一联系是您放入 href 中的字符串 ID（在本例中为“myshape”）以匹配该defs部分中的 id：

node.append("use").attr("xlink:href","#myshape")
于 2013-08-07T02:56:02.693 回答