更新資料是輸入更新和退出選擇的基本示例
建立顯示靜態資料集的圖表相對簡單。例如,如果我們將這個物件陣列作為資料:
var data = [
{title: "A", value: 53},
{title: "B", value: 12},
{title: "C", value: 91},
{title: "D", value: 24},
{title: "E", value: 59}
];
我們可以建立一個條形圖,其中每個條形表示一個名為 title
的度量,其寬度表示該度量的值。由於此資料集未更改,我們的條形圖只有一個輸入選項:
var bars = svg.selectAll(".bars")
.data(data);
bars.enter()
.append("rect")
.attr("class", "bars")
.attr("x", xScale(0))
.attr("y", function(d){ return yScale(d.title)})
.attr("width", 0)
.attr("height", yScale.bandwidth())
.transition()
.duration(1000)
.delay(function(d,i){ return i*200})
.attr("width", function(d){ return xScale(d.value) - margin.left});
在這裡,我們將每個條的寬度設定為 0,並在轉換後將其設定為其最終值。
僅此輸入選擇就足以建立我們的圖表,你可以在這個小提琴中看到。
但是如果我的資料發生了變化呢
在這種情況下,我們必須動態更改我們的圖表。最好的方法是建立輸入,更新和退出選擇。但是,在此之前,我們必須對程式碼進行一些更改。
首先,我們將在名為 draw()
的函式中移動更改的部分:
function draw(){
//changing parts
};
這些變化的部分包括:
- 輸入,更新和退出選擇;
- 每個規模的領域;
- 軸的過渡;
在 draw()
函式裡面,我們呼叫另一個函式來建立我們的資料。在這裡,它只是一個返回 5 個物件的陣列的函式,從 10 箇中隨機選擇 5 個字母(按字母順序排序),對於每個物件,選擇 0 到 99 之間的值:
function getData(){
var title = "ABCDEFGHIJ".split("");
var data = [];
for(var i = 0; i < 5; i++){
var index = Math.floor(Math.random()*title.length);
data.push({title: title[index],
value: Math.floor(Math.random()*100)});
title.splice(index,1);
}
data = data.sort(function(a,b){ return d3.ascending(a.title,b.title)});
return data;
};
現在,讓我們轉向我們的選擇。但在此之前,需要注意的是:為了維護我們所謂的物件恆定性,我們必須指定一個關鍵函式作為 selection.data 的第二個引數:
var bars = svg.selectAll(".bars")
.data(data, function(d){ return d.title});
如果沒有它,我們的條形圖將不會平滑過渡,並且很難跟蹤軸上的變化(你可以看到刪除下面的小提琴中的第二個引數)。
因此,在正確設定我們的 var bars
後,我們可以處理我們的選擇。這是退出選擇:
bars.exit()
.transition()
.duration(1000)
.attr("width", 0)
.remove();
這些是輸入和更新選擇(在 D3 v4.x 中,更新選擇與使用 merge
的輸入選擇合併):
bars.enter()//this is the enter selection
.append("rect")
.attr("class", "bars")
.attr("x", xScale(0) + 1)
.attr("y", function(d){ return yScale(d.title)})
.attr("width", 0)
.attr("height", yScale.bandwidth())
.attr("fill", function(d){ return color(letters.indexOf(d.title)+1)})
.merge(bars)//and from now on, both the enter and the update selections
.transition()
.duration(1000)
.delay(1000)
.attr("y", function(d){ return yScale(d.title)})
.attr("width", function(d){ return xScale(d.value) - margin.left});
最後,每次單擊按鈕時我們都會呼叫 draw()
函式:
d3.select("#myButton").on("click", draw);
而這是小提琴顯示在行動所有這些 3 種選擇。