D3.js 線段生成器 (V3版本)

線段生成器

 

與線段生成器相關的方法:

 

d3.svg.line()

//創建一個線段生成器。

 

line(data)

//使用線段生成器繪制data數據。

 

line.x([x])

//設置或獲取線段x坐標的訪問器，即使用什么數據作為線段的x坐標。

 

line.y([y])

//同上。設置或獲取y坐標的訪問器。

 

line.interpolate([interpolate])

//設置或獲取線段的插值模式，共有13種。

 

line.tension([tension])

//設置或獲取張力系數，當插值模式為cardinal、cardinal-open、cardinal-closed的時候有效。

 

line.defined([defined])

//設置或獲取一個訪問器，用於確認線段是否存在，只有判定為存在的數據才會被繪制。

 

line.x和line.y可制定規則:如何從數據中獲取x和y坐標。這種方法稱為訪問器。

 

line.x和line.y的默認為:

function x(d){ 2 return d[0]　　　　　　 //第一個值是x坐標
} 4 
function y(d){ 6 return d[1] 　　　　　　//第二個值是y坐標
}

 

在SVG區域里，線段元素是: 

 

<line x1="20" y1="20" x2="300" y2="100" />

 

添加元素時，可以使用append()，再設置屬性，如: 

 

 svg.append("line") 2             .attr("x1",20) 3             .attr("y1",20) 4             .attr("x2",300) 5             .attr("y2",100)

 

 

還有一種添加直線的方法:使用路徑元素<path>。路徑元素也是可以繪制直線的，例如，相同的直線可用:

 

<path d="M20,20L300,100" />

 

 

換成D3添加元素的方式，代碼:

 

svg.append("path") 2             .attr("d","M20,20L300,100")

 

這樣做雖然是成功繪制了該路徑，但有一個問題:類似M20,20L300,100的字符串，是怎么得到的呢？此處只有兩個點，可以手動輸入。如果有成百上千各店，全部手動輸入，不太方便也不太現實。因此D3中引入了路徑生成器(Path Generator)的概念，能夠自動根據數據生成路徑。用於生成線段的程序，叫做線段生成器(Line Generator)

 

線段生成器由d3.svg.line()創建，先看一個簡單的例子:

 

//創建一個svg畫圖區域
        var svg = d3.select("#body")  3                     .append("svg")  4                     .attr("width",600)  5                     .attr("height",400)  6 
        //線段的點數據，每一項是一個點的x和y坐標
        var lines = [[80,80],[200,100],[200,200],[100,200]]  9         //創建一個線段生成器
        var linePath = d3.svg.line() 11 
        //添加路徑
        svg.append("path") 14             .attr("d",linePath(lines))      //使用了線段生成器
            .attr("stroke","black")         //線的顏色
            .attr("stroke-width","3px")     //線的寬度
            .attr("fill","none")            //填充顏色為none

 

線段的數據有四個點，保存在變量lines里。線段生成器保存在變量linePath里，如此linePath可當做函數使用:linePath(lines)根據數據lines生成路徑。結果是一段折現。效果圖: 

 

 

根據上面的例子，我們對x和y訪問器做一些修改:

 

 //創建一個svg畫圖區域
        var svg = d3.select("#body")  3                     .append("svg")  4                     .attr("width",600)  5                     .attr("height",400)  6 
        
        var lines = [80,120,160,200,240,280]  9         var linePath = d3.svg.line() 10                         .x(function(d){return d}) 11                         .y(function(d,i){ 12                             return i%2 == 0? 40 : 120
 }) 14 
        //添加路徑
        svg.append("path") 17             .attr("d",linePath(lines))      //使用了線段生成器
            .attr("stroke","black")         //線的顏色
            .attr("stroke-width","3px")     //線的寬度
            .attr("fill","none")            //填充顏色為none

 

 

如此，調用linePath(lines)所得的路徑中，各頂點為:(80,40)、(120,120)、(160,40)、(200,120)、(240,40)、(280,120)。以第一個點為例講一下：

x = 80 (d等80)

y = 0 % 2 == 0 ? 40 : 120 (i等於0,最終表達式的值為40)

以此類推，可計算得到各坐標點。結果如圖: 

 

 

