【 D3.js 進階系列 — 3.1 】 圓形分區圖

標籤：d3   partition   分區圖   布局   圓形   

分區圖布局的 size 函數很有意思，即可用於製作矩形分區圖，也可用於製作圓形分區圖。本文就來談討一下圓形分區圖的製作。

本文與【進階 - 第 3.0 章】基本相同，只有布局函數的 size 函數和繪製圖形的部分稍有區別。

1. 資料

本文仍然使用【入門 - 第 9.4 章】的資料，內容為中國境內幾個城市的所屬關係。

2. 布局（資料轉換）

var partition = d3.layout.partition().sort(null).size([2 * Math.PI, radius * radius])  .value(function(d) { return 1; });

第 3 行：size 函數，第一個值為 2 * PI ，第二個值為圓半徑的平方。如果您只需要得到效果，可不比深究為什麼這麼做，只需記得這麼用即可。

注意第3行與【進階 - 第 3.0 章】的不同。

3. 繪製

先定義一個繪製弧形的函數，這個函數在【入門 - 第 9.1 章】中也用過。

var arc = d3.svg.arc().startAngle(function(d) { return d.x; }).endAngle(function(d) { return d.x + d.dx; }).innerRadius(function(d) { return Math.sqrt(d.y); }).outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });

請好好體會上面的代碼是什麼意思。如果以圓形的形式來轉換資料，那麼 d.x 和 d.y 分別代表圓弧的繞圓心方向的起始位置和由圓心向外方向的其實位置。d.dx 和 d.dy 分別代表各自的寬度。

接下來分別繪製圓弧和文字。

var arcs = svg.selectAll("g")  .data(nodes)  .enter().append("g");arcs.append("path").attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring.attr("d", arc).style("stroke", "#fff").style("fill", function(d) { return color((d.children ? d : d.parent).name); }).on("mouseover",function(d){d3.select(this).style("fill","yellow");}).on("mouseout",function(d){d3.select(this).transition().duration(200).style("fill", function(d) { return color((d.children ? d : d.parent).name); });});  arcs.append("text")  .style("font-size", "12px").style("font-family", "simsun").attr("text-anchor","middle").attr("transform",function(d,i){//第一個元素（最中間的），只平移不旋轉if( i == 0 )return "translate(" + arc.centroid(d) + ")";//其他的元素，既平移也旋轉var r = 0;if( (d.x+d.dx/2)/Math.PI*180 < 180 )  // 0 - 180 度以內的r = 180 * ((d.x + d.dx / 2 - Math.PI / 2) / Math.PI);else  // 180 - 360 度以內的r = 180 * ((d.x + d.dx / 2 + Math.PI / 2) / Math.PI);//既平移也旋轉return  "translate(" + arc.centroid(d) + ")" +"rotate(" + r + ")";}) .text(function(d) { return d.name; });

繪製方法問題不大，唯一要注意的是文字的旋轉角度問題，請好好看看上面的注釋問題。

4. 結果

完整代碼，請點擊下面的連結，再右鍵點擊查看原始碼：

http://www.ourd3js.com/demo/J-3.1/circle_partition.html

文檔資訊

• 著作權聲明：署名（BY）-非商業性（NC）-禁止演繹（ND）
• 發表日期：2014 年 11 月 30 日
• 更多內容：OUR D3.JS - 資料視覺效果專題站 和 CSDN個人部落格
• 備忘：本文發表於 OUR D3.JS ，轉載請註明出處，謝謝

【 D3.js 進階系列 — 3.1 】 圓形分區圖