D3.js 餅狀圖的製做

時間 2019-12-20

原文原文鏈接

一、數據html

　　有以下數據，須要可視化：數組

var dataset = [ 30 , 10 , 43 , 55 , 13 ];

　　這樣的值是不能直接繪圖的。例如繪製餅狀圖的一個部分，須要知道一段弧的起始角度和終止角度，這些值都不存在於數組 dataset 中。所以，須要用到佈局，佈局的做用就是：計算出適合於做圖的數據。這個過程稱爲數據轉換app

二、佈局（數據轉換）

　　定義一個佈局，返回值賦給變量 pie，此時 pie 能夠當作函數使用。svg

var pie = d3.layout.pie();

　　將數組 dataset 做爲 pie() 的參數，返回值給 piedata。如此一來，函數

　　piedata 就是轉換後的數據。工具

　　簡單吧，很是輕鬆就獲得了。在控制檯輸出 piedata ，讓咱們來看看數據轉換成什麼了。佈局

var piedata = pie(dataset);

　　如上圖所示，5 個整數被轉換成了 5 個對象（Object），每一個對象都有變量起始角度（startAngle）和終止角度（endAngle），還有原數據（屬性名稱爲 data）。這些都是繪圖須要的數據。spa

　　千萬記住：佈局不是要直接繪圖，而是爲了獲得繪圖所需的數據。code

三、繪製圖形orm

　　爲了根據轉換後的數據 piedata 來做圖，還須要同樣工具：生成器。

　　SVG 有一個元素，叫作路徑 <path>，是 SVG 中功能最強的元素，它能夠表示其它任意的圖形。顧名思義，路徑元素就是經過定義一個段「路徑」，來繪製出各類圖形。

　　可是，路徑是很難計算的，經過佈局轉換後的數據 piedata 仍然很難手動計算獲得路徑值。爲咱們完成這項任務的，就是生成器。

　　這裏要用到的叫作弧生成器，可以生成弧的路徑，由於餅圖的每一部分都是一段弧。

var outerRadius = 150; //外半徑
var innerRadius = 0; //內半徑，爲0則中間沒有空白

var arc = d3.svg.arc()  //弧生成器
    .innerRadius(innerRadius)   //設置內半徑
    .outerRadius(outerRadius);  //設置外半徑

　　弧生成器返回的結果賦值給 arc。此時，arc 能夠當作一個函數使用，把 piedata 做爲參數傳入，便可獲得路徑值。

　　接下來，能夠在 SVG 中添加圖形元素了。先在 <svg> 裏添加足夠數量（5個）個分組元素（g），每個分組用於存放一段弧的相關元素。

var arcs = svg.selectAll("g")
    .data(piedata)
    .enter()
    .append("g")
    .attr("transform","translate("+ (width/2) +","+ (width/2) +")");

　　接下來對每一個 <g> 元素，添加 <path> 。

arcs.append("path")
    .attr("fill",function(d,i){
        return color(i);
    })
    .attr("d",function(d){
        return arc(d);   //調用弧生成器，獲得路徑值
    });

　　由於 arcs 是同時選擇了 5 個 <g> 元素的選擇集，因此調用 append(「path」) 後，每一個 <g> 中都有 <path> 。路徑值的屬性名稱是 d，調用弧生成器後返回的值賦值給它。要注意，arc(d) 的參數 d 是被綁定的數據。

　　另外，color 是一個顏色比例尺，它能根據傳入的索引號獲取相應的顏色值，定義以下。

var color = d3.scale.category10();   //有十種顏色的顏色比例尺

　　而後在每個弧線中心添加文本。

arcs.append("text")
    .attr("transform",function(d){
        return "translate(" + arc.centroid(d) + ")";
    })
    .attr("text-anchor","middle")
    .text(function(d){
        return d.data;
    });

　　arc.centroid(d) 能算出弧線的中心。要注意，text() 裏返回的是 d.data ，而不是 d 。由於被綁定的數據是對象，裏面有 d.startAngle、d.endAngle、d.data 等，其中 d.data 纔是轉換前的整數的值。

<html>  
  <head>  
        <meta charset="utf-8">  
        <title>餅狀圖</title>  
  </head> 

<style>


</style>
    <body>  
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
        <script>
        
        var width = 400;
        var height = 400;
        var dataset = [ 30 , 10 , 43 , 55 , 13 ];
        
        var svg = d3.select("body")
                    .append("svg")
                    .attr("width", width)
                    .attr("height", height);
        
        var pie = d3.layout.pie();

        var piedata = pie(dataset);
        
        var outerRadius = 150;    //外半徑
        var innerRadius = 0;    //內半徑，爲0則中間沒有空白

        var arc = d3.svg.arc()    //弧生成器
                    .innerRadius(innerRadius)    //設置內半徑
                    .outerRadius(outerRadius);    //設置外半徑
        
        var color = d3.scale.category10();
        
        var arcs = svg.selectAll("g")
                      .data(piedata)
                      .enter()
                      .append("g")
                      .attr("transform","translate("+ (width/2) +","+ (width/2) +")");
                      
        arcs.append("path")
            .attr("fill",function(d,i){
                return color(i);
            })
            .attr("d",function(d){
                return arc(d);
            });
        
        arcs.append("text")
            .attr("transform",function(d){
                return "translate(" + arc.centroid(d) + ")";
            })
            .attr("text-anchor","middle")
            .text(function(d){
                return d.data;
            });
        
        console.log(dataset);
        console.log(piedata);
          
        </script>  
        
    </body>  
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。