0%

d3Js入门

发表于 更新于 分类于

chart 之类如果用别人的库 其实 最终展示的 是 svg .然后 d3Js 是一个主要基于 svg 的一个 dom 操作的库. 最近学习了一下. 因为有些需要可能:

  • 用别人库可能杀鸡用牛刀
  • 定制需求
  • 如果老板想要一些炫的动效,或者一些有交互的组件, 比如一个行驶的小车.这些其实用 d3 很方便.
  • 自己想折腾一下吧……..多了解一些

d3 vs threeJs

区别

  • d3 主要是基于 svg 的 ,如果是操作几个 dom,形状这个合适
  • threejs 主要是基于 webgl ,canval 的库,3d 效果的复杂的图像需求

svg

svg 学习可以看看 mdn 的官网 .

主要的元素

  • path
  • line
  • rect
  • text
    元素

d3 学习

我主要是看了一堆 frontendMaster 的课程.

个人感觉笔记难理解的是 d3 的链式调用吧.一开始 .主要就是有一些是找到 dom ,然后可以之间套用方法.

  • .call 方法 参考stackoverflow d3 call function
    .call()是 D3 API 函数，不要与Function.prototype.call（） 混淆

    selection.call(function, arguments…)
    完全调用一次指定的函数，并将此选择与任何可选参数一起传递。返回此选择。这等效于手动调用功能，但有助于方法链接。例如，要在可重用函数中设置几种样式：
    现在说：
    d3.selectAll("div").call(name, "John", "Snow");
    这大致相当于：
    name(d3.selectAll("div"), "John", "Snow");
    唯一的区别是 selection.call 总是返回选择内容，而不是被调用函数 name 的返回值。

参考资料