D3 - Wie man eine <img> an eine <td> mit jeder Funktion anhängen

Question

Ich bin neu in d3, und ich versuche, ein Bild zu einer bestimmten Tabellenzelle mit d3 anhängen. Ich benutze eine jede Funktion, um meine Daten zu durchlaufen, wo jedes Datenelement mit einem TD verknüpft ist. Für das letzte Datenelement möchte ich ein Bild hinzufügen.

Durch die Suche habe ich etwas Code gefunden, der für das Hinzufügen eines p-Elements funktioniert, aber ich kann nicht scheinen, es für ein Bild anzupassen. Was ich wirklich nicht verstehe, ist, warum ich die Hintergrundfarbe der Zelle in einer Zeile ändern kann, aber ich kann kein Bildelement an das nächste anhängen. Was mache ich falsch?

var rows = tbody.selectAll("tr") 
    .data(tableData, function(d) { return d.ID; }); 

rows.enter() 
    .append("tr") 
    .selectAll("td") 
    .data(function(d) { return columns.map(function(column) { 
     return {column: column, value: d[column]}; 
    }); 
}) 
.enter() 
.append("td") 
.style("opacity", 0.0) 
.transition() 
.delay(1200) 
.duration(1000) 
.text(function(d) { return d.value; }) 
.each(function(d, i) { 
    if (i == 6) { 
     d3.select(this).style("background-color", "red"); // works 
     d3.select(this).selectAll("img") 
      .data(d.imgLink) 
      .enter() 
      .append("img") // doesn't append an <img> anywhere 
    } 
}); 

EDIT: Ich habe eine fiddle erstellt. Der Code in der Geige unterscheidet sich geringfügig von dem, was hier gepostet wird, aber im Prinzip ist es dasselbe. Ich möchte ein Bild in der letzten Spalte der Tabelle mit einer Funktion hinzufügen.

In der Geige bin ich auch nicht sicher, warum nur die erste Zelle in der letzten Spalte einen roten Hintergrund hat ... Wenn ich den gleichen Code lokal verwende, sind alle Zellen in den letzten Spalten rot.

Answer 1

Neben das Problem, dass altocumulusd.imgLink in Bezug darauf hingewiesen, in dem Rückruf undefiniert ist, fand ich auch, dass ich brauchte, um meine each() Funktion vor den transition() zu bewegen. Hier ist meine aktualisierte fiddle.