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

How should I use an existing svg element in D3?

本文关键字：svg 元素 D3 何使用 我应该      更新时间：2023-09-26

使用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和Snap确实互补，你可以一起使用它们。我喜欢在D3或Snap中定位它们之前将形状添加到组中，但你可以直接定位形状。有时处理形状比处理组更容易因为它们有x/y属性你不必担心处理变换和矩阵但是一旦你有了复杂的组，移动一组形状比单独移动它们更容易。

在您的情况下，您有一个简单的rect包含在您的"mysvg"，这是根svg。您可以通过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

相关文章：