L'ajout d'une légende du graphique en D3

J'ai du mal à l'ajout d'une légende du graphique pour mon d3js graphique. Voici mon approche actuelle:

var legend = svg.append("g")
  .attr("class", "legend")
  .attr("x", w - 65)
  .attr("y", 25)
  .attr("height", 100)
  .attr("width", 100);

legend.append("rect")
  .attr("x", w - 65)
  .attr("y", 25)
  .attr("width", 10)
  .attr("height", 10)
  .style("fill", function(d) { return color_hash[dataset.indexOf(d)][1] });

legend.append("text")
  .attr("x", w - 65)
  .attr("y", 25)
  .text(function(d) { return color_hash[dataset.indexOf(d)][0] + ": " + d; });

Alors j'essaie de style de la .legend classe:

.legend {
            padding: 5px;
            font: 10px sans-serif;
            background: yellow;
            box-shadow: 2px 2px 1px #888;
        }

Mais je ne vais pas avoir beaucoup de chance.

Est quiconque est familier avec l'ajout de légendes aux graphiques en mesure de fournir la meilleure façon de le faire? Je ne parviens pas à trouver de nombreuses ressources en ligne.

Voici mon graph:
http://jsbin.com/ewiwag/2/edit

InformationsquelleAutor darko | 2012-11-26