D3.js 是一款 JavaScript 數據可視化庫,它可以讓我們使用 HTML、SVG 和 CSS 等技術制作出富有交互性和動態性的數據可視化效果。而在 D3.js 中,我們經常會用到 JSON 數據格式,因為 JSON 可以方便地表示復雜的數據結構。
JSON(JavaScript Object Notation)是一種輕量級的數據交換格式,以鍵值對的形式表示信息。在 D3.js 中,我們常常使用 JSON 來表示數據,比如一個柱狀圖數據的格式可以如下:
{ "data": [ {"name": "A", "value": 30}, {"name": "B", "value": 50}, {"name": "C", "value": 20} ] }我們可以用 D3.js 的內置函數 d3.json() 來讀取 JSON 數據,并在頁面上繪制出對應的可視化圖表。下面的代碼示例展示了如何讀取 JSON 數據并在頁面上繪制一個柱狀圖:
// 讀取 JSON 數據 d3.json("data.json", function(data) { // 創建 svg 元素 var svg = d3.select("body") .append("svg") .attr("width", 500) .attr("height", 300); // 繪制柱狀圖 svg.selectAll("rect") .data(data.data) .enter() .append("rect") .attr("x", function(d, i) { return i * 60; }) .attr("y", function(d) { return 300 - d.value * 5; }) .attr("width", 50) .attr("height", function(d) { return d.value * 5; }) .attr("fill", "steelblue"); });在這個示例中,我們先使用 d3.json() 函數讀取名為 data.json 的 JSON 數據文件,然后創建一個 SVG 元素,并使用選擇器和數據綁定的方式繪制了一個柱狀圖。這個柱狀圖的數據來源就是我們讀取的 JSON 數據,其中每個數據節點都由一個 name 和一個 value 組成。 因為 D3.js 是一個功能強大的數據可視化庫,所以除了繪制柱狀圖以外,我們還可以通過使用 JSON 數據來繪制各種其他類型的可視化圖表,比如折線圖、散點圖、熱力圖等等,等等。
上一篇vue 頁面側滑入