D3 入門概念 - 整合 SVG 的資料視覺化

Web 資料視覺化 - D3 入門概念

SVG 提供強大的繪圖功能,商業圖表的描繪應用利用 SVG 進行實作,可以得到比較好的效果,D3在這方面內建出色的支援,考慮以下的配置:
<body>
    <div id="s">
    </div>
    <script>
        d3.select('#s').append('svg')
            .attr('width', 600).attr('height', 360)
            .append('rect')
            .attr('x', 10).attr('y', 10)
            .attr('width', 300).attr('height', 180)
            .attr('fill', 'dimgray');
    </script>
</body>
首先append('svg') 將一個svg 元素那入指定的 div 元素中,接下來的 append('rect') 則於 SVG 區域描繪一個矩形,然後依序設定矩形的相關屬性,最後我們可以在網頁上得到以下的結果:



網頁上呈現一個灰色方塊的 svg 元素,這是最簡單的svg 繪圖實作,由於 svg 本身就是標籤,我們可以將 D3語法中的資料繫結設定,運用於 SVG 圖形的繪製。以下對透過 SVG 描繪陣列資料。
<body>
    <div id="s">
    </div>
    <script>
        var numbers = [677, 86, 500, 235, 488, 14, 556, 92];
        d3.select('#s').append('svg')
            .attr('width', 600).attr('height', 360).selectAll('rect')
            .data(numbers).enter()
            .append('rect')
            .attr('x', 10).attr('y', function (d,i) { return i * 30; })
            .attr('width',function (d) { return d + 60 }   ).attr('height', 20 )
            .attr('fill', 'royalblue');
    </script>
</body>
其中的 data(numbers).enter() 將資料載入,針對每一組資料,append一個對應的rect 元素,最後透過匿名函式,逐一將每個取出的陣列資料加上 60 ,設定為rect 的 width 屬性,如此一來,形成一個長條矩形,最後每一組陣列資料以 rect 元素列舉長度如下。



D3語法簡化了建構 SVG的過程,而實際的圖形描繪,依然需要足夠的 SVG 知識才能處理,所以在更深入D3之前,務必先對 SVG 有足夠的理解(按這裏)。



沒有留言: