Javascript 将跨度图标添加到D3条形图

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

我已经附加并添加了显示在控制台中的跨度，但实际上没有显示在图表中的任何位置

在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');

---

您应该使用

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

---

谢谢但是我仍然有同样的问题，它出现在源代码中，但实际上没有绑定到页面？如果您使用

foreignObject

，并且它们出现在

标记的源代码中，那么请确保您将这些元素正确地放置在svg中。