更新資料是輸入更新和退出選擇的基本示例

建立顯示靜態資料集的圖表相對簡單。例如,如果我們將這個物件陣列作為資料:

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
};

這些變化的部分包括:

  1. 輸入,更新和退出選擇;
  2. 每個規模的領域;
  3. 軸的過渡;

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 種選擇。