Fonction clé D3

Que les lecteurs pourraient se réunir à partir de la suivante...je suis assez nouveau à la D3....J'expérimente en ce moment à l'aide de .enter() et .exit().remove(). J'essaie de comprendre ce que la touche de fonction...? Je visualise le DOM avec Chrome > Console et ne peut pas voir les différences évidentes entre .data(dataSet, keyFunction) et sans la touche de fonction .data(dataSet).

Quelqu'un peut s'il vous plaît suggérer des expériences pour essayer (console ou expressions) qui peut m'aider à comprendre exactement ce que la mystérieuse clé de fonction....

source d'informationauteur markthekoala | 2014-06-12

30

Je suis également nouveau sur d3 et a été aux prises avec la touche de fonction. Je n'ai pas trouvé de Tristan Reid réponse éclairante, car elle ne parle pas vraiment beaucoup sur la touche de fonction.

Nous allons travailler à travers un exemple, la première sans une touche de fonction, puis avec.

Voici notre première html avant l'application de javascript. Nous avons deux divs, et il n'y a pas de données attaché à quoi que ce soit.
```
<body>
    <div>** First div **</div>
    <div>** Second div **</div>
</body>
```
L'appel de données() sans fonction clé

Nous allons ajouter quelques lignes de javascript.
```
var arr1 = [35, 70, 24, 86, 59];
d3.select("body")
    .selectAll("div")
    .data(arr1)
    .enter()
    .append("div")
    .html(function(d) { return d });
```
Que fait notre html ressemble maintenant? Voici le code html ainsi que les valeurs de données associées (commentaires ajoutés).
```
<body>
    <div>** First div ** </div>   
    <div>** Second div ** </div>  
    <div>24</div>                 
    <div>86</div>                 
    <div>59</div>                 
</body>
```
La de données() appel correspondait à un tableau de divs avec un tableau de valeurs par l'utilisation d'une clé. Les touches par défaut utilisés pour les tableaux est l'index. Ce sont donc les clés qui ont été utilisés.
```
selected divs (by text)  key       data elements  key
-----------------------  ---       -------------  ---
** First div **          0         35             0
** Second div **         1         70             1
                                   24             2
                                   86             3
                                   59             4
```
Passant par les touches, deux éléments de données de correspondance dans les sélectionnés divs, ceux avec les touches 0 et 1. Celles qui correspondent à divs se limite aux données, mais rien ne se passe.

Tous les éléments de données sans une clé correspondante se passait à enter(). Dans ce cas, il n'y a pas de match pour les touches 2, 3, et 4. Donc, ces éléments de données sont passées, afin de enter()et une nouvelle div est ajouté pour chacun d'eux. La annexé divs sont également liés à leurs valeurs de données.

L'appel de données() avec une fonction clé

Modifions notre code javascript, en gardant ce que nous avons, mais l'ajout de quelques lignes. Nous allons effectuer le même sélectionne avec un appel de données (avec un tableau différent), mais cette fois à l'aide d'une touche de fonction. Avis le chevauchement partiel entre les arr1 et arr2.
```
var arr1 = [35, 70, 24, 86, 59];
d3.select("body")
    .selectAll("div")
    .data(arr1)                            //no key function
    .enter()
    .append("div")
    .html(function(d) { return d });

var arr2 = [35, 7, 24, 2];
d3.select("body")
    .selectAll("div")
    .data(arr2, function(d) { return d })  //key function used
    .enter()
    .append("div")
    .html(function(d) { return "new: " + d});
```
Le html résultant ressemble à ceci (avec commentaire):
```
<body>
    <div>** First div** </div>    
    <div>** Second div ** </div>  
    <div>24</div>                 
    <div>86</div>                 
    <div>59</div>                 
    <div>new: 7</div>             
    <div>new: 2</div>             
</body>
```
Le deuxième appel à de données() utilisé la valeur retournée par la fonction des touches. Pour les éléments sélectionnés, la fonction renvoie une valeur dérivée à partir des données qui ont déjà été lié par le premier appel à de données(). C'est, leur clé est basée sur leurs données lié.

Pour la deuxième de données() appel, les touches utilisées pour la correspondance ressembler à ceci.
```
selected divs (by text) key       data elements  key
----------------------- ---       -------------  ---
** First div **         35        35             35
** Second div **        70        7              7
24                      24        24             24
86                      86        2              2
59                      59
```
Les éléments de données sans touches correspondantes sont de 7 et 2. Ces éléments de données sont transmis à enter(). Nous obtenons donc deux nouveaux divs ajoutées au corps.

Bon, alors maintenant, nous allons regarder en arrière à l'original post. L'OP a dit qu'il n'y a pas de différence entre les de données() appel à une fonction et sans. C'est probablement parce-que Tristan Reid suggère -- la touche de fonction a été utilisé sur des éléments html qui n'avait pas de données liée. Quand il n'y a pas de données lié, il n'y aura pas de correspondance des touches, de sorte que tous les éléments de données seront passées au enter() fonction.

De travail par le biais de cet exemple a permis d'éclairer pour moi les relations entre les sélections, les clés et les données liées. J'espère que ce sera utile à quelqu'un d'autre.
2

Par la demande de mon héros, permettez-moi d'essayer de répondre à @markthekoala 'désir pour un console expérimentation qui démontre clairement l'effet de la spécification d'une fonction clé au sein de l' .data() opérateur.

http://bl.ocks.org/migurski/4601038

J'ai effectivement le même plus pointue exemple de l'excellent un je lien dans mes commentaires ci-dessus! REMARQUE: la longueur du titre du bloc a une bonne explication sur ce qui se passe sous le capot, donc de le lire attentivement.

Vous pouvez jouer avec le bloc de code dans ce VIOLON.

Honnêtement, je trouve qu'il est très difficile d'améliorer les explications de ces deux exemples, et en particulier sur l'expérimentation, afin habilement réalisée sur le second.

Vous devez vous connecter pour publier un commentaire.

L'appel de données() sans fonction clé

L'appel de données() avec une fonction clé