javascript - D3 将图像附加到表头的方法

Question

在 HTML 中，我通常将图像添加到表头的方式如下:

<th><img src= image.png alt="" height=20 width=20></img></th>

HTML 方式非常直接和直观。然而，我后来改用D3来创建表，我的头代码是:

var columns = ['Column X', 'Column Y', 'Column Z']

var table = d3.select('#table_container').append('table'),
    thead = table.append('thead')
    tbody = table.append('tbody');

thead.append('tr')
    .selectAll('th')
    .data(columns)
    .enter()
    .append('th')
        .text(function(column) { return column; });

我的问题是:如何使用 d3 将图像附加到表标题？我打算为每个标题使用不同的图像。

感谢您的阅读

Answer 1

只需附加一个 img 并使用 src 作为其属性:

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;
}

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