D3 Method Of Appending Images To A Table Header

In HTML, the way I typically add an image to a table header is as follows: The HTML way is ve

Solution 1:

Just append an img and use src as its attribute:

var columns = [
    {src:"http://iconbug.com/data/3a/256/77c71e95885bf94c06c7c68ccb63b131.png"}, 
    {src:"http://iconbug.com/data/3a/256/9f8cd17bf12b1667d6c4b31b889b3034.png"}, 
    {src:"http://iconbug.com/data/b4/256/4ece97792658df143eb693c23bb991f3.png"}
];

var table = d3.select("body").append('table');
var thead = table.append('thead');

thead.append('tr')
    .selectAll('th')
    .data(columns)
    .enter()
    .append('th')
    .append('img')
    .attr('src', function(d) {
        return d.src;
    });

table, th {
   border: 1px solid gray;
}

<scriptsrc="https://d3js.org/d3.v4.min.js"></script>