SVG 提供强大的绘图功能,商业图表的描绘应用利用 SVG 进行实作,可以得到比较好的效果,D3在这方面内建出色的支援,考虑以下的配置:
首先append('svg') 将一个svg 元素那入指定的 div 元素中,接下来的 append('rect') 则于 SVG 区域描绘一个矩形,然后依序设定矩形的相关属性,最后我们可以在网页上得到以下的结果:
网页上呈现一个灰色方块的 svg 元素,这是最简单的svg 绘图实作,由于 svg 本身就是标签,我们可以将 D3语法中的资料系结设定,运用于 SVG 图形的绘制。以下对透过 SVG 描绘阵列资料。
其中的 data(numbers).enter() 将资料载入,针对每一组资料,append一个对应的rect 元素,最后透过匿名函式,逐一将每个取出的阵列资料加上 60 ,设定为rect 的 width 属性,如此一来,形成一个长条矩形,最后每一组阵列资料以 rect 元素列举长度如下。
D3语法简化了建构 SVG的过程,而实际的图形描绘,依然需要足够的 SVG 知识才能处理,所以在更深入D3之前,务必先对 SVG 有足够的理解(按这里)。