javascript - D3 如何将图像放在水平线文本旁边

Question

我创建了这个显示结果情绪值的 D3 图表。然而，我正在努力做的是在水平文本旁边放置一个图像。以 JSFiddle 为例，假设“结果 2”低于 20%。 “结果 2”文本的右侧会显示一张悲伤的脸。然后，如果该值高于 20%... 则会显示一张笑脸。可以这样做吗？

JSFiddle: https://jsfiddle.net/sopjzwst/3/

我在图表下方创建了 2 个不同的面孔，如下所示:

<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">

Answer 1

您可以使用 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) 它会附加第二个链接。

这是您更新的 fiddle :https://jsfiddle.net/c3k8c3a4/

编辑 要在刻度旁边显示图像，而不是在条形图旁边显示图像，请更改x 和y 因此。这是 fiddle :https://jsfiddle.net/6uasj8hz/