如何使用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></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 "";
})
.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屋!