d3.js 添加图例Legend（文字 + 颜色图标）

一.问题描述

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;
    });