1

我创建了一个表格，我想在标题中添加一个图像。我正在使用一个名为 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 方法

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

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

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

只是从我目前的经验推测并听取 D3 专家的建议，这个问题可能是一个特定于 html 的问题。

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

4

2 回答 2

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>

于 2017-02-12T11:08:37.360 回答
1

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

于 2017-02-12T11:08:47.580 回答