d3.js更新模式不能按預期工作

Question

我在D3 v4中寫了一個小燈箱，點擊三個圖像加載：選定的一個，上一組和下一組。

我將這些圖像的引用存儲在與general update pattern一起使用的數組中。然後，當點擊「前一個」或者「下一個」按鈕陣列被修改，使得一個圖像添加的和在任一端一個移除：

[image1, image2, image3]>「下一個」>[image2, image3, image4]

[image1, image2, image3]>「分組」 >[image99, image1, image2]

換句話說，一個圖像應該「退出」，兩個應該「更新」，一個應該「輸入」。視覺上，它應該是這樣的：

不幸的是，設計的，我不知道爲什麼它不工作。在控制檯中，我看到兩個「退出」，一個「更新」和兩個「進入」。爲什麼？

這是我的pen和相關的代碼塊如下。感謝任何幫助。

d3.selectAll('div[role="img"]') // image group for lightbox 
    .on("mousedown touchstart", function(d, i, n) { 
     luxBox(d, i, n); 
    }); 

function luxBox(d, idx, n) { 

    var l = n.length, 
     j = idx, //selected image in group 
     jp = j > 0 ? j - 1 : l - 1, //preceding image in group 
     jn = j < l - 1 ? j + 1 : 0; //following image in group 

    var imgs = [ 
     d3.select(n[jp]), //0 
     d3.select(n[j]), //1 
     d3.select(n[jn]) //2 
    ]; 

    function update(data) { 

     var t = d3.transition().duration(400); 

     var lux = d3.select('#luxbox') 
      .attr("class", "show") 
      .select('#slider') 
      .selectAll('li') 
      .data(data, function(d) { return d; }); //join 

     lux //exit 
      .exit() 
      .attr("class", "exit") 
      .transition(t) 
      .style("opacity", function(d, i) { 
       console.log('exit: i=' + i); 
       return 0; 
      }) 
      .remove(); 

     lux //update 
      .attr("class", "update") 
      .transition(t) 
      .style("transform", function(d, i) { 
       console.log('update: i=' + i); 
       return "translateX(" + (i * 100 - 100) + "%)"; 
      }); 

     lux //enter 
      .enter() 
      .append('li') 
      .attr("class", "enter") 
      .style("opacity", 0) 
      .style("background-image", function(d) { return d.style('background-image'); }) 
      .style("transform", function(d, i) { 
       console.log('enter: i=' + i); 
       return "translateX(" + (i * 100 - 100) + "%)"; 
      }) 
      //append("h3") // caption 
      .transition(t) 
      .style("opacity", 1); 
    } 

    update(imgs); 

    d3.select(".next") 
     .on("mousedown touchstart", function() { 
      idx < l - 1 ? idx++ : idx = 0; //next index 
      console.log('index=' + idx); 
      jn = idx < l - 1 ? idx + 1 : 0; //new following image 
      imgs.push(d3.select(n[jn])); 
      imgs.shift(); 
      update(imgs); 
     }); 
    d3.select(".prev") 
     .on("mousedown touchstart", function() { 
      idx > 0 ? idx-- : idx = l - 1; //prev index 
      console.log('index=' + idx); 
      jp = idx > 0 ? idx - 1 : l - 1; //new preceding image 
      imgs.unshift(d3.select(n[jp])); 
      imgs.pop(); 
      update(imgs); 
     }); 
    d3.select(".close") 
     .on("mousedown touchstart", function() { 
      d3.select('#luxbox') 
       .attr("class", "hide"); 
      setTimeout(function() { 
       d3.selectAll('#slider li').remove(); 
       console.log('slides removed') 
      }, 400); 
     }); 
} 

Answer 1

進一步調查，並發現了一些great answers後，我用數據關鍵匹配圖像選擇指數有solved我的問題。

var imgs = [ 
    { 
     "url": d3.select(n[jp]).select("img").attr("src"), 
     "caption": d3.select(n[jp]).select("img").attr("alt"), 
     "key": jp 
    }, 
    { 
     "url": d3.select(n[j]).select("img").attr("src"), 
     "caption": d3.select(n[j]).select("img").attr("alt"), 
     "key": j 
    }, 
    { 
     "url": d3.select(n[jn]).select("img").attr("src"), 
     "caption": d3.select(n[jn]).select("img").attr("alt"), 
     "key": jn 
    } 
]; 

// ... 

.data(data, function(d) { return d.key; }); //join