<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>符号</title>
</head>
<body id="body">
<!-- partial:index.partial.html -->
<!-- partial -->
<script src='js/jquery.min.js'></script>
<script src='js/d3.min.js'></script>
<script>
var width = 600;
var height = 400;
var svg = d3.select("#body")
.append("svg")
.attr("width",width)
.attr("height",height)
//数组长度
var n = 30
//数组
var dataList = []
//给数组添加元素
for (var i = 0 ; i < n ; i++){
dataList.push({
size : Math.random() * 30 + 500 , //符号的大小
type : d3.svg.symbolTypes[Math.floor(
Math.random() * d3.svg.symbolTypes.length //符号的类型
)]
})
}
//创建一个符号生成器
var symbol = d3.svg.symbol()
.size(function(d){return d.size})
.type(function(d){return d.type})
var color = d3.scale.category20b();
//添加路径
svg.selectAll()
.data(dataList)
.enter()
.append("path")
.attr("d",function(d){
return symbol(d)})
.attr("transform",function(d,i){
var x = 100 + i % 5 * 50;
var y = 100 + Math.floor(i/5) * 50;
return "translate("+ x + "," + y + ")"
})
.attr("fill",function(d,i){
return color(i)
})
</script>
</body>
</html>