<html>
<head>
<script type = text/javascript src = https://d3js.org/d3.v4.min.js></script>
</head>
<body>
<script>
var width = 400;
var height = 400;
var data = [10, 20, 30];
var colors = ['green', 'purple', 'yellow'];
var svg = d3
.select(body)
.append(svg)
.attr(width, width)
.attr(height, height);
var g = svg.selectAll(g)
.data(data)
.enter()
.append(g)
.attr(transform, function(d, i) {
return translate(0,0);
})
g.append(circle).attr(cx, function(d, i) {
return i*75 + 50;
})
.attr(cy, function(d, i) {
return 75;
})
.attr(r, function(d) {
return d*1.5;
})
.attr(fill, function(d, i){
return colors[i];
})
g.append(text).attr(x, function(d, i) {
return i * 75 + 25;
})
.attr(y, 80)
.attr(stroke, teal)
.attr(font-size, 10px)
.attr(font-family, sans-serif).text(function(d) {
return d;
});
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。