web-dev-qa-db-fra.com

D3.js: Obtenir un tableau des données attachées à une sélection?

Je voudrais obtenir un tableau de toutes les données attachées à une sélection dans D3.

Je travaille avec l'exemple du modèle Mise à jour générale et j'essaie ceci:

var text = svg.selectAll("text")
  .data(data, function(d) { return d; });

var textEnter = text.enter().append("text")
  .attr("class", "enter")
  .text(function(d) { return d; });

console.log('textEnter data', textEnter[0]);

var textEnterKeys = d3.map(textEnter[0], function(d) { 
  return d.__data__;
});

console.log('textEnterKeys', textEnterKeys);

Mais textEnterKeys a exactement le même aspect que textEnter. Comment puis-je obtenir un tableau des données attachées à chaque élément de la sélection?

javascriptd3.js
18
Richard

Vous pouvez simplement appeler .data() sans aucun argument sur une sélection pour obtenir les données liées. Voir la documentation :

Si values ​​n'est pas spécifié, cette méthode renvoie le tableau de données du premier groupe de la sélection. La longueur du tableau retourné correspondra à la longueur du premier groupe, et l'index de chaque donnée dans le tableau renvoyé correspondra à l'index correspondant dans la sélection. Si certains éléments de la sélection sont nuls ou s’ils n’ont pas de données associées, l’élément correspondant du tableau sera indéfini.

Cela ne fonctionne pas pour la sélection .enter() car il n'y a pas encore d'éléments auxquels les données peuvent être liées. Dans ce cas, la fonction .map peut être utilisée:

textEnter.map(function(d) { return d.__data__; });
34
Lars Kotthoff

Ou vous pouvez utiliser datum() pour obtenir les données si vous avez utilisé datum(someData) pour lier.

0
Felix

C'est une vieille question, mais je m'interrogeais aussi à ce sujet. L'état transmis via selection.data n'est pas perdu, mais il est dispersé dans la mise à jour et entre des groupes. Il peut être récupéré, avec tact, de manière raisonnablement fiable avec cette fonction ...

function getData2(/*this is update*/) {
    if (this.enter /*quick duck type test...*/) {
        var enter = this.enter(), retVal = []

        for (var i = 0; i < this.length; i++) {

            retVal.Push([])

            for (var j = 0; j < enter.length; j++) {
                retVal[i].Push(enter[i][j] || enter[i].update[j])
                retVal[i][j] = retVal[i][j] && retVal[i][j].__data__
                if (!retVal[i][j]) {
                    retVal[i].pop()
                } 
            }

        }
        return (this.length > 1 ? retVal : retVal[0])
    }
}

usage...

console.log(getData2.call(update))

OU...

d3.selection.prototype.data2 = getData2
// ...
console.log(update.data2())

où update est la collection de mises à jour renvoyée par selection.data (array)

0
Cool Blue