【JavaScript】D3.js ～ 凡例を表示する ～

Webグラフ / 地図作成ツール

凡例を表示するには...

[1] 独自でコーディングして、凡例を作成
[2] 「d3 SVG Legend」プラグインを使って、凡例を作成

[1] 独自でコーディングして、凡例を作成

サンプル

http://blogs.yahoo.co.jp/dk521123/35450750.html
のサンプルで凡例部分を抜き出した 
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="">https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js">
<script>
var dataset = [
  {graphId: "001", y1Val: 2, y2Val: 15, y3Val: 9, y4Val: 15},
  {graphId: "002", y1Val: 3, y2Val: 17, y3Val: 4, y4Val: 12},
  {graphId: "003", y1Val: 7, y2Val: 4, y3Val: 9, y4Val: 14},
];

var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b"]);

var svg = d3.select("body").append("svg");

color.domain(d3.keys(dataset[0]).filter(function(key) { return key !== "graphId"; }));

dataset.forEach(function(d) {
  var y0 = 0;
  d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
  d.total = d.ages[d.ages.length - 1].y1;
});

// 凡例の描画処理ここから

var legend = svg.selectAll(".legend")
    .data(color.domain().slice().reverse())
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

// 凡例の色を描画
legend.append("rect")
      .attr("x", 0)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

// 凡例の説明を描画
legend.append("text")
    .attr("x", 65)
    .attr("y", 9)
    .attr("dy", ".35em")
    .style("text-anchor", "end")
    .text(function(d) { return d; });

</script>

[2] 「d3 SVG Legend」プラグインを使って、凡例を作成

d3 SVG Legendプラグイン

 * 比較的に楽に凡例を表示できる

注意
 * サンプルをコピペしたけど動かないケースもある(ケアレスミスかもしれんが)

設定について

 * 2通りある
http://d3-legend.susielu.com/
まで行って、
[1] ファイルをダウンロードして、インポートする
or
[2] URLで直接指定してインポートする(サンプルはこっちを用いる)

サンプル

例1

<html>
<body>
<script src="">http://d3js.org/d3.v3.js">
<script src="">https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.3.0/d3-legend.js">
<script>
var svg = d3.select("body").append("svg");

svg.append("g")
  .attr("class", "legendLog")
  .attr("transform", "translate(20,20)");

// ここからが凡例処理

var log = d3.scale.log()
    .domain([ 1, 100, 1000000 ])
    .range(["rgb(46, 73, 123)", "rgb(71, 187, 94)"]);

// 1～1000000の凡例
var logLegend = d3.legend.color()
    .cells([1, 10, 100, 1000, 10000, 100000, 1000000])
    .scale(log);

svg.select(".legendLog")
  .call(logLegend);
</script>
</body>
</html>

例2

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="">http://d3js.org/d3.v3.js">
<script src="">https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.3.0/d3-legend.js">
<script>
var svg = d3.select("body").append("svg");

var ordinal = d3.scale.ordinal()
  .domain(["赤", "青", "黄", "緑", "黒"])
  .range([ "red", "blue", "yellow", "green", "black"]);

svg.append("g")
  .attr("class", "legendOrdinal")
  .attr("transform", "translate(20,20)");

var legendOrdinal = d3.legend.color()
  .shape("path", d3.svg.symbol().type("triangle-up").size(150)())
  .shapePadding(10)
  // 水平に表示(垂直表示なら'vertical')
  .orient('horizontal')
  .scale(ordinal);

svg.select(".legendOrdinal")
  .call(legendOrdinal);
</script>

参考文献

http://shimz.me/blog/d3-js/4411

関連記事

D3.js ～ 入門編 ～

http://blogs.yahoo.co.jp/dk521123/35423681.html