當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【D3.js数据可视化系列教程】（三十六）-- 冰柱图

發布時間：2024/1/8 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了【D3.js数据可视化系列教程】（三十六）-- 冰柱图小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 冰柱圖簡介

冰柱圖使用D3的分區布局實現，主要用來展現數據的層次和包含關系。實際上使用笛卡爾排列的分區布局數據繪制的就是冰柱圖，徑向排列就是旭日圖。

下圖給出的是笛卡爾排列方式。

? 2. 冰柱圖示例

? 3. 實現冰柱圖

(1) 定義冰柱圖布局

var partition = d3.layout.partition()//遞歸分割節點樹到一個旭日或冰柱。.size([width, height])//在x和y指定的布局大小。.value(function(d) { return d.size; });

(2) 用冰柱圖布局轉換數據

var nodes = partition.nodes(root);//計算分區布局并返回節點的數組。

(3) 綁定新數據添加節點和文字

略。詳見代碼~

? 4. 完整代碼

<!DOCTYPE html> <head> <meta charset="utf-8"> <title>testD3-34-icicle.html</title> <style>.node {fill: #ddd;stroke: #fff; }.label {font: 10px sans-serif;text-anchor: middle; }</style> </head> <body> <script src="d3.js" charset="utf-8" ></script><script>var width = 960,height = 500;var color = d3.scale.category20();var svg = d3.select("body").append("svg").attr("width", width).attr("height", height); // (1)冰柱布局 var partition = d3.layout.partition()//遞歸分割節點樹到一個旭日或冰柱。.size([width, height])//在x和y指定的布局大小。.value(function(d) { return d.size; });d3.json("Icicle.json", function(error, root) {// (2) 用冰柱圖布局轉換數據var nodes = partition.nodes(root);//計算分區布局并返回節點的數組。// (3) 設置文字和節點svg.selectAll(".node").data(nodes).enter().append("rect").attr("class", "node").attr("x", function(d) { return d.x; }).attr("y", function(d) { return d.y; }).attr("width", function(d) { return d.dx; }).attr("height", function(d) { return d.dy; }).style("fill", function(d) { //顏色:有孩子則返回自己的顏色，無孩子則返回爸爸的顏色return color((d.children ? d : d.parent).name);});svg.selectAll(".label").data(nodes.filter(function(d) { return d.dx > 6; })).enter().append("text").attr("class", "label").attr("dy", ".35em").attr("transform", function(d) { return "translate(" + (d.x + d.dx / 2) + "," + (d.y + d.dy / 2) + ")rotate(90)"; }).text(function(d) { return d.name; }); });</script></body>

? 5. 數據：Icicle.json

{"name": "AAA", "children": [{"name": "BBB", "children": [{"name": "CCC", "children": [{"name": "DDD", "children": [{ "name": "EEE", "size": 73 }, { "name": "EEE", "size": 73 }, { "name": "EEE", "size": 73 }, { "name": "EEE", "size": 73 }, { "name": "EEE", "size": 73 }, { "name": "EEE", "size": 73 }, { "name": "EEE", "size": 73 }, { "name": "EEE", "size": 73 }, { "name": "EEE", "size": 73 }, { "name": "EEE", "size": 73 }, { "name": "EEE", "size": 73 }, { "name": "EEE", "size": 73 }, { "name": "EEE", "size": 73 }, { "name": "EEE", "size": 73 }, { "name": "EEE", "size": 73 }, { "name": "EEE", "size": 73 }]}, { "name": "DDD", "size": 73 }, { "name": "DDD", "size": 39 }, { "name": "DDD", "size": 67 }, { "name": "DDD", "size": 73 }, { "name": "DDD", "size": 39 }, { "name": "DDD", "size": 67 }, { "name": "DDD", "size": 73 }, { "name": "DDD", "size": 39 }, { "name": "DDD", "size": 67 }, { "name": "DDD", "size": 73 }, { "name": "DDD", "size": 39 }, { "name": "DDD", "size": 67 }, { "name": "DDD", "size": 73 }, { "name": "DDD", "size": 39 }, { "name": "DDD", "size": 67 }, { "name": "DDD", "size": 73 }]}, { "name": "CCC", "size": 67 }, { "name": "CCC", "size": 73 }, { "name": "CCC", "size": 39 }, { "name": "CCC", "size": 67 }, { "name": "CCC", "size": 73 }, { "name": "CCC", "size": 39 }, { "name": "CCC", "size": 67 }, { "name": "CCC", "size": 73 }, { "name": "CCC", "size": 39 }, { "name": "CCC", "size": 67 }, { "name": "CCC", "size": 73 }, { "name": "CCC", "size": 39 }, { "name": "CCC", "size": 67 }, { "name": "CCC", "size": 73 }, { "name": "CCC", "size": 39 }, { "name": "CCC", "size": 67 }, { "name": "CCC", "size": 73 }]}, { "name": "BBB", "size": 39 }, { "name": "BBB", "size": 67 }, { "name": "BBB", "size": 73 }] }

總結

以上是生活随笔為你收集整理的【D3.js数据可视化系列教程】（三十六）-- 冰柱图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。