使用 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 中翻译该路径?
谢谢!
如果“导入”是指成为页面标记的一部分,然后由 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>
以拉入之前定义的实际形状。
形状的定义在body中的svg元素中,而不是在javascript本身中。这与许多 D3.js 示例不同,这些示例具有由 javascript 代码动态创建的 svg 元素。
两者之间的唯一联系是您放入 href 中的字符串 ID(本例中为“myshape”)以匹配
defs
部分中的 id:
node.append("use").attr("xlink:href","#myshape")
我在 Observable 上找到了一个很好的例子,并想将其链接到这里。 带有导入的 SVG 符号的 D3 散点图
似乎使用了不同的方法。希望这可以帮助!我是 d3 的新手。
mapleSvg = XMLDocument {
location: null
<prototype>: XMLDocument {Symbol(Symbol.toStringTag): "XMLDocument"}
}
mapleSvg = d3.xml('https://s3.amazonaws.com/files.zevross.org/blog/d3_external_svgs/load_svg/leaves/maple_illustration.svg')