Obtenir un élément de la sélection de d3js, par index

J'ai créé un ensemble de d3js des éléments basés sur un tableau de 3 éléments:

var data = [[0,0,2],[0,23,5],[2,12,5]];
circleSet = svg.selectAll()
             .data(data)
             .enter().append('circle');

edit:

Comment puis-je sélectionner le deuxième élément à l'index?

source d'informationauteur Rich

d3.js

La façon la plus naturelle à manipuler qu'un élément est à l'aide de la fonction de filtre:

var data = [[0,0,2],[0,23,5],[2,12,5]];
circleSet = svg.selectAll()
         .data(data)
         .enter()
         .append('circle')
         .filter(function (d, i) { return i === 1;})
         //put all your operations on the second element, e.g.
         .append('h1').text('foo');

Noter qu'en fonction de ce que vous faites avec les autres éléments, vous pouvez utiliser l'une des deux variantes de cette approche:

variante: utiliser le filtre dans la fonction transfert de données (pour réduire les données et les annexé éléments)
variante b): utiliser le filtre pour exclure, au lieu de les inclure dans le but de supprimer les autres éléments à la fin

Voir aussi Filtrer les données en d3 pour dessiner cercle ou carré

Une autre façon de le faire est d'utiliser la sélection.chaque méthode: https://github.com/mbostock/d3/wiki/Selections#wiki-each
En utilisant une instruction if avec l'index correspondant, vous pouvez créer un bloc pour un élément.
E. g.

var data = [[0,0,2],[0,23,5],[2,12,5]];
circleSet = svg.selectAll()
         .data(data)
         .enter()
         .append('circle')
         .each(function (d, i) {
            if (i === 1) {
              //put all your operations on the second element, e.g.
              d3.select(this).append('h1').text(i);    
            }
          });

Utiliser la fonction de préréglage i variable, qui renvoie l'index de l'objet array.

var data = [[0,0,2],[0,23,5],[2,12,5]];
circleSet = svg.selectAll()
     .data(data)
     .enter()
     .append('circle')
     .attr('fill',function(d,i){i === 1 ? return 'red' : return 'black' };

En savoir plus sur le tableau de la structure des références dans d3.js à ce tutoriel

Vous pouvez aussi encoder chaque élément que vous ajoutez en utilisant le comptage de la i index lors de l'affectation d'une classe.

var data = [[0,0,2],[0,23,5],[2,12,5]];
    circleSet = svg.selectAll()
         .data(data)
         .enter()
         .append('circle')
         .attr("class",function(d,i){ return "yourclass item" + i })

var theSecondElement = d3.select(".item1")

Dernier, vous pouvez utiliser le .chaque méthode et d'un conditionnel de cibler un élément spécifique

circleSet = svg.selectAll()
         .data(data)
         .enter()
         .append('circle')
         .each(function (d, i) {
            if (i === 1) {
              var that = this;
              (function textAdd() {
                 d3.select(that).append('h1').text(i); 
              )();   
            }
          });

3

En d3 v4, vous pouvez utiliser Sélection.les nœuds(). En supposant que i est le numéro d'index que vous souhaitez:
```
d3.select(someSelection.nodes()[i])
```
Il est d'un naturel one-liner, et c'est sans doute plus lisible: vous êtes de toute évidence juste en train de le noeud à l' i dans l'ordre, comme un D3 sélection.

Il semble que ce serait plus efficace que les solutions de rechange, qui impliquent une boucle dans l'ensemble de la sélection avec .each(). Donc, vous pourriez penser que c'est O(1)tandis que les autres options sont O(n).

Malheureusement, La Sélection.les nœuds() elle-même comprend une each boucle, donc c'est aussi O(n) (pas qu'il est probable qu'à la matière dans la vraie vie, sauf si vous appelez cela des milliers de fois sur des sélections avec des milliers de nœuds):
```
var nodes = new Array(this.size()), i = -1;
this.each(function() { nodes[++i] = this; });
return nodes;
```
Cependant, de cette façon, vous pouvez séparer le bouclage de l'obtenir, ce qui pourrait être utile si l'efficacité est une préoccupation majeure.

Par exemple, si vous souhaitez faire une boucle à travers each() dans la sélection de l'Un et de l'objet dans la même position à partir de la sélection de B, et que vous voulez éviter les boucles dans des boucles parce que ces sélections peuvent être énormes, et vous appelez cela de nombreuses fois, vous pourriez structure de ce genre, qui serait O(2n) au lieu de O(n^2):
```
var selectionBArray = selectionB.nodes()

selectionA.each(function(d, i) {
  var iFromSelectionA = this
  var iFromSelectionB = d3.select(selectionBNodes[i])
})
```
...ou si vous êtes à l'aide des touches flèche des fonctions afin de préserver this contexte:
```
var selectionBArray = selectionB.nodes()

selectionA.each((d, i, nodes) => {
  var iFromSelectionA = d3.select(nodes[i])
  var iFromSelectionB = d3.select(selectionBNodes[i])
})
```
Vous pourriez même (ab)utilisation Selection._groupsmais je ne recommanderais pas à l'aide d'une propriété privée comme ça car il va casser si un D3 mise à jour renommé le _groups propriété, comme cette mise à jour n'a.

Vous devez vous connecter pour publier un commentaire.