说明 图表类型:直方图(混合散点图) 原图地址:histogram——以日期为时间维度 原图的改进型3,使用力图使得散点圆不重叠(散点半径不固定) 知识点 d3.forceSimulation 创建一个力模拟 d3.forceX 创建x-定位力 d3.forceY 创建y-定位力
说明 图表类型:直方图(混合散点图) 原图地址:histogram——以日期为时间维度 原图的改进型2,使用力图使得散点圆不重叠(散点半径固定) 知识点 d3.forceSimulation 创建一个力模拟 d3.forceX 创建x-定位力 d3.forceY 创建y-定位力
说明 图表类型:直方图(混合散点图) 原图地址:histogram——以日期为时间维度 原图的改进型1,将拖拽实现的单项刷选改为使用brush的双向筛选 知识点 d3.brush 创建一个一维的 x-方向的brush brush.move 为指定的group设置选中范围 brush.extent 如果 extent 指定,则设置可刷取的范围
说明 图表类型:直方图(混合散点图) 原图地址:Date slider - histogram legend 修改了原图的部分实现,将滑动条部分的实现从line改为rect 将原图以时间为间隔改为了以天为间隔 知识点 d3.histogram - 直方图生成器 selections.exit() - 选取失去数据的节点
说明 图表类型:直方图(混合散点图) 原图地址:Date slider - histogram legend 修改了原图的部分实现,将滑动条部分的实现从line改为rect 知识点 d3.histogram - 直方图生成器 selections.exit() - 选取失去数据的节点 d3.timeParse - 时间格式化
说明 图表类型:bar 原图地址:zoomable histogram 知识点 d3.zoom - 创建缩放行为 zoom.translateExtent - 设置平移范围 zoom.extent - 设置viewport的尺寸
说明 图表类型:other 原图地址:Chained Transitions 备注:对于插值器还是没有很好的理解 知识点 d3.active - 对于一个给定的节点选择活跃中的过渡 d3.interpolateRgb(a, b) 插补RGB颜色 关于start事件
说明 图表类型:折线图(Step Line) 原图地址:D3 Step Chart 原图是d3.v3版本实现,这版用v4版本重写了 知识点 d3.bisector 使用访问器和比较器二分查找某个值的index值 关于path中的值比如M,V,Z, 参考这里