如何使用d3.js在线图上的某个点处显示图标 [英] How do I display an icon at a point on a line chart using d3.js

问题描述

我使用d3 ...创建一个简单的折线图，而不是沿路径的标准点，我想显示一个真棒的图标，如'fa-arrow-up'。

I am creating a simple line chart using d3, ... but instead of the standard points along the path, I'd like to display a fon-awesome icon such as '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'));

无效，...任何想法？

To no avail, ... any ideas ?

推荐答案

FontAwesome和类似的库只是将它们的< i> 标签的CSS内容一个来自他们字体族的unicode字符。

Under the hood, FontAwesome and libraries like it are just setting the CSS content of their <i> tag to a unicode character from their font family.

如果您检查 :: before 之前的图标，您会看到如下所示的内容：

If you inspect an icon ::before you'll see something like this:

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

在SVG中，这将等于：

In SVG this would be equal to:

<text>&#xf083</text>

然后，将其转换为d3：

Translating this into d3 then becomes:

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

Here's a similar answer I gave about Highcharts.

查看d3.js示例此处。

这篇关于如何使用d3.js在线图上的某个点处显示图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！