使用數(shù)據(jù)文件：tweets.json

{
    "tweets": [
        {
            "user": "Al",
            "content": "I really love seafood.",
            "timestamp": " Mon Dec 23 2013 21:30 GMT-0800 (PST)",
            "retweets": ["Raj", "Pris", "Roy"],
            "favorites": ["Sam"]
        }, {
            "user": "Al",
            "content": "I take that back, this doesn't taste so good.",
            "timestamp": "Mon Dec 23 2013 21:55 GMT-0800 (PST)",
            "retweets": ["Roy"],
            "favorites": []
        }, {
            "user": "Al",
            "content": "From now on, I'm only eating cheese sandwiches.",
            "timestamp": "Mon Dec 23 2013 22:22 GMT-0800 (PST)",
            "retweets": [],
            "favorites": ["Roy", "Sam"]
        }, {
            "user": "Roy",
            "content": "Great workout!",
            "timestamp": " Mon Dec 23 2013 7:20 GMT-0800 (PST)",
            "retweets": [],
            "favorites": []
        }, {
            "user": "Roy",
            "content": "Spectacular oatmeal!",
            "timestamp": " Mon Dec 23 2013 7:23 GMT-0800 (PST)",
            "retweets": [],
            "favorites ": []}, 
            {
                "user": "Roy",
                "content": "Amazing traffic!",
                "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)",
                "retweets": [],
                "favorites": []
            },
            {
                "user": "Roy",
                "content": "Just got a ticket for texting and driving!",
                "timestamp": " Mon Dec 23 2013 8:05 GMT-0800 (PST)",
                "retweets": [],
                "favorites": ["Sam", "Sally", "Pris"]
            },
            {
                "user": "Pris",
                "content": "Going to have some boiled eggs.",
                "timestamp": " Mon Dec 23 2013 18:23 GMT-0800 (PST)",
                "retweets": [],
                "favorites": ["Sally"]
            },
            {
                "user": "Pris",
                "content": "Maybe practice some gymnastics.",
                "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)",
                "retweets": [],
                "favorites": ["Sally"]
            },
            {
                "user": "Sam",
                "content": "@Roy Let's get lunch",
                "timestamp": " Mon Dec 23 2013 11:05 GMT-0800 (PST)",
                "retweets": ["Pris"],
                "favorites": ["Sally", "Pris"]
            }
    ]
}

首先先導(dǎo)入文件，并將文件數(shù)據(jù)存入變量Data_中。（但是因為導(dǎo)入方法是異步方法，它發(fā)送文件請求后就會返回，執(zhí)行后面的邏輯。所以如果后續(xù)邏輯緊接著就是用Data_，可能面臨此時數(shù)據(jù)未返回未賦予Data_從而其值為空的情況，在這里不考慮）。

var Data_;
d3.json('tweets.json',function(d){
    Data_=d;
});

然后，在建立列表，當(dāng)然此時html頁面的body元素中是完全空白的:

d3.select("body").append("ul");
d3.select("ul").selectAll("li").data(Data_.tweets,function(d,i){
    return d.user;
}).enter().append("li").text(d=>d.user);

這里有幾個要點

1. 首先選擇了body元素，然后創(chuàng)建（追加一個）ul元素。在此基礎(chǔ)上選擇所有li元素，顯然此時沒有l(wèi)i元素，所以.selectAll("li")會返回一個空集。

2. 在空集基礎(chǔ)之上綁定數(shù)據(jù)，暫且先不管data()。因為此時沒有DOM元素（li）可以用來綁定數(shù)據(jù)，造成情況就是待綁定的數(shù)據(jù)多余了，這些多余的數(shù)據(jù)分別被封裝為EnterNode類型對象，推入data方法所返回的對象的_enter屬性之中，因此后續(xù)使用enter()方法時會處理這些多余的數(shù)據(jù)。

   可以看見，data方法返回的Selection對象中有_enter、_exit、_groups、_parents四個屬性，當(dāng)綁定數(shù)據(jù)（調(diào)用data方法）后又多余數(shù)據(jù)，這些數(shù)據(jù)會被封裝為EnterNode類型對象，推入_enter中，數(shù)據(jù)被放在_data_屬性之中。當(dāng)然可以想到，如果綁定數(shù)據(jù)之后，DOM元素反而多余了，那么這些元素就會被推入_exit屬性之中，后面會看到

