是否可以在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中创建，被导入到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>

可以导入为形状吗？

谢谢！

推荐答案

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

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"

如果通过imported飞行，那么需要一个不同的方法，如@LarsKotthoff建议。但它听起来像你只是想重用一个现有的形状定义，上述方法让你做到。 < g> 元素设置形状的位置，然后将子节点< use> 添加到

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本身中。这不同于许多具有由JavaScript代码动态创建的svg元素的D3.js示例。

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：

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屋！