d3.js l'ajout de la légende multiligne série graphique

Comment ajouter une légende à la multiligne série graphique? J'ai essayé, mais n'obtiens pas de légende à afficher.

Le bloc ici:

http://bl.ocks.org/3884955

a un défaut lorsque les différentes séries convergent vers le même point, comme zéro. Toutes les étiquettes sont superposés les uns sur les autres. Au lieu d'aller pour ces étiquettes, une légende traditionnelle serait utile.

J'ai essayé d'ajouter cette

var legend = svg.append("g")
.attr("class", "legend")
.attr("height", 100)
.attr("width", 100)
.attr('transform', 'translate(-20,50)');    

legend.selectAll('rect')
  .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
  .append("rect")
  .attr("x", width)
  .attr("y", function(d, i){ return i *  20;})
  .attr("width", 10)
  .attr("height", 10)
  .style("fill", function(d) { 
    return color.domain(d3.keys(d[0]).filter(function(key) { return key !== "day"; }));
  });

legend.selectAll('text')
  .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
  .append("text")
  .attr("x", width)
  .attr("y", function(d, i){ return i *  20 + 9;})
  .text(function(d) {
  return d.name;
  });

à la fin du code, les noms de clé (d.nom) match comment mes données sont formatées, mais il ne s'affiche pas. À un moment donné, il a montré toutes les boîtes noires à droite du graphique, ce qui signifie donc que je suis de près, mais il me manque quelque chose d'important

toute réflexion apprécié

OriginalL'auteur CQM | 2013-02-08

  1. 13

    Ici est fixe & remaniée en version de votre code. 

        var legend = svg.selectAll('g')
        .data(cities)
        .enter()
      .append('g')
        .attr('class', 'legend');

    legend.append('rect')
        .attr('x', width - 20)
        .attr('y', function(d, i){ return i *  20;})
        .attr('width', 10)
        .attr('height', 10)
        .style('fill', function(d) { 
          return color(d.name);
        });

    legend.append('text')
        .attr('x', width - 8)
        .attr('y', function(d, i){ return (i *  20) + 9;})
        .text(function(d){ return d.name; });

    Vous devez utiliser enter(), mais enter() et exit() méthodes ne peut pas être utilisé avec datum(). Citant le d3 wiki

    de sélection.datum([valeur])

    Obtient ou définit la limite de données pour chaque élément sélectionné. Contrairement à la sélection.les données de la méthode, cette méthode ne permet pas de calculer une jointure (et donc de ne pas calculer entrée et de sortie des sélections).

    J'ai ajoutées dans un point et votre code a fonctionné pour moi. var légende = svg.selectAll('.g')

    OriginalL'auteur Cihan Keser

  2. 0

    Vous semblez être à côté de la .enter() après .datum() appel de fonction. 

    legend.selectAll('rect')

  .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })

  .enter() //<======

  .append("rect")

  .attr("x", width)

  .attr("y", function(d, i){ return i *  20;})

  .attr("width", 10)

  .attr("height", 10)

  .style("fill", function(d) { 

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

    Avant d'ajouter le "rect", vous devez utiliser l'entrée() voir le lien pour l'explication exacte Cliquez Ici

    hm, je trouve certaines divergences avec cette logique, dans l'exemple de graphique city variable dans certains lieux commencer avec .append("text") puis .datum(...) sans enter() après, mais seulement la modification de l'attribut. Aussi, quand j'ai fait ajouter enter() ma console dit objet n'a pas de enter() et a donné une erreur
    Je peux me tromper mais je pense que la confusion vient du fait (si je lis bien) .datum() ajoute/modifie la valeur d'un élément existant dans votre sélection. Dans votre code où vous l'état "de la légende.selectAll('rect')" il n'en existe pas, et de créer l'adhésion initiale, vous devrez utiliser ".de données(data).enter()" pour créer de nouveaux "rect" éléments.
    voici une bonne réponse à la question sur .les données et les .datum stackoverflow.com/questions/13181194/...

    OriginalL'auteur Alex_B