Question

我是d3的新手，我试图使用d3将图像附加到特定的表格单元格。我使用每个函数迭代我的数据，其中每个数据元素与td相关联。对于我想要添加图像的最后一个数据元素。

通过搜索，我发现了一些可用于添加p元素的代码，但我似乎无法将其用于图像。我真正不明白的是为什么我可以在一行中更改单元格的背景颜色，但是我无法在下一行中添加图像元素。我做错了什么？

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

编辑：我创建了fiddle。小提琴中的代码与此处发布的内容略有不同，但原则上相同。我想使用每个函数在表的最后一列附加一个图像。

在小提琴中，我也不确定为什么只有最后一列中的第一个单元格有红色背景...当我在本地使用相同的代码时，最后一列中的所有单元格都是红色。

Answer 1

除altocumulus指出回调中d.imgLink未定义的问题外，我还发现我需要在each()之前移动transition()函数。这是我更新的fiddle。

D3 - 如何使用每个函数附加<img/>

1 个答案: