d3学习快速入门 2017.7.27.pptxVIP

D3学习快速入门;1.D3 是什么;Html输出 HelloWorld?;JavaScript;2 选择元素和绑定数据;绑定数据;;;;;;2.1 选择、插入、删除元素;1. 选择元素;1.2 选择三个 p 元素 使用 selectAll 选择 body 中所有的 p 元素。 var p = body.selectAll(p); p.style(color,red);;1.3 选择第二个 p 元素 有不少方法，一种比较简单的是给第二个元素添加一个 id 号。 p id=myidPear/p 然后，使用 select 选择元素，注意参数中 id 名称前要加 # 号。 var p2 = body.select(#myid); p2.style(color,red);;1.4 选择后两个 p 元素 给后两个元素添加 class， p class=myclassPear/p p class=myclassBanana/p 由于需要选择多个元素，要用 selectAll。注意参数，class 名称前要加一个点。 var p = body.selectAll(.myclass); p.style(color,red); ;1. 选择元素;2. 插入元素;2. 插入元素;3. 删除元素;3.做一个简单的图表！;3.1 SVG 是什么;3.2 Canvas 是什么;2. 添加画布;3. 绘制矩形;3. 绘制矩形;;4. 比例尺的使用;1. 为什么需要比例尺;2. 有哪些比例尺;2.1 线性比例尺;线性比例尺;2.2. 序数比例尺;3. 给柱形图添加比例尺;3. 给柱形图添加比例尺;第 5讲 坐标轴;预定义元素-----基本图形;2. 定义坐标轴;;3. 在 SVG 中添加坐标轴;4. 设定坐标轴的样式和位置;第6 讲 让图表动起来;第6 讲 让图表动起来;第6 讲 让图表动起来;第6 讲 让图表动起来;3. 实现简单的动态效果;4. 给柱形图加上动态效果;第7 讲 理解 Update、Enter、Exit;第7 讲 理解 Update、Enter、Exit;第7 讲 理解 Update、Enter、Exit;第7 讲 理解 Update、Enter、Exit;第7 讲 理解 Update、Enter、Exit;第8 讲 交互式操作;第8 讲 交互式操作;第8 讲 交互式操作;第8 讲 交互式操作;第8 讲 交互式操作;3. 带有交互的柱形图 var rects = svg.selectAll(.MyRect) .data(dataset) .enter() .append(rect) .attr(class,MyRect) //把类里的 fill 属性清空 .attr(transform,translate( + padding.left + , + padding.top + )) .attr(x, function(d,i){ return xScale(i) + rectPadding/2; } ) .attr(y,function(d){ return yScale(d); }) .attr(width, xScale.rangeBand() - rectPadding ) .attr(height, function(d){ return height - padding.top - padding.bottom - yScale(d); }) .attr(fill,steelblue) //填充颜色不要写在CSS里 .on(mouseover,function(d,i){ d3.select(this) .attr(fill,yellow); }) .on(mouseout,function(d,i){ d3.select(this) .transition() .duration(500) .attr(fill,steelblue); });;;第9讲 布局;饼状图的制作;饼状图的制作;;饼状图的制作;饼状图的制作;饼状图的制作;力学图的制作;力学图的制作;力学图的制作;力学图的