Question

我有一个使用Snap.svg生成的svg。我现在想在d3中使用这个svg。我怎么能这样做？

代码 - ＆gt;

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

    "id" : "chart"

})

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

然后在d3中选择它： - ＆gt;

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

alert(mysvg)

上面的警报方法给出了输出 - ＆gt;对象SVGSVGElement]

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

Answer 1

是的，D3和Snap互相称赞，你可以一起使用它们。我想在组中添加形状，然后在D3或Snap中定位它们，但您可以直接定位形状。有时它更容易使用形状而不是组，因为它们具有x / y属性而你不必担心使用变换和矩阵但是只要你有复杂的组，它就更容易移动一组形状然后每个人单独移动它们。

在你的情况下，你有一个简单的矩形，包含在你的＆＃34; mysvg＆＃34;这是根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

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

1 个答案: