我应该如何在 D3 中使用现有的 svg 元素？答案

【问题标题】：How should I use an existing svg element in D3?我应该如何在 D3 中使用现有的 svg 元素？
【发布时间】：2014-09-10 01:00:21
【问题描述】：

我使用 Snap.svg 生成了一个 svg。我现在想在 d3 中使用这个 svg。我该怎么做？

代码-->

var s =  Snap(400,400);
s.attr({

    "id" : "chart"

})

var rect = s.rect(100,100,100,100)

然后在 d3 中选择它：-->

var mysvg = d3.select("#chart")

alert(mysvg)

上面的 alert 方法给出了输出 --> object SVGSVGElement]

我无法弄清楚如何利用这个“mysvg”元素在 d3 图表上显示 svg。

【问题讨论】：

“在 d3 中使用这个 svg”是什么意思？你想对 svg 进行什么样的操作？

标签： javascript svg d3.js snap.svg

【解决方案1】：

是的，D3 和 Snap 确实相互补充，您可以一起使用它们。我喜欢在将形状定位到 D3 或 Snap 之前将形状添加到组，但您可以直接定位形状。有时使用形状而不是组更容易，因为它们具有 x/y 属性，您不必担心使用变换和矩阵，但是一旦您有复杂的组，移动一组形状然后移动它们就更容易了每个单独。

在您的情况下，您的“mysvg”中包含一个简单的矩形，它是根 svg。您可以通过 Snap 或 D3 添加元素。您可能希望以该矩形为目标并对其进行一些处理，例如使其基于某些数据值增长。在这种情况下，您可以考虑给它一个 id 或类名。

var rect = s.rect(100,100,100,100)
rect.attr({"id", "bar0"}); // assuming you'd create many bars and give them ids dynamically 
rect.attr({"class", "bar"});

然后在 D3 中，您可以直接定位该栏

var bar = mysvg.select("#bar0");
bar.attr("height", 60);
bar.attr("width", 20);

我已经根据您的问题创建了一个 jsfiddle，但使用游戏元素而不是图表 - 相同的原则适用；-D

jsfiddle

【讨论】：