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

时间:2015-03-16 16:00:10

标签: javascript jquery d3.js

我正在使用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'));

无济于事,......有什么想法吗?

2 个答案:

答案 0 :(得分:3)

在幕后,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

enter image description here

答案 1 :(得分:0)

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,宽度/高度