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

Question

我在以下CSS代码中有云形状：

.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，其属性为.cloud中的CSS。这是我在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。不幸的是，我没有在浏览器上看到云的形状。我在CSS中使用circle尝试了相同的D3.js代码，它只是工作正常但不是CSS中的云类。我在这里想念的是什么？有什么可以帮我解决这个问题吗？提前致谢。