Skip to content

Instantly share code, notes, and snippets.

View ckinmind's full-sized avatar
💭
Exploring

CK ckinmind

💭
Exploring
  • HangZhou, China
View GitHub Profile
@ckinmind
ckinmind / README.md
Last active January 3, 2018 02:50
histogram——力图实现散点不重叠(不固定圆半径)

说明

知识点

  • d3.forceSimulation 创建一个力模拟
  • d3.forceX 创建x-定位力
  • d3.forceY 创建y-定位力
@ckinmind
ckinmind / README.md
Last active January 3, 2018 02:48
histogram——力图实现散点不重叠(固定圆半径)

说明

知识点

  • d3.forceSimulation 创建一个力模拟
  • d3.forceX 创建x-定位力
  • d3.forceY 创建y-定位力
@ckinmind
ckinmind / README.md
Last active January 3, 2018 02:32
histogram——用刷子brush实现拖拽和范围选择

说明

知识点

  • d3.brush 创建一个一维的 x-方向的brush
  • brush.move 为指定的group设置选中范围
  • brush.extent 如果 extent 指定,则设置可刷取的范围
@ckinmind
ckinmind / README.md
Last active January 3, 2018 02:19
histogram——以日期为时间维度

说明

  • 图表类型:直方图(混合散点图)
  • 原图地址:Date slider - histogram legend
  • 修改了原图的部分实现,将滑动条部分的实现从line改为rect
  • 将原图以时间为间隔改为了以天为间隔

知识点

  • d3.histogram - 直方图生成器
  • selections.exit() - 选取失去数据的节点
@ckinmind
ckinmind / README.md
Last active December 28, 2017 02:54
histogram——Date slider - histogram legend

说明

  • 图表类型:直方图(混合散点图)
  • 原图地址:Date slider - histogram legend
  • 修改了原图的部分实现,将滑动条部分的实现从line改为rect

知识点

  • d3.histogram - 直方图生成器
  • selections.exit() - 选取失去数据的节点
  • d3.timeParse - 时间格式化
@ckinmind
ckinmind / README.md
Last active December 13, 2017 09:34
Bar——zoomable histogram

说明

知识点

  • d3.zoom - 创建缩放行为
  • zoom.translateExtent - 设置平移范围
  • zoom.extent - 设置viewport的尺寸
@ckinmind
ckinmind / README.md
Last active December 13, 2017 06:28
Other——Chained Transitions

说明

  • 图表类型:other
  • 原图地址:Chained Transitions
  • 备注:对于插值器还是没有很好的理解

知识点

  • d3.active - 对于一个给定的节点选择活跃中的过渡
  • d3.interpolateRgb(a, b) 插补RGB颜色
  • 关于start事件
@ckinmind
ckinmind / README.md
Last active December 12, 2017 11:21
Line——animate line

说明

知识点

  • d3.active - 对于一个给定的节点选择活跃中的过渡
  • 关于start事件
@ckinmind
ckinmind / README.md
Last active May 31, 2018 07:39
Bar——动态移动

说明

@ckinmind
ckinmind / README.md
Last active December 11, 2017 15:15
Line——Step Chart

说明

  • 图表类型:折线图(Step Line)
  • 原图地址:D3 Step Chart
  • 原图是d3.v3版本实现,这版用v4版本重写了

知识点

  • d3.bisector 使用访问器和比较器二分查找某个值的index值
  • 关于path中的值比如M,V,Z, 参考这里