什麼是 D3 資料驅動文件

我們都習慣名稱 D3.js ，它可能忘了 D3 實際上是 DDD （ d ata- d 裡文 d ocuments）。這就是 D3 做得很好，DOM（文件物件模型）操作的資料驅動方法：D3 將資料繫結到 DOM 元素，並根據有界資料操作這些元素。

讓我們看一下這個例子中 D3 的一個非常基本的特徵。在這裡，我們不會附加任何 SVG 元素。相反，我們將使用頁面上已存在的 SVG，如下所示：

<svg width="400" height="400">
    <circle cx="50" cy="50" r="10"></circle>
    <circle cx="150" cy="50" r="10"></circle>
    <circle cx="210" cy="320" r="10"></circle>
    <circle cx="210" cy="30" r="10"></circle>
    <circle cx="180" cy="200" r="10"></circle>
</svg>

這是一個非常基本的 SVG，有 5 個圓圈。現在，這些圈子並沒有繫結任何資料。我們來看看這最後的指控：

在我們的程式碼中，我們寫道：

var svg = d3.select("svg");
var circles = svg.selectAll("circle");
console.log(circles.nodes());

在這裡，d3.select("svg") 返回一個包含 <svg width="400" height="400"></svg> 標籤的 d3 物件和所有子標籤 <circle>s。請注意，如果頁面上存在多個 svg 標籤，則僅選擇第一個。如果你不想這樣，你也可以按標籤 id 選擇，比如 d3.select("#my-svg")。d3 物件具有內建的屬性和方法，我們將在以後使用它們。

svg.selectAll("circle") 從 <svg> 標籤內的所有 <circle></circle> 元素建立一個物件。它可以搜尋多個圖層，因此標記是直接子圖示並不重要。

circles.nodes() 返回帶有所有屬性的 circle 標籤。

如果我們看一下控制檯並選擇第一個圓圈，我們會看到這樣的東西：

https://i.stack.imgur.com/RHt5m.jpg

首先，我們有 attributes，然後是 childNodes，然後是 children，依此類推……但沒有資料。

讓我們繫結一些資料

但是，如果我們將資料繫結到這些 DOM 元素會發生什麼？

在我們的程式碼中，有一個函式建立一個具有兩個屬性 x 和 y 的物件，帶有數值（此物件在陣列中，請檢查下面的小提琴）。如果我們將這些資料繫結到圈子……

circles.data(data);

如果我們檢查控制檯，我們將會看到這一點：

https://i.stack.imgur.com/jnHL4.jpg

我們在 attributes 之前有了新的東西！ 一個名為 __data__ 的東西……看看：x 和 y 的價值就在那裡！

例如，我們可以根據這些資料更改圓圈的位置。看看這個小提琴 。

這就是 D3 最擅長的：將資料繫結到 DOM 元素並根據有界資料操作這些 DOM 元素。