Javascript 如何将特定CSS形状附加到D3.js中的数据

我在下面的

CSS

code中看到了云的形状：

.cloud {
width: 200px; height: 60px;
background: #fff;

border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;

position: relative; 
}

.cloud:before, .cloud:after {
content: '';
position: absolute; 
background: #fff;
width: 100px; height: 80px;
position: absolute; top: 60px; left: 10px;

border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;

-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}

.cloud:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}

我想做的是将一些数据附加到div中，这些div的属性是

CSS

中的

.cloud

。这是我在D3.js中的代码

var dataset = [1, 2, 3];
//Create SVG object
var svg = d3.select("body").append("svg").attr({width: 800, height: 800});

svg.selectAll("div").data(dataset).enter().append("div");

---

到目前为止我所了解的是，由于页面上没有

div

，D3.js会将数组的每个元素绑定到一组尚未存在的div，并将它们附加到

CSS

中的cloud类中。不幸的是，我在浏览器上看不到云的形状。我用CSS中的

circle

尝试了相同的D3.js代码，它运行得很好，但不适用于CSS中的cloud类。我在这里错过了什么？有人能帮我解决这个问题吗？提前谢谢

您需要执行

.append（“div”）.attr（“class”、“cloud”）

来设置CSS类。没有

云

元素。谢谢拉尔斯的帮助。我的代码如下所示：svg.selectAll（“div”）.data（dataset）.enter（）.append（“div”）.attr（“class”，“cloud”）；不幸的是，我没有看到我所期待的。你认为我还有什么地方不对劲吗？啊，你不能把

div

s附加到SVG上——只要把它们附加到body:Lars上就行了。非常感谢你的帮助。请再问一个问题。是否有可能将形状附加到SVG？问题是我正在研究SVG，并且希望将它们附加到SVG中。你认为有什么办法吗？再次感谢你的帮助。非常感谢。那么您需要添加一个例如

rect

元素。