d3 接触记录

svg 摘录

text - dx(相对from a previous text element) - x(绝对)

path -

• Mx,y: Move to 相当于起始点
• Cx1,y1,x2,y2,x,y: Bezier Curves 前两个为控制点 后一个为终点

viewPort 和 viewBox

前者是 svg 的长宽，后者是 svg 要「透」出来的内容。关于 viewBox[x,y,width,height], 下面这篇文章说得很好，前一对用作 panning，后一对用作 zoomming.

SVG Viewport and viewBox (For Complete Beginners)

首先

d3 让我觉得很像 jQuery, 提供了很多批处理样式的工具！

非常好的介绍：Enter, Update, Exit. An Introduction to D3.js, The Web’s… | by Christian Behrens | Medium

非常好的入门课程：25 Days of d3 / Tyler Wolf | Observable

tree

d3.hierarchy / D3 | Observable d3-hierarchy/README.md at main · d3/d3-hierarchy

通过 d3.hierarchy(data, children) 可以返回格式化好的 tree\, 注意该 tree 也挂载了很多方便计算的方法比如 node.descendants, node.each...

About nodeSize: javascript - D3 Tree Layout Separation Between Nodes using NodeSize - Stack Overflow

common case

改变某 text 的值

• 如果是 click 事件，可以直接 d3.select(this).text("xxx")
• 或者也可以通过选择器选择

ref