Добавление и удаление изображения с d3js

Question

* проблема решена, пожалуйста, игнорируйте *

Я пытаюсь удалить и добавить изображения с D3.js, и я не могу понять, как добавить. Благодарен за идею, где я ошибаюсь. Here is the jsfiddle и код ниже:

HTML

<h3>Click on the images - they should be replaced by new ones</h1> 
<div id="image_gallery"> 
    <img class="image_gallery" src="http://imgs.xkcd.com/comics/weather.png" width="200" height="300"/> 
    <img class="image_gallery" src="http://imgs.xkcd.com/comics/rejection.png" width="200" height="300"/> 
</div> 

Javascript

var data = [ 
    ["http://imgs.xkcd.com/comics/protocol.png", "http://imgs.xkcd.com/comics/walmart.png"], 
    ["http://imgs.xkcd.com/comics/theft.png", "http://imgs.xkcd.com/comics/questions_for_god.png"] 
]; 
var image_gallery = d3.select("#image_gallery").on("mousedown", function() { transition();}); 
var index = 0; 
function transition() { 
    image_gallery.remove(); 
    for (var i = 0; i < data[index].length; i++) { 
     image_gallery.append("img").attr("class", "image_gallery").attr("src", data[index][i]) 
      .attr("width", 200).attr("height", 300); 
    } 
    index++; 
    d3.select("body").append("h3").text("but they aren't"); 
} 

Answer 1

OK понял. image_gallery.remove() должно быть image_gallery.selectAll("img").remove() ...