D3js - 5、理解data join 和 可视化原则

可视化

Posted by renjie on July 25, 2020


D3js - 5、理解data join 和 可视化原则

Data Join

一图流

<img src =”https://tva1.sinaimg.cn/large/007S8ZIlgy1gh481jq64sj31kl0u01bi.jpg” width = 70%>

  • Enter 选中data 匹配 dom元素
  • update 选中匹配元素进行操作
  • exit 选中未匹配 数据的元素
  • merge 同时进行enter 和 update

可视化原则

1、 marks

<img src =”https://tva1.sinaimg.cn/large/007S8ZIlgy1gh484griw7j31o60u0drz.jpg” width = 80%>

gis map绘制

<img src =”https://tva1.sinaimg.cn/large/007S8ZIlgy1gh485pempwj310q0u01kx.jpg” width = 70%>

如何选择mark和channel

<img src =”https://tva1.sinaimg.cn/large/007S8ZIlgy1gh486rydwdj31740tu4qp.jpg” width = 70%>

bar chart 最精确

<img src = “https://tva1.sinaimg.cn/large/007S8ZIlgy1gh487yuiozj30u00wcaob.jpg” width =40%>

长度最可靠

2、 channel

运用之妙,存乎一心