javascript - D3 对象恒常性不适用于键功能。 Enter 和 Update 每次都包含所有元素

Question

试图实现对象的恒常性。这个概念是使用文本中的渐进短语作为数据更新文本的 DOM。

////////////////////////////////////////////////////////////////////////
// We need a way to change the data to illustrate the update pattern.
// We use lyrics to do this.  Below is code for updating the data.
////////////////////////////////////////////////////////////////////////

var data = [];

function lyricIterator(phrases) {

    var nextIndex = 0;

    return {
        next: function(){

            if (nextIndex >= (phrases.length - 1)) {
                nextIndex = 0;
                debugger;
            } else {
                nextIndex = nextIndex + 1;
            }

            // console.log(phrases.slice(nextIndex - 1, nextIndex + 2));

            return phrases.slice(nextIndex - 1, nextIndex + 2);

        }
    }
}

var lyrics = [
    {i : 0, phrase : "Row, row, row your boat,"},
    {i : 1, phrase : "Gently down the stream."},
    {i : 2, phrase : "Merrily, merrily, merrily, merrily,"},
    {i : 3, phrase : "Life is but a dream."}
]

// Instantiate an iterator for our lyrics
var rrryb = lyricIterator(lyrics)

/////////////
// Set up
//////////////

var width = 960,
    height = 500;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(32," + (height / 2) + ")");

//////////////////////////
// Redraw the elements
/////////////////////////

function update() {

    data = rrryb.next()

    var phrases = svg.selectAll("phrases")
        .data(data, function(d) { return d.i; });

    console.log("Update")
    console.log(phrases)
    console.log("Enter")
    console.log(phrases.enter())
    console.log("Exit")
    console.log(phrases.exit())

    phrases.exit().remove();

    // UPDATE
    // Update old elements as needed.
    phrases.attr("class", "update");

    phrases.enter().append("text")
        .attr("class", "enter")
        .attr("dy", function(d, i) { return i * 32; })
        .attr("dx", ".35em");

    phrases.text(function(d) { return d.phrase; })

}

////////////////////////////////////////////////////
// Register the function to run at some interval
///////////////////////////////////////////////////

setInterval(function() {
    update()
}, 1500);

我将其作为输出到控制台(每次输入并更新所有元素):

输出只是一个个堆叠在一起的文本

Answer 1

取而代之的是:

var phrases = svg.selectAll("phrases")//there is no DOM as phrases it will return an empty selection always.
        .data(data, function(d) { return d.i; });

应该是这样的:

var phrases = svg.selectAll("text")//select all the text
        .data(data, function(d) { return d.i; });

原因:这将返回一个空选择总是 svg.selectAll("phrases") 这就是它一直附加的原因。

在第二种情况下，它将返回文本 DOM 的选择。

工作代码here