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