線段生成器是有插值模式的，根據模式的不同，線段的形式(路徑)會發生很大的變化。更有13中模式，如linear、linear-closed、step、basis、bundle、cardinal、cardinal-open、cardinal-closed、monotone等。設置方法如下:

 

var linePath = d3.svg.line() 2                 .interpolate("linear-closed")

 

 

插值模式，指的是對於線段兩個端點之間的值如何計算。默認的插值模式是linear，即線性的。interpolate的參數，除預定義的13種模式之外，還可以是一個自己定義的函數。接下來看看線性插值模式(linear)的實現方法:

 

function interpolateLinear(points){ 2     return points.join("L") 3 }

 

 

意思是:對於所有的頂點，在頂點數值之間插入一個L作為分隔。其他所有的模式都是使用類似的手法實現的。如下圖展示了不同插值模式下線段的形態，雖然有些已經不是"線段"了，但都是根據線段的頂點生成的。當插值模式為cardinal、cardinal-open、cardinal-closed的時候，可是使用tension()設置張力系數。代碼:

 

step插值模式 :

 

 //創建一個svg畫圖區域
        var svg = d3.select("#body")  3                     .append("svg")  4                     .attr("width",600)  5                     .attr("height",400)  6        

        //step插值模式
        var lines = [80,120,160,200,240,280] 10         var linePath = d3.svg.line() 11                         .interpolate("step") 12                         .x(function(d){return d}) 13                         .y(function(d,i){ 14                             return i%2 == 0? 40 : 120
 }) 16 

        //添加路徑
        svg.append("path") 20             .attr("d",linePath(lines))      //使用了線段生成器
            .attr("stroke","black")         //線的顏色
            .attr("stroke-width","3px")     //線的寬度
            .attr("fill","none")            //填充顏色為none

 

 

效果圖:

 

 

basis插值模式 :

 

//創建一個svg畫圖區域
        var svg = d3.select("#body")  3                     .append("svg")  4                     .attr("width",600)  5                     .attr("height",400)  6 

        //basis插值模式
        var lines = [80,120,160,200,240,280] 10         var linePath = d3.svg.line() 11                         .interpolate("basis") 12                         .x(function(d){return d}) 13                         .y(function(d,i){ 14                             return i%2 == 0? 40 : 120
 }) 16 
        //添加路徑
        svg.append("path") 19             .attr("d",linePath(lines))      //使用了線段生成器
            .attr("stroke","black")         //線的顏色
            .attr("stroke-width","3px")     //線的寬度
            .attr("fill","none")            //填充顏色為none

 

 

效果圖:

 

 

cardinal插值模式 :

 

 //創建一個svg畫圖區域
        var svg = d3.select("#body")  3                     .append("svg")  4                     .attr("width",600)  5                     .attr("height",400)  6 
         //cardinal插值模式
         var lines = [80,120,160,200,240,280]  9          var linePath = d3.svg.line() 10                          .interpolate("cardinal") 11                          .x(function(d){return d}) 12                          .y(function(d,i){ 13                              return i%2 == 0? 40 : 120
 }) 15 

        //添加路徑
        svg.append("path") 19             .attr("d",linePath(lines))      //使用了線段生成器
            .attr("stroke","black")         //線的顏色
            .attr("stroke-width","3px")     //線的寬度
            .attr("fill","none")            //填充顏色為none

 

 

效果圖 :

 

 

 

 

 

 

如果選擇性的使用頂點數據，可用defined()。舉個例子: 

 

 

  //創建一個svg畫圖區域
        var svg = d3.select("#body")  3                     .append("svg")  4                     .attr("width",600)  5                     .attr("height",400)  6 
        //選擇性的使用頂點數據
        var lines = [80,120,160,200,240,280]  9         var linePath = d3.svg.line() 10                         .x(function(d){return d}) 11                         .y(function(d,i){ 12                             return i%2 == 0 ? 40 : 120
 }) 14                         .defined(function(d){ 15                             return d < 200
 }) 17 
        //添加路徑
        svg.append("path") 20             .attr("d",linePath(lines))      //使用了線段生成器
            .attr("stroke","black")         //線的顏色
            .attr("stroke-width","3px")     //線的寬度
            .attr("fill","none")            //填充顏色為none

 

效果圖 :