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

作者：笔触狂放9 | 2024-02-15 19:05:09

踩

d3绘制折线图

制作折线图分成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元素定位

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

3. absolute脱离文档流，原来的位置是空的，下面的元素会来占据位置。

Tip：没有position，float设置top

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】