数据可视化--D3绘制直方图，D3的批量数据绑定和匿名函数，基于path绘制三角形

糟老头修炼记 2020-03-13

995

d3.js是js的一个库，不需要安装，可直接下载文件或在有网络的情况下直接引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3直方图</title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script><!--d3.js是js的一个库，不需要安装，可直接下载文件或在有网络的情况下直接引用-->
<script>
    /*屏幕分辨率*/
    var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;


    var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
    w=w*0.98;
    h=h*0.9;
    var dataset=new Array();
    for(var i=0;i<10;i++){
        dataset[i]=500*Math.random();
    }
    var svg=d3.select("body")
            .append("svg")
            .attr("width",w)
            .attr("height",h);
    svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x",function(d,i){
                return i*(w/dataset.length);
            })
            .attr("y",function(d){
                return h-d;
            })
            .attr("width",(w/dataset.length)-10)
            .attr("height",function(d){
                return d;
            })
            .attr("fill","blue");
</script>
</body>
</html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3直方图</title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script><!--d3.js是js的一个库，不需要安装，可直接下载文件或在有网络的情况下直接引用-->
<script>
    /*屏幕分辨率*/
    var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;


    var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
    w=w*0.98;
    h=h*0.9;
    /*定义d变量*/
    var d="M70 50 L10 200 L150 200 Z";
    /*选择body,添加svg*/
    var svg=d3.select("body")
            .append("svg")
            .attr("width",w)
            .attr("height",h);
    /*添加path路径*/
    svg.append("path")
            .attr("d",d)/*path的属性d,然后让d显示d*/
            .attr("fill","yellow")/*填充颜色*/
            .attr("stroke","green");/*添加边线*/
</script>
</body>
</html>

 path d="M70 50 L10 200 L150 200 Z" fill="yellow"

Z：表示这个图形是封闭图形

M: move , 表示起点，L：line , 表示直线,

所以这个图形起点是（70,50），然后从该点向点（10,200）画直线，在从点（10,200）向（150,200）画直线，最后把图形封闭起来

数据库

文章转载自糟老头修炼记，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

数据可视化--D3绘制直方图，D3的批量数据绑定和匿名函数，基于path绘制三角形

评论