D3基本图表绘制——折线图

最新推荐文章于 2024-05-02 22:56:50 发布

谢哇哇在学习

最新推荐文章于 2024-05-02 22:56:50 发布

阅读量4.8k

点赞数 1

分类专栏： d3 文章标签： javascript html 前端 d3.js

本文链接：https://blog.csdn.net/m0_63150077/article/details/122769874

版权

制作折线图分成4步走：

1.首先划定制图区域和范围——画一个边框

2.数据处理得到绘制折线图需要的数据——绘制折线需要一个数组整体

3.画出x，y轴和折线——y轴绘制需要注意

4.补充标签，调节位置

【1】第一步：框架绘制（规定范围）

<body>
    <div style="height:700px ;
                width: 1000px; 
                border: 2px solid grey;
                margin-top: 20px;
                margin-left: 200px;
                position: relative;
                float: left;
                overflow: auto;">
        <svg id="line" style="height:700px ; 
                width: 1000px;
                position: relative;
                float: left;">
    </svg>
    </div>
</body>

补充关于position的知识：

文档流：即元素在html中按照从左到右、从上到下的正常排序顺序

其中块级元素从上到下一行行排，内联元素按照从左到右行内排序

区分position中绝对定位和相对定位：

relative:

1.相对于文档流正常位置偏移，宽高不变化，撑大容器。

2.设置以后仍然处于文档流且不影响其他元素布局，其他元素相对于设置了relative的元素的正常位置布局

Absolute:

1.设置后其宽度若没有定义，会按照里面元素内容确定其宽度

2.其定位根据父元素定位，<div> <div></div> </div>最外面的就是父元素

如果父元素没有或者没有设置绝对定位或者相对定位的话，那么元素相对于html元素定位

如果父元素设置了绝对定位或者相对定位，那么元素根据最近的父元素定位