可以在d3.js中导入svg图形吗？
可以在d3.js中导入svg图形吗？
提问于 2013-08-07 09:01:15
使用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中转换该路径？
谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-08-07 10:56:03
如果您所说的“导入”是指成为页面标记的一部分，然后由您的d3代码使用，那么是的，您可以使用svg defs element来保存您的自定义形状的定义。然后在稍后的代码中创建一个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本身中。这与许多D3.js示例不同，后者具有由javascript代码动态创建的svg元素。
两者之间的唯一连接是您放在href中的字符串ID (在本例中为“myshape”)，以匹配defs部分中的id：
node.append("use").attr("xlink:href","#myshape")页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18092976
复制相关文章
相似问题