# d3繪制圖表
圖表,用于展示數據,那么需要將數值映射到圖形中,比如需要繪制折線圖,y值的范圍0-100,圖表的高度是100,那么y值50可以投影到圖表高度50位置,隨著數據變化,y值取值范圍變為0-1000呢?當然不可能將圖表的高度改為1000吧,所以我們需要使用比例尺d3-scales。折線圖等等需要顯示刻度的坐標軸,我們可以直接使用d3-axis。
常見的圖表有:
這一章我希望讀者可以理解圖表的繪制的過程及思路
1. 需要繪制什么樣的圖表,什么樣的數據。
2. 分析是否需要借助d3進行布局計算。如:tree,stacks
3. 拆分細化圖表到d3.shape,或者通過svg基礎形狀標簽。
4. 通過一直需要的shape,分析需要使用哪些相關的比例尺,及數據轉化。
5. 分析交互,是否需要使用拖拽等等。
分析完成后繪制:
1. 轉化數據
2. 是否使用d3進行布局計算
3. 構建比例尺
4. 構建必要標簽g進行分組
5. 繪制圖表非數據相關,如坐標軸,圖例等等
6. 綁定數據,繪制圖形
7. 添加拖拽等功能,自定添加tooltip等等