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

Question

我有一个使用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方法给出输出->对象SVGSVGElement]

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

Answer 1

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

就您而言，您的“ mysvg”（即根svg）中包含一个简单的rect。 您可以通过Snap或D3添加元素。 您可能想要针对该rect并对其进行处理，例如使其根据某些数据值增长。 在这种情况下，您可以考虑为其指定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