web-dev-qa-db-fra.com

Comment changer la position de la légende dans un tableau NVD3?

Est-ce que quelqu'un sait-il comment repositionner la légende dans un graphique NVD3 par rapport au graphique lui-même?

Il est sur le dessus par défaut, et j'aimerais que cela soit sur le côté (meilleure utilisation de l'espace dans mon application)

Un exemple de ce que j'aimerais faire: enter image description here

chartsd3.jslegendnvd3.js
15
user2541050

Il y a Afaik no option pour le faire, mais vous pouvez sélectionner l'élément g contenant la légende manuellement et le déplacer, par exemple.

d3.select(".nv-legendWrap")
  .attr("transform", "translate(100,100)");
12
Lars Kotthoff

Afin de cette écriture (2 juil. 2015) NVD3 prend en charge la mise en place de la légende à droite du graphique à secteurs.

Lorsque vous initialisez le graphique, définissez legendPosition sur right.

Exemple:

nv.addGraph(function() {
    var chart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })          
      .legendPosition("right");


    svg.datum(piedata).call(chart);

  return chart;
});

Voir http://nvd3-community.github.io/nvd3/examples/documentation.html#piecechart

12
Michael

Vous pouvez modifier définitivement la position de la légende pour un modèle de graphique NVD3 en modifiant le fichier JS lui-même. Cela peut mieux fonctionner pour le graphique rafraîchissant que le positionnement dans votre initialisation. Recherchez le JS (comme Multibarcharchar.js ou Linechart.js) pour: g.select('.nv-legendWrap'). Un .attr sera défini juste après cela, remplacer cela avec:

.attr('transform', 'translate(10,270)')

Où 10 est la valeur X La légende est décalée et 270 est la valeur Y qu'il est décalée.

5
Brian Hogan

J'ai essayé de résoudre le même problème avec un Linechart. D'abord, je viens d'ajouter un

d3.select('.nv-legendWrap').attr('transform', 'translate(0, 475)')

Mais cela revient à la valeur par défaut lorsque vous redimensionnez le graphique. Donc, j'ai aussi copié la ligne et l'a ajouté à l'intérieur de la fonction WindowResize () qui a fonctionné. Mais ensuite, lorsque je clique sur la légende pour masquer/afficher des lignes, elle replace la position par défaut.

Je pense que la meilleure solution pourrait être de modifier le fichier JS.

Cela semble être quand il s'agit de cartographier, il n'y a pas de solution facile. La documentation NVD3.js manque très et limitée. Mais d3.js est énorme et aussi compliqué ... Vous ne pouvez pas avoir à la fois la facilité et la personnalisation, vous devez abandonner l'un ou l'autre.

Mise à jour : Si vous avez juste besoin de le déplacer un peu, vous pouvez simplement faire ce qui suit:

chart.legend.margin({top: 0, right: 0, left: 0, bottom: 20})
3
Evan Butler

Doc sur La légende est ici: http://nvd3-community.github.io/nvd3/examples/documentation.html#legend

par exemple:

chart.legend.rightAlign(false);
1
Androido

Vous pouvez ajuster chart.legend.margin. Il a top, right, left, bottom comme attributs.

1
user3898336