利用D3的v4版本绘制条形图

最新推荐文章于 2022-09-28 23:10:04 发布

「已注销」

最新推荐文章于 2022-09-28 23:10:04 发布

阅读量340

点赞数 1

CC 4.0 BY-SA版权

分类专栏： 2019年3月 javascript D3.js 文章标签： D3.js 大数据

本文链接：https://blog.youkuaiyun.com/weixin_44513129/article/details/88869656

2019年3月同时被 3 个专栏收录

1 篇文章

订阅专栏

javascript

1 篇文章

订阅专栏

D3.js

1 篇文章

订阅专栏

本文展示了如何使用D3.js的第四个版本创建一个静态的条形图。内容包括图表的呈现，但不包含动画效果。欢迎指正错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用D3的v4版本绘制条形图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/d3.js"></script>
    <!--<link rel="stylesheet" href="css/styles.css" type="text/css">-->
</head>
<body>

<script type="text/javascript">
    //1、位置，数据，svg
    var width = 600,height = 600,margin = 30;
    var data = [
        [
            {x: 0, y: 5}, {x: 1, y: 9}, {x: 2, y: 7},
            {x: 3, y: 5}, {x: 4, y: 3}, {x: 6, y: 4},
            {x: 7, y: 2}, {x: 8, y: 3}, {x: 9, y: 2}
        ],
        //下面的这个只是定义了一个sin函数而已，
        d3.range(10).map(function (i) {
            return {x: i, y: Math.sin(i) + 5};
        })
    ];

    var svg = d3.select("body")
        .append("svg")
        .attr("width",width)
        .attr("height",height);

    //2、设置比例尺
    //x轴比例尺
    var xScale = d3.scaleLinear()   //scaleLinear() 线性比例尺
        .domain([0,10])             //domain 定义域（因为数据是0到9 十个，所以定义了[0-10]）
        .range([0,width - 2 * margin]); //range 值域（表明占据的宽度 而且和定义域对应）

    //y轴比例尺
    var yScale = d3.scaleLinear()
        .domain([0,10])
        .range([height - 2 * margin,0]);    //因坐标原点在左上角,所以把值域颠倒，不然y轴的大小不对（注意是y轴）

    //颜色比例尺
    var color = d3.scaleOrdinal(d3.schemeCategory10);//scaleOrdinal序数比例尺,d3.schemeCategory10 表示10种颜色。

    //3、坐标轴
    //定义x坐标轴
    var xAxis = d3.axisBottom()     //axisBottom表明绘制下方坐标轴
        .scale(xScale);             //此处根据比例尺进行绘制（默认绘制10个刻度）

    //定义y坐标轴
    var yAxis = d3.axisLeft()       //axisBottom表明绘制左侧坐标轴
        .scale(yScale);             //此处根据比例尺进行绘制（默认绘制10个刻度）

    yScale.range([0,height - 2 * margin]);      //上方的设置 会影响到 内部的值(如果不写该行的话，数值是反的)

    //实现坐标轴
    svg.append("g")                 //添加 g 元素
        .attr("class","x-axis")     //样式
        .attr("transform","translate("+margin+","+(height - margin)+")")    //原点位置
        .call(xAxis);               //回调函数 调用自身

    svg.append("g")                 //添加 g 元素
        .attr("class","y-axis")     //样式
        .attr("transform","translate("+margin+","+margin+")")           //原点位置
        .call(yAxis);               //回调函数 调用自己

    //画图
    //定义线条生成器
    var line = d3.line()            //定义
        .x(function (d) {
            return xScale(d.x)      //xScale 比例尺  d.x 是 因为数据是json格式 所以用.
        })
        .y(function (d) {
            return yScale(d.y);     //xScale 比例尺  d.y 是 因为数据是json格式 所以用.
        })
        .curve(d3.curveBasis);      //作用是 使线段变得缓和 //可以删除试下

    //绘制图形
    var lineShape = svg.selectAll(".lineData")  //此处必须是选中所有
        .data(data);                //添加数据
    lineShape.enter()               //enter update exit 中的enter(数据多余元素)
        .append("path")             //添加 path 元素
        .attr("class","lineData")
        .attr("transform","translate("+margin+","+margin+")")       //修改坐标原点
        .attr("d",function (d) {
            return line(d);         //数据点的位置
        })
        .attr("fill","none")        //填充颜色 设为 none
        .attr("stroke",function (d,i) {        //此处是设置 边框颜色
            return color(i);           //利用前方定义的颜色 比例尺
        })
        .attr("stroke-width","3px");       //边框宽度（此处就是线条宽度）
</script>
</body>
</html>