我正在使用 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'));
无济于事,...有什么想法吗?
在幕后,FontAwesome 和类似的库只是设置其 CSS 内容<i>
标记为字体系列中的 unicode 字符。
如果你检查一个图标::before
你会看到这样的东西:
.fa-camera-retro:before {
content: "\f083";
}
在 SVG 中,这等于:
<text></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 "";
})
.attr("x", function(d, i) {
return x(d.x);
})
.attr("y", function(d, i) {
return y(d.y);
});
</script>
这是一个类似的答案我介绍了 Highcharts。
请参阅 d3.js 示例here.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)