如何使用 d3.js 在折线图上的某个点显示图标答案

【问题标题】：How do I display an icon at a point on a line chart using d3.js如何使用 d3.js 在折线图上的某个点显示图标
【发布时间】：2015-03-16 16:00:09
【问题描述】：

我正在使用 d3 创建一个简单的折线图，...但不是沿路径的标准点，我想显示一个很棒的图标，例如“fa-arrow-up”。

我已经尝试了以下..

var setDirectionalPrediction = function(points){
  points.each(function(){
    var point = $(this);
    point.append('<image>');
    var image = point.children()[0];
    $(image).addClass('fa fa-long-arrow-up');
  });

}

setDirectionalPrediction($('#rd-d3-graph path.nv-point'));

无济于事，......有什么想法吗？

【问题讨论】：

标签： javascript jquery d3.js

【解决方案1】：

在幕后，FontAwesome 和类似的库只是将其<i> 标记的 CSS 内容设置为来自其字体系列的 unicode 字符。

如果您检查图标 ::before，您会看到如下内容：

.fa-camera-retro:before {
  content: "\f083";
}

在 SVG 中，这将等于：

<text>&#xf083</text>

把它翻译成 d3 然后变成：

<style>
  .symbol {
    font-family: FontAwesome;
    font-size: 16px;
   }
</style>

<script>
  var t = svg.append("g")
    .selectAll(".symbol")
    .data(data)
    .enter()
    .append("text")
    .attr("class", "symbol")
    .html(function(d,i){
      return "&#xf083";
    })
    .attr("x", function(d, i) {
      return x(d.x);
    })
    .attr("y", function(d, i) {
      return y(d.y);
    });
</script>

这是我提供的关于 Highcharts 的 similar answer。

参见 d3.js 示例 here。

【讨论】：

【解决方案2】：

var image = ;//image link

在上方提供您图片的链接

point.append("image")
    .attr("xlink:href", image)
    .attr("x", -12)
    .attr("y", -12)
    .attr("width", 24)
    .attr("height", 24)
    ;

确保你给它属性：x/y，宽度/高度

【讨论】：

所以希望这会奏效，......它没有。虽然标记看起来正确。
对不起队友 :( 为我工作，如果你有一个我们可以工作的 JSfiddle 可以尝试解决，但看起来像我上面的@Mark，已经解决了问题 :)) 玩得开心