D3.JS01

学习笔记，自娱自乐，仅供参考

1. 利用python搭建简单的服务器
   C:\Users\HP\Desktop\D3>python -m http.server
   H5/JS基础：
   Item/innerHTML/document.getElementsByTagName
   绘制矢量图：
   SVG：append()添加元素；attr()用于给制定属性赋值
   D3：
   如何选择元素？
   选择函数：select selectAll
   Select：返回匹配选择器的第一个元素
   SelectAll：返回匹配选择器的所有元素
   如何查看选择集的状态，以及设定和获取选择集的属性？
   l 选择集（selection）：
   D3.select/d3.selectALL返回的的对象称为选择集。
   状态：selection.empty() selection.node() selection.size ()
   属性：selection.attr(name[,value]) name：属性名称 value：属性值 省略返回当前值
   selection.classed(name[,value]) name：类名 value：布尔值 表示是否开启
   selection.style(name[,value]) name：样式名 value：样式值
   selection.property(name[,value]) name：属性名 value：属性值 省略返回属性名
   selection.text([value]) 省略value 省略返回当前文本内容
   selection.html([value]) 获取选择集的内部HTML内容 相当于innerHTML
   如何操作选择集？
   操作：添加 selection.append(name) 选择集的末尾添加一个元素
   插入 selection.insert(name[，before]) 在选择集的指定元素之前插入一个元素
   删除 selection.remove() 删除选择集中的元素
   如何将数据绑定到选择集？
   l 数据绑定：
   selection.datum([value]) 选择集中的每一个元素都绑定相同的数据value
   selection.data([values[，key]] 选择集中的每一个元素分别绑定数组values的每一项。Key是一个键函数，用于指定绑定数据组时对应规则。
   Datum()工作过程
   Data()工作过程：将数组各项分别绑定到选择集的各个元素上，并且能制定绑定规则。当数组长度与元素数量不一致时，data()也能处理。
   选择集和数据绑定后如何处理？
   l 选择集的处理

D3.js入门

1. 什么是D3？D3是指数据驱动文档（Data-Driven Documents），根据D3的 官方定义： D3.js 是一个 JavaScript 库，它可以通过数据来操作文档。D3 可以通过使 用HTML、SVG和CSS把数据鲜活形象地展现出来。D3严格遵循Web标准，因 而可以让你的程序轻松兼容现代主流浏览器并避免对特定框架的依赖。同 时，它提供了强大的可视化组件，可以让使用者以数据驱动的方式去操作 DOM。