我创建了这个显示结果情绪值的D3图表.然而,我正在努力做的是在水平文本旁边放置一个图像.以JSFiddle为例,假设“结果2”低于20％. “结果2”文本的右侧会显示一个悲伤的面孔.然后,如果该值高于20％……将显示幸福的脸.是否有可能做到这一点？
JSFiddle：https://jsfiddle.net/sopjzwst/3/
我在图表下面创建了两个不同的面,如下所示：
logos-cartoon-logo-design-gHlQ6b-clipart.jpg" alt="Smiley face" height="42" width="42">
最佳答案
您可以使用ternary operator来定义要在条形旁边附加的图像：
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"
});
因此,如果d.value小于20(true),则它会附加第一个链接,否则(false)它会附加第二个链接.
这是你的更新小提琴：https://jsfiddle.net/c3k8c3a4/
编辑要显示刻度线旁边的图像而不是条形图,请相应地更改x和y.这是小提琴：https://jsfiddle.net/6uasj8hz/
