可视化工具D3.js教程入门（第七章）—— 坐标轴

最新推荐文章于 2023-07-16 12:06:53 发布

viceen

最新推荐文章于 2023-07-16 12:06:53 发布

阅读量318

点赞数

分类专栏：可视化文章标签： html5

本文链接：https://blog.csdn.net/weixin_44867717/article/details/120428345

版权

可视化专栏收录该内容

130 篇文章 66 订阅

订阅专栏

可视化工具D3.js教程入门（第七章）—— 坐标轴

继续接着上一章的图表，加上一个x坐标轴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scaleLinear</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>

<svg width="100%" height="300"></svg>

</body>

<script>

    var data = [7.3,5.3,3.3,2.3,1.3];

    //定义比例尺
    var scaleLinear = d3.scaleLinear().domain([0,d3.max(data)]).range([0,800]);

    var g = d3.select('svg')
        .append('g')
        .attr('transform','translate(30,30)');

    var rectHeight = 30;

    g.selectAll('rect')
        .data(data)
        .enter()
        .append('rect')
        .attr('x',0)
        .attr('y',function (d,i) {
            return rectHeight*i;
        })
        .attr('width',function (d,i) {
            return scaleLinear(d);//在这里的得到 映射的宽度
        })
        .attr('height',rectHeight - 5)
        .attr('fill','pink');


    //定义一个x坐标轴   坐标轴的比例尺 我们跟图表的用一个
    var axisX = d3.axisBottom(scaleLinear).ticks(20);//ticks 用来设置刻度间隔    其实就是把data数据 根据咱们的参数20  重新调整一下

    g.append('g')//在原有分g矩形分组里 再加一个x轴分组
        .attr('transform','translate(0,'+ data.length*rectHeight +')')
        .call(axisX);

</script>

</html>

效果

在这里插入图片描述

viceen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
可视化工具D3.js教程入门（第七章）—— 坐标轴

可视化工具D3.js教程入门（第七章）—— 坐标轴继续接着上一章的图表，加上一个x坐标轴<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>scaleLinear</title> <script src="https://d3js.org/d3.v5.min.js"></script><
复制链接

扫一扫