Question

我创建了一个表，我想在标题中添加一个图像。我正在使用一个名为D3.js的库来创建表。代码如下：

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

此代码来自我的相关D3帖子：

D3 Method of Appending Images to a Table Header

代码主要用于上下文，我对本机HTML如何处理此方法感兴趣。因为这将影响我将如何使用其他库。

问题是：我可以将图像作为新标题行附加到表格中，但我似乎无法将图像附加到现有标题行。

换句话说，在我创建带有文本标题的标题后，我想在文本标题旁边添加图像（每列不同的图像）。

根据我迄今为止的经验并根据D3专家的建议，这个问题可能是特定于HTML的问题。

在原生HTML中，可以在创建后将图像附加到标题吗？本机HTML还能为此问题带来什么？

Answer 1

假设您有此表：

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

<table>
<tr>
   <th>Header 1</th>
   <th>header2</th>
   <th>header3</th>
</tr>
<tr>
   <td>foo</td>
   <td>bar</td>
   <td>baz</td>
</tr>

要将图片附加到现有表格的标题中，只需选择标题，然后在没有任何“输入”选择的情况下附加图片：

d3.selectAll('th')
    .data(columns)
    .append('img')
    .attr('src', function(d) {
        return d.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"}
];

d3.selectAll('th')
    .data(columns)
    .append('img')
    .attr('src', function(d) {
        return d.src;
    });

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

<script src="https://d3js.org/d3.v4.min.js"></script>
<table>
<tr>
   <th>Header 1</th>
   <th>header2</th>
   <th>header3</th>
</tr>
<tr>
   <td>foo</td>
   <td>bar</td>
   <td>baz</td>
</tr>

Answer 2

Html完全是静态的，所以一旦你创建了它，就不能再使用html来操纵它了。要动态操作html，我们使用JavaScript（这就是d3的神奇之处。）

所以我不完全确定你在问什么。

如果您想使用d3在标题中的图片前添加文字，则可以使用.text()

例如，

var columns = [
    {title: "Brrmm Brrmm", src:"http://iconbug.com/data/3a/256/77c71e95885bf94c06c7c68ccb63b131.png"}, 
    {title: "Race Me", src:"http://iconbug.com/data/3a/256/9f8cd17bf12b1667d6c4b31b889b3034.png"}, 
    {title: "Faster! Faster!", 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('span')
    .text(function(d) {
        return d.title;
    })
    .append('img')
    .attr('src', function(d) {
        return d.src;
    });

演示：http://codepen.io/anon/pen/QdzKKg

将图像附加到现有表头

2 个答案: