Javascript Girl
  1. Javascript Girl
  3. Comment définir plusieurs attributs avec une fonction de valeur?
Intereting Posts
Obtention de valeur de plusieurs champs de saisie avec la même classe et ajout d'un objet javascript IE10, 11 CDATA avec les traits d'union analysés erronés Configurer le nœud de sorte qu'il soit visible de l'extérieur? Avertissement de peluches: parseInt paramètre de radix manquant Pourquoi n'y a-t-il aucune méthode pour chaque objet dans ECMAScript 5? La valeur des données jQuery ne se met pas à jour Quel est le but de renvoyer une fonction à partir d'une fonction? Solution de contournement pour les îlots de données xml JavaScript: filtre () pour les objets Three.js Comment obtenir la position d'un maillage? Bind ready event sur javascript dom element creation Validation des noms de couleurs CSS Téléchargement de fichiers mp3 à l'aide de bloques html5 dans une extension chromée Soustraction de date javascript Comment implanter Steam Auth avec Firebase?

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

Compte tenu d'une donnée contenant plusieurs éléments de données, comme un objet ou un tableau, est-il possible de définir plusieurs attributs sur une sélection avec une fonction de valeur unique?

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 [dx, dy, dr]; });

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 dx; }); .attr('cy', function (d) { return dy; }); .attr('r', function (d) { return dr; });

    MISE À JOUR (8 juillet 2016) Cette réponse s'applique à d3 v3.x – NOT v4.x. Pour la dernière version, voir la réponse de Tim Hayes , également sur cette page. Ou … attrs simplement attr avec attrs dans ma réponse ci-dessous, et n'oubliez pas d'exiger / importer / script-embed d3-selection-multi . Et … ne manquez pas le bit de l'utilisation de .each , qui peut vous être utile.

    Ouais, c'est possible en passant par un hash (comme la méthode css() de jQuery): 

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

    Cela fonctionne aussi pour le style() .

    Si la function (d) {} récurrente function (d) {} commence à ressentir 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: dx, cy: dy, r: dr }); })

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

    Il s'agit d'une ancienne publication, mais je l'ai trouvé lors de la recherche de Googling. La réponse acceptée ne fonctionne plus dans D3 v4.0.

    Dans l'avant, vous pouvez faire la même chose 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, il 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 dx; }, cy: function (d) { return dy; }, r: function (d) { return dr; } });