是否可以在 d3.js 中导入 svg 形状? [英] Is it possible to import svg shapes in d3.js?

问题描述

使用 d3.js 的第一天，进展顺利，但我需要将我的占位符圆形更改为稍微复杂一些的形状.

First day with d3.js, going well, but I need to change my placeholder circle shapes to something a litte more complex.

我在 Illustrator 中创建的 SVG 形状可以导入"到 d3.js 图表中吗?

Can SVG shapes that I've created in, say, Illustrator, be "imported" into a d3.js chart?

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

I know I can redraw it in d3... but my head hurts right now... er...

这是一个带点的简单气泡:

it's a simple bubble with a point:

<?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 中转换该路径?

Or is there a way to translate that path directly in d3js?

谢谢！

推荐答案

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

If by "imported" you mean be part of the page markup and then used by your d3 code, then yes you can use svg defs element to hold the definition of your custom shape. Then later in your code you create a use element to reference it:

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 但概念是一样的:

Here is a full example of the above approach. I used Inkscape but the concept is the same:

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

请注意，svg 定义中的 xlink 命名空间对于 use 元素的正常工作很重要，而且我看到您已经有了它的代码:

Note that the xlink namespace in the svg definition is important for the use element to work properly, and I see you have it your code already:

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

如果导入"是指即时加载，则需要采用不同的方法，正如@LarsKotthoff 所建议的那样.但听起来您只想重用现有的形状定义，而上述方法可以让您做到. 元素设置形状的位置，然后添加子节点 以拉入之前定义的实际形状.

If by "imported" you mean loaded on-the-fly, then a different approach is needed, as suggested by @LarsKotthoff. But it sounds like you just want to reuse an existing shape definition, and the above approach lets you do it. The <g> element sets the position of the shapes, and then child node <use> is added to pull in the actual shape defined earlier.

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

The definition of the shape is in the svg element in the body, not in the javascript itself. This differs from many D3.js examples which have the svg element created dynamically by the javascript code.

两者之间的唯一联系是您放入 href(在本例中为myshape")中以匹配 defs 部分中的 id 的字符串 ID:

The only connection between the two is the string ID that you put in the href ("myshape" in this case) to match the id in the defs section:

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

这篇关于是否可以在 d3.js 中导入 svg 形状?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！