d3.js學習筆記

入門好文：http://www.ourd3js.com/wordpress/?p=51

d3.js和d3.min.js內容一樣，后者是壓縮過的，適合發行版本，前者適合開發人員。

1.選擇集(滿足css選擇符的要求)主要和數據綁定一起使用

d3.select()

d3.selectAll()

var body = d3.select("body")

2.數據綁定(實質就是在選擇集的元素對象里面添加一個變量，並賦值)

p.text(function(d,i)){return d+" "+i}

update、enter（不夠）、exit（多於）處理模板，在d3中較為常用

3.畫柱形圖

 

1.比例尺

第一個是連續序列，第二個是離散序列、第三個是對時間序列

2.坐標軸

　　https://github.com/d3/d3/wiki/SVG

 

svg是一種支持矢量的畫布，矢量圖放大縮小是不會有影響的，標量圖放大縮小會失真。

控制台輸出：console.log()

 function(d, i)，d 代表與當前元素綁定的數據，i 代表索引號

選擇、插入、刪除元素

 

tempdatax

用戶間的通話記錄（即用戶a和用戶b在什么時候進行過通話）

tempdata

目標用戶間的通話頻次

151是什么？？？？？？？？？？

 

for(var i=0;i<tempdatax.nodes.length;i++){
        var tempimg=Math.floor(Math.random()*151)+1;//151是什么？？？？？
        if(tempimg>102){
            tempimg=icon_list[Math.floor(Math.random()*6)].url;
        }else{//內部員工，有頭像
            tempimg="img/image/"+((tempimg < 10 && "00"+tempimg)||(tempimg >=10 && tempimg < 100 && "0"+tempimg)||(tempimg >= 100 && tempimg))+".jpg";
        }
        nodearray.push({
        "id":""+tempdatax.nodes[i].id,//唯一id
        "img":{"url":tempimg,"width":16,"height":16},//圖片數據路徑
        "title":""+tempdatax.nodes[i].id,
        "propn":1,//屬性顯示個數，從prop笿個開始計敿        
        "prop":[{"title":"name","value":tempdata.nodes[Math.floor(Math.random()*76)].name+"","type":0}],//元數據title標題value值，type顯示方式0只顯示值，1全部顯示＿只顯示標颿        
        "event":{
            "click":function(d){},
            "dblclick":function(d){}    
        },
        "propvalue":{}
        });
};