3. 調(diào)用enter()之后，后面的方法鏈會被循環(huán)調(diào)用。此時由于_enter屬性中有10個EnterNode對象，則方法鏈會被調(diào)用10次，每一次都會傳入EnterNode對象的__data__屬性作為數(shù)據(jù)，在語句.enter().append("li").text(d=>d.user);，會插入一個li元素（append方法是上圖中的_parent屬性調(diào)用的，可見后面有一個[ul]，它保存的就是父元素，在父元素上追加一個li子元素），一旦有這樣一個li元素生成，那么li元素就會自動創(chuàng)建一個__data__屬性，它的值和EnterNode對象的__data__是一致的，可以通過document.getElementsByTag("li")[i]._data_來查看。
   text用來設(shè)置元素文本，它的參數(shù)是一個函數(shù)，這個d當(dāng)然就是__data__。
   另外要注意， 如果忽略了append，直接寫成.enter().text(d=>d.user);則不會有任何效果，因為沒有實際添加元素，自然也不會有數(shù)據(jù)被實際綁定。

4. 回到data方法：

   data(Data_.tweets,function(d,i){
       return d.user;
   })
   

   首先注意，寫成Data_.tweets而不能寫成Data_，第一個參數(shù)是指定被綁定的數(shù)據(jù)集，它一定要是一個數(shù)組類型或類數(shù)組類型。在上面的json文件可知，引用Data_后，里面只有一個tweets對象，這顯然不合適，需要使用Data_.tweets，它代表數(shù)據(jù)數(shù)組。
   另外，第二個參數(shù)是指定主鍵，如果忽略，那么就按照數(shù)據(jù)數(shù)組的數(shù)字下標(biāo)來充當(dāng)主鍵。我們使用一個函數(shù)的返回值來充當(dāng)主鍵，它是這么工作的：

   • 首先，計算selection中選中的DOM元素（selectAll("li")）的主鍵，如果有多個DOM結(jié)點元素的主鍵值相同，則多余的DOM結(jié)點會被推入_exit_中，供之后的exit()方法連調(diào)用。
   • 然后，按照給定的Key函數(shù)，基于數(shù)據(jù)集（Data_.tweets）計算出每一個數(shù)據(jù)項的主鍵值。并與DOM元素的主鍵進(jìn)行匹配。如果這個主鍵匹配成功，則該元素可以被用來后續(xù)操作；如果匹配不成功（或主鍵值重復(fù)），則說明該數(shù)據(jù)是多余的，那么它會被封裝為EnterNode并被推入_enter中，供enter()之后的方法鏈調(diào)用

   由于第一次使用，會創(chuàng)建li元素并且為其綁定user作為主鍵值。注意，主鍵值（也就是函數(shù)返回值）必須是數(shù)字或者字符串，所以，如果想把一個對象作為主鍵，需要返回JSON.stringift(obj)或其他定義方法把它變成字符串，否則就會調(diào)用Object.prototype.toString().call，這樣就會得出[object Object]，則顯然會造成主鍵重復(fù)

我們來看一個例子。上述代碼運行后，會立刻在html頁面中創(chuàng)建一個由10個列表項的列表，主鍵是每一個tweet的user，但是顯然主鍵是有重復(fù)的。現(xiàn)在，我們再次運行代碼

d3.select("ul").selectAll("li").data(Data_.tweets,function(d,i){
    return d.user;
});

其返回結(jié)果