d3 符号

最新推荐文章于 2021-05-27 11:38:34 发布

一叶知秋9307

最新推荐文章于 2021-05-27 11:38:34 发布

阅读量247

点赞数

分类专栏： d3 D3入门文章标签： d3

本文链接：https://blog.youkuaiyun.com/qq_40285497/article/details/84931414

版权

d3 同时被 2 个专栏收录

4 篇文章

订阅专栏

D3入门

4 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
   <div class="chart">
       <svg width="500" height="400"></svg>
   </div>
   
   
    <script src="d3.js"></script>

    <script>
        var svg = d3.select('svg');

        var symbols = d3.symbols;
        
        var dataset = [];

        for(var i=0;i<7;i++){
            dataset.push({
                size:500,
                type:symbols[i]
            })
        }

        var symbol = d3.symbol()
        .size(function(value){
            return value.size;
        })
        .type(function(value){
            return value.type;
        })

        svg.selectAll('path')
        .data(dataset)
        .enter()
        .append('path')
        .attr('d',function(value){
            return symbol(value);
        })
        .attr('transform',function(value,index){
            var x = 100 + index%4 * 50;
            var y = 100 + Math.floor(index/4) * 50;
            return 'translate('+x+','+y+')';
        })
        .attr('fill','#f00')
        
        
    </script>
</body>
</html>