Javascript D3如何将图像放置在水平线文本旁边

我已经创建了这个D3图表，它显示了结果值。然而，我正在努力做的是在水平文本旁边放置一个图像。以JSFIDLE为例，假设“结果2”低于20%。“结果2”文本右侧将显示一张悲伤的脸。然后，如果该值高于20%。。。取而代之的是一张快乐的脸。有可能这样做吗

JSFiddle:

我在图表下方创建了两个不同的面，如下所示：

<img src="http://www.clipartkid.com/images/15/cartoons-cartoon-logos-cartoon-logo-design-gHlQ6b-clipart.jpg" alt="Smiley face" height="42" width="42">

<img src="http://www.clipartbest.com/cliparts/Rid/8EG/Rid8EGpi9.png" alt="Sad face" height="42" width="42">

您可以使用定义要附加到条形图旁边的图像：

svg.selectAll(".images")
    .data(data)
    .enter()
    .append("svg:image")
    .attr("x", function(d) {return x(d.value) + 4; } )
    .attr("y", function(d) { return y(d.sentiment) + 10; })
    .attr("width", 42)
    .attr("height", 42)
    .attr("xlink:href", function(d){
            return d.value < 20 ? 
            "http://www.clipartbest.com/cliparts/Rid/8EG/Rid8EGpi9.png" :
            "http://www.clipartkid.com/images/15/cartoons-cartoon-logos-cartoon-logo-design-gHlQ6b-clipart.jpg"
    });

svg.selectAll（“.images”）
.数据（数据）
.输入（）
.append（“svg:image”）
.attr（“x”，函数（d）{返回x（d.value）+4；}）
.attr（“y”，函数（d）{返回y（d.d）+10；}）
.attr（“宽度”，42）
.attr（“高度”，42）
.attr（“xlink:href”，函数（d）{
返回d.value<20？
"http://www.clipartbest.com/cliparts/Rid/8EG/Rid8EGpi9.png" :
"http://www.clipartkid.com/images/15/cartoons-cartoon-logos-cartoon-logo-design-gHlQ6b-clipart.jpg"
});

因此，如果

d.value

小于20（true），它将附加第一个链接，否则（false）将附加第二个链接

这是你最新的小提琴：

---

编辑要显示刻度旁边的图像，而不是条形图，请相应地更改

x

和

y

。这是小提琴：

你好，杰拉尔多，这很好，但我如何将它放在文本旁边？e、 g.在“结果1”和“结果2”文本的右侧，而不是图表中的“文本”是指“记号”。滴答声的右边没有空格！在勾号文本旁边？所以会出现“结果1图像勾选”这可能吗？