d3js是数据驱动图形的思路。基本可以这么理解,有什么样的图形,后面基本就有类似结构的数据。大概思路步骤如下:

一、适配数据格式

  这一步主要是为第二部服务,第一步的结果作为第二部的入参。

  比如,画层级图,需要特别的输入格式,如 d3.hierachy

  如果第二步的数据正合适,第一步可以省。

二、数据布局 (layout data)

  这一步就是将数据格式化,类似于图形。比如,

  比如,画层级图时候,pack(hierachy), 这时候形成数据格式类似于图形了

  如果图形简单可直接用常规数据结构,如柱状图用array

三、绘制图形

  画图,selection.call( chart )

04-18 17:53