javascript - 始终在文本后面附加 svg 图标

Question

所以我使用 D3.js，我有一个雷达图，其中的数据由圆圈内的文本表示。

文本总是有不同的长度，我想在每个文本之后直接按以下顺序附加一个图标:图表、文本标签、垃圾桶。

我已经尝试计算呈现文本的属性内的长度，这会正确地给出每个标签的长度，但后来我没有设法附加图标:

.attr("lenght", function() {
          var datalong = this.getComputedTextLength();
       })

然后我也尝试单独附加图标，但我不知道如何获得长度:

axis.append("svg:image")
        .attr("xlink:href","http://svgur.com/i/121.svg")
        .attr("y",-7)
        .attr("opacity",1)
        .attr("transform", function(d, i,e) {
          var angleI = angleSlice * i * 180 / Math.PI - 90; 
          var distance = radius * options.trash.trashFactor; 
          var flip = angleI > 90 ? 180 : 0; 
          return "rotate(" + angleI + ") translate(" + distance + ")" + "rotate(" + flip + ")"
        });

然后我尝试在写入数据(文本)的方法中附加图标，但图标没有显示。我试图将它们分成几组并将它们并排放置，但也没有成功。

我有一个 JSFiddle，它有一些我能得到的最接近的选项。我希望能够理解我正在尝试做的事情，如果没有，请引用 fiddle ，在那里您可以轻松理解我正在努力实现的目标。

JSFiddle:https://jsfiddle.net/fsb47ndf/5/

非常感谢任何帮助!

Answer 1

这是另一个想法，使用 FontAwesome 字体和图标。这样您就可以避免附加 svg:image。

.html(function (d, i) {
    var angleI = angleSlice * i * 180 / Math.PI - 90;
    if (angleI > 90) {
        return ' ' + d;
    } else {
        return d + ' '
    }
});    

https://jsfiddle.net/fsb47ndf/25/

 是垃圾桶图标的 FA unicode ( http://fontawesome.io/icon/trash-o/ )。以与旋转文本相同的方式旋转图标。