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
Vous devez vous connecter pour publier un commentaire.
Vous avez besoin pour lier les données aux nœuds (des rectangles et des éléments de texte) qui composent la légende.
Actuellement, vous obtenez un message d'erreur lorsque vous tentez de style rectangles:
La raison: il n'y a pas de données lié
Avis que D3 se concentre sur la transformation de données et fonctionne sur les sélections. Alors, tout d'abord sélectionner un ensemble de nœuds et ensuite lier les données
Une fois que vous entrez dans la sélection avec
enter
, vous pouvez ajouter des nœuds et appliquer les propriétés de façon dynamique. Notez que pour éviter de créer des rectangles sur le dessus des autres, lors de la définition de lay
bien passer lei
compteur et de le multiplier par un nombre entier.Voici le fixe exemple: http://jsbin.com/ubafur/3
svg
à ces sélecteurs:svg .legend { ... }
Ok, voici une façon de le faire: http://jsbin.com/isuris/1/edit
Désolé, j'avais à faire trop de changements pour être en mesure de l'expliquer. Voyez si vous pouvez le comprendre. Si vous avez des questions, posez les dans les commentaires et je vais modifier la réponse.
svg:rect
pour chaque entrée de légende, avec la taille souhaitée, arrière-plan et la bordure. Ou, vous pouvez faire de l'ensemble de légende avec HTML, qui l'OMI est l'option plus facile. Il peut être possible d'avoir le dit HTML imbriquée à l'intérieur de l'élément SVG (j'ai jamais essayé), mais vous pouvez tout aussi bien en faire un frère ou une sœur nœud, placée au-dessus du SVG.push()
) jsbin.com/isuris/437/edit