在d3.js折线图中添加图例

Question

我正在使用https://bl.ocks.org/mbostock/3884955的代码绘制一个多系列折线图。

线条末端有标签，但如果线条彼此靠近则会有点乱。

是否可以使用d3将图例添加到折线图？我查看了API，但似乎找不到任何东西。

Answer 1

在默认D3中没有自动创建图例的功能。 D3是一个低级数据可视化库，在最终结果方面具有非常高的灵活性。但是，传说只是一些形状和文本，所以你肯定可以使用D3创建它。这是让你入门的东西。

var legend_keys = ["Austin", "New York", "San Francisco"]

var lineLegend = svg.selectAll(".lineLegend").data(legend_keys)
    .enter().append("g")
    .attr("class","lineLegend")
    .attr("transform", function (d,i) {
            return "translate(" + width + "," + (i*20)+")";
        });

lineLegend.append("text").text(function (d) {return d;})
    .attr("transform", "translate(15,9)"); //align texts with boxes

lineLegend.append("rect")
    .attr("fill", function (d, i) {return color_scale(d); })
    .attr("width", 10).attr("height", 10);