一.问题描述
d3虽然在绘图方面是个强大的工具,但是却没有提供绘制图例的工具,国内的d3使用群体目前还没有那么多,所以也缺乏相关的教程,我在看了一篇国外大神的帖子后,自己动手实践了一下,给大家分享一下经验。
二.具体实现
效果图:
这个图例的数据就是一个数组,所以动态静态都是可以的。
而且显示的位置四个边角都可以,另外字体和颜色框(线或者是面)都是自定义的,调一下参数就行。
此外,如果是画线的画,下文源码中的<rect>可以替换成<line>标签,这样还可以画出虚线。
具体参照:https://blog.csdn.net/weixin_40444691/article/details/109215956
源码:
//图例数组,格式可自定义
var data_legend = [
{
"name":"A",
"color":"#4a9b5b"
},
{
"name":"B",
"color":"#5caeb9"
},
{
"name":"C",
"color":"#df4b4b"
},
{
"name":"D",
"color":"#cb7e51"
},
{
"name":"E",
"color":"#1942f4"
}
];
//初始化图例,将data_legend与图例绑定
var legend = svg.selectAll(".legend")
.data(data_legend)
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(-30," + (i * 20 + 30) + ")"; }); //transform属性便是整个图例的坐标
//绘制文字后方的颜色框或线
legend.append("rect")
.attr("x", width - 25) //width是svg的宽度,x属性用来调整位置
// .attr("x", (width / 160) * 157)
//或者可以用width的分数来表示,更稳定一些,这是我试出来的,下面同
.attr("y", 8)
.attr("width", 40)
.attr("height", 3) //设低一些就是线,高一些就是面,很好理解
.style("fill", function(d){
return d.color
});
//绘制图例文字
legend.append("text")
.attr("x", width - 30)
// .attr("x", (width / 40) * 39)
.attr("y", 15)
.style("text-anchor", "end") //样式对齐
.text(function(d) {
return d.name;
});