d3 v3 符号

<!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>
猜你喜欢
