1.框架绘制（规定范围）

标签：div

设置style属性——

width ：1600px ; height : 700px;

position : relative

{

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

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

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

relative:

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

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

Absolute:

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

2.其定位根据父元素定位，<div>  <div></div>  </div>最外面的就是父元素，如果父元素没有或者没有设置绝对定位或者相对定位的话，那么元素相对于html元素定位

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

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

Tip：没有position，设置top、left、bottom、right值都没有效

更详细的示例推荐：CSS position 相对定位和绝对定位 | 菜鸟教程 (runoob.com) }

Margin:外框距离

Border：框宽

Tip：

这里插入可能容易混淆的x，y概念

Y属性，大多数时候，它体现了引用元素的矩形区域的左上角的y轴坐标

2.折线图可视化绘制：

模块化编程；利用const line={myline：function（）{  }}

1.利用d3.json导入数据或者d3.csv

2.添加g标签，专门用于svg标签，整体移动

svg 中的g标签, 算是比较特殊

没有x y width height 属性 不能fill g标签基本只管分组问题, 其他功能一概不提供

移动使用transform相对本身位置向x y平移

3.数据处理

{js字典学习和使用

字典存储形式：dic={key1 ：value1，key2：value2，…}

字典中的键是值在字典中的索引

例如：

//输出最初的字典元素

for(let k in dic){

Console.log(“key:”+key+”,value”+dic[key])};

}

//字典元素按照key排序

Var res=object.keys(dic).sort()-一个一个符号比较，非正统大小比较

Object.keys()会返回一个

由一个给定对象的自身可枚举属性

组成的数组

delete dic['one']; delete dic.three;

处理数据，通过利用字典

Dataset.push(k )//建立字典和数组

Dataset.push({‘time’:k,’number’:dic[k]})

或者利用for循环

Dataset[d[i][‘字段’]]=0获取属性

来摘选出需要的x轴数据和y轴数据

4.画出x，y轴

需要使用比例尺——

如果是线性关系，使用scaleLinear；如果是序数离散关系，使用scaleBand，domain中使用数组，range使用连续域

Padding设置关于间隔，1是点，值必须在【0，1】范围内

AxisBottom(xScale)——轴上显示domain的值

AxisLeft(yScale)

通过在原组件上添加g标签组件加入新组件，移动实现

5.画线

关于线的函数配置

Const line=d3.line().x(d=>xscale(d.time)+50).y(d=>yscale(d.number))

通常情况下line是和path同时出现的，而线图的绘制实际上是把数据根据定义的line转换成位置信息然后使用path添加到画布的一个过程。

svg.datum(data)

         .append("path")

         .attr("d", line);

或者

Svg.append(“path”)

.attr(‘d’,line(data))

6.补充标注标签

G1.append(‘text’)

.text(‘1940s-2020s’)

7.关于引入数据

D3.csv（“”）.then(d=>{

       Console.log(d)

//调用

       //不重复去重的话可以使用对象

       Let data={}

       For(let i=0;i<d.length;i++){

       Data[d[i][‘first name’]]=0

}

       Let x_names=object.keys(data)

})