<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
英文字典单词首字母统计<br>
{{rscount}}
{{rs}}
<script src="static/d3.v7.js"> </script>
 <script>
        var width=(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth)*0.96;
        var height=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)*0.9;
        //var dataset =new Array(10);
        //for (var i=0;i<dataset.length;i++){
        //    dataset[i]=height*Math.random();
        //}

        var dataset =new Array(26);
        {% for r in rs %}
        dataset[{{loop.index-1}}]={{r}}
        {% endfor %}
        var color=d3.schemeCategory10;
        var svg = d3.select("body")         //选择<body>
                    .append("svg")          //在<body>中添加<svg>
                    .attr("width", width)   //设定<svg>的宽度属性
                    .attr("height", height);//设定<svg>的高度属性
        var rectStep =width/dataset.length;
        var rectWidth =rectStep-10;
        var rect = svg.selectAll("rect")
                        .data(dataset)      //绑定数据
                        .enter()            //获取enter部分
                        .append("rect")     //添加rect元素
                        .attr("x", (d,i)=>i * rectStep)
                        .attr("y", d=>height-d)
                        .attr("width",rectWidth)        //设置矩形的宽度
                        .attr("height",function(d){ //设置矩形的高度
                            return d;
                        })
                       .attr("fill", (d,i)=>color[i%10]);
 </script>
</body>
</html>