我正在使用https://bl.ocks.org/mbostock/3884955的代码绘制一个多系列折线图。
线条末端有标签,但如果线条彼此靠近则会有点乱。
是否可以使用d3将图例添加到折线图?我查看了API,但似乎找不到任何东西。
在默认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);