使用數(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_中。（但是因?yàn)閷?dǎo)入方法是異步方法，它發(fā)送文件請(qǐng)求后就會(huì)返回，執(zhí)行后面的邏輯。所以如果后續(xù)邏輯緊接著就是用Data_，可能面臨此時(shí)數(shù)據(jù)未返回未賦予Data_從而其值為空的情況，在這里不考慮）。

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

然后，在建立列表，當(dāng)然此時(shí)html頁(yè)面的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);

這里有幾個(gè)要點(diǎn)

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

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

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

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

4. 回到data方法：

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

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

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

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

我們來(lái)看一個(gè)例子。上述代碼運(yùn)行后，會(huì)立刻在html頁(yè)面中創(chuàng)建一個(gè)由10個(gè)列表項(xiàng)的列表，主鍵是每一個(gè)tweet的user，但是顯然主鍵是有重復(fù)的?，F(xiàn)在，我們?cè)俅芜\(yùn)行代碼

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

其返回結(jié)果