如何在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