D3.js中對array的使用


由於D3類庫和array密切相關,我們有必要討論一下D3中的數據綁定以及在數組內部運算的方法。

1.D3中的數組

和其他編程語言一樣,D3的數組元素可以是數字或者字符等類型,例如:

someData=[20,36,48,59,600,88];

此外,考慮json數據在網絡傳輸中的便利性,D3數組也支持將json對象,如:

someBook=[{name:"book1", price: 50}, {name:"book2", price: 150}, {name:"book3", price: 350}];

 

2.D3中的數組過濾功能

array有一個filter()方法,這個方法的返回值是array中滿足自定義需求的數據數組。例如:

someNumer.filter(function(sn) {return sn >= 40});

這條語句中使用了someNumber這個array的filter方法,它使用了一個function,此function中將someNumber中的每一個元素(命名為sn)進行遍歷,如果滿足自定義條件(大於等於40),則將此元素拷貝至一個新建的數組中,最后的返回值便是這個數組。

 

3.綁定,enter()和exit()

D3使用data()方法將數組和選擇的CSS元素進行綁定;

enter()方法定義了當數組元素超過已經綁定或者選擇的CSS元素的個數時,則生成新的CSS元素,使用新CSS元素與數組中數據進行綁定;

exit()方法定義了當數組元素超過已經綁定或者選擇的CSS元素的個數時,則拋棄多余的數組元素。

<html>
<head>
    <meta  http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>test</title>    
    <script type="text/javascript" src="d3.js"></script>
    
</head>
<style>
#borderdiv {
width: 200px;
height: 50px;
border: 1px solid gray;
}
</style>
    
<body>
    <div id="borderdiv"> </div>  
</body>
    
<script>var someNumbers = [17, 82, 9 ,500, 40];
var smallerNumers = someNumbers.filter(function(e1){return e1 <= 40 ? this : null});
    d3.select("body").selectAll("div")
    .data(smallerNumers)
    .enter()
    .append("div")
    .html(function(sd) {return sd})
    .style("font-weight", "900");
</script>

</html>

上面的代碼中,smallerNumber中將會含有17,9,40三個元素,但是只有broderdiv這一個div,所以當執行上面的腳本后,會為9和40新生成兩個div。如圖

當然,如果將上述代碼中的enter()方法替換為exit(), 那么9和40將被丟棄,不會生成新的div。

 

參考:d3.js in action


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM