javascript - 将跨度图标添加到 D3 条形图

Question

我正在制作一个相当基本的条形图，我试图在其中显示一个跨度图标，锚定在每个条形图的开头。显示哪个图标取决于栏的类别。例如，如果栏是蓝色的，我想要一个特定的图标，如果栏是红色的。

我附加并添加了显示在控制台中的跨度，但实际上并未出现在图表中的任何位置。

我将图标作为 span 存储在我的 css 中，每个版本对应插入的值名称。

我尝试了多种选择、排序等方式。但无法坚持下去。

var bars = svg.selectAll('.bar')
.data(data)
.enter().append('g')
.attr('class', 'bar');

bars.append('rect')

var icons = svg.selectAll('rect')
.data(data)
.enter().append("span")
.attr("class", function(d, i) {
    return "icon-" + d.value + "-right";
})
.attr('dx', -6)
.attr('dy', (bar_height / 2) +5)
.attr('text-anchor', 'start');

Answer 1

您应该使用 foreignObject 元素将 HTML 插入到 SVG 中。

像这样:

var icons = svg.selectAll('foreignObject').data(data);
icons.enter().append("foreignObject")
    .attr("class", function(d) { return "icon-" + d.value + "-right"; })
    .append("xhtml:body")
    .append("xhtml:span");

您还可以使用 text 元素将图标添加到 SVG:

var icons = svg.selectAll('text').data(data);
icons.enter().append("text")
    .html("&#xf00d") // utf-8 character for the icon