web-dev-qa-db-fra.com

Comment définir plusieurs attributs avec une seule fonction de valeur?

Étant donné une donnée contenant plusieurs éléments de données, tels qu'un objet ou un tableau, est-il possible de définir plusieurs attributs sur une sélection avec une seule fonction de valeur?

Par exemple. quelque chose comme:

var data = [{ 'x': 10, 'y': 20, 'r': 5 }];
d3.select('body').append('svg').selectAll('circle')
    .data(data)
    .enter().append('circle')
    .attr('cx cy r', function (d) {
        return [d.x, d.y, d.r];
    });

au lieu de:

var data = [{ 'x': 10, 'y': 20, 'r': 5 }];
d3.select('body').append('svg').selectAll('circle')
    .data(data)
    .enter().append('circle')
    .attr('cx', function (d) {
        return d.x;
    });
    .attr('cy', function (d) {
        return d.y;
    });
    .attr('r', function (d) {
        return d.r;
    });
javascriptd3.jsattributes
50
ericsoco

[~ # ~] mise à jour [~ # ~] (8 juillet 2016) Cette réponse s'applique à d3 v3.x - PAS v4.x. Pour cette dernière version, voir réponse de Tim Hayes , également sur cette page. Ou ... échangez simplement attr avec attrs dans ma réponse ci-dessous, et n'oubliez pas d'exiger/import/script-embed d3-selection-multi. Et ... ne manquez pas un peu l'utilisation de .each, Qui peut vous être utile.

Oui, c'est possible en passant un hachage (comme la méthode css() de jQuery):

d3.select('body').append('svg').selectAll('circle')
  .data(data)
.enter().append('circle')
  .attr({
    cx: function (d) { return d.x; },
    cy: function (d) { return d.y; },
    r:  function (d) { return d.r; }
  });

Cela fonctionne également pour style().

Si la function (d) {} récurrente commence à se sentir trop, c'est une autre approche:

d3.select('body').append('svg').selectAll('circle')
  .data(data)
  .enter().append('circle')
  .each(function (d) {
    d3.select(this).attr({
      cx: d.x,
      cy: d.y,
      r:  d.r
    });
  })

REMARQUE: cette fonctionnalité n'existe que dans d3.js v2.10.0 ou supérieur

66
meetamit

C'est un vieux post, mais je l'ai trouvé en cherchant sur Google pour une réponse. La réponse acceptée ne fonctionne plus dans D3 v4.0.

Pour aller de l'avant, vous pouvez faire de même en utilisant la méthode attrs(). Mais attrs() n'est pris en charge que si vous chargez le script optionnel d3-selection-multi .

Donc, en utilisant l'exemple ci-dessus, cela ressemblerait à ceci dans D3 v4.0:

// load d3-selection-multi as separate script
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>

d3.select('body').append('svg').selectAll('circle')
  .data(data)
  .enter().append('circle')
  .attrs({
    cx: function (d) { return d.x; },
    cy: function (d) { return d.y; },
    r:  function (d) { return d.r; }
  });
64
TimHayes