為什么80%的碼農都做不了架構師？>>> ??

? ? 我們可以使用append方法, 來創建一個單一元素:

var svg = d3.select('svg'),d = {"x": 50, "y": 50};svg.append("circle").attr("cx", d.x).attr("cy", d.y).attr("r", 25);

? ? 如果想傳遞多條數據, 則需要這樣編寫:

var svg = d3.select('svg'),data = [{"x": 50, "y": 50}, {"x": 120, "y": 50}];svg.selectAll("circle").data(data).enter().append("circle").attr("cx", function(d) { return d.x; }).attr("cy", function(d) { return d.y; }).attr("r", 25);

這里代碼主要的疑惑點在于:?

svg.selectAll("circle")

為什么我們要選擇要新創建的DOM元素呢?

以下是處理方式. 我們不必告訴D3如何實現, 而是告訴D3我們所想要的. 我想要一個circle綁定到一個data上, 即每個circle和data數組中的元素一一對應. 這種概念叫做:?data join

數據 join to 存在的DOM元素, 產生一個update操作. 坐標非update的數據產生enter的操作, 而右邊的DOM元素由于沒有綁定, 則處于Exit狀態, 代表被刪除.

現在我們來解釋以下神奇的enter-append?的代碼是如何data join:

1. 首先,?svg.selectAll("circle")返回一個空的選擇器, 它的父節點是svg.

2. 空的選擇器綁定于數據data, 產生三個新的選擇器分別代表Eneter, update?和?exit. 這三個選擇器都是空的, 只有Enter為每個新的元素保留占位符.

3. selection.data返回update選擇器, 當enter/exit均解綁于update的時候. selection.enter返回enter選擇器.

4.?

?

?

?

?

?

?

?

轉載于:https://my.oschina.net/voler/blog/775063

總結

以上是生活随笔為你收集整理的d3.js学习笔记--Mike Bostock: Thinking with Joins的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。