L'accès d3.js les attributs de l'élément à partir de la référence?

J'essaye d'accéder à la cx & cy attributs de certaines svg cercles qui j'ai déjà dessiné à l'écran à l'aide de d3.js s'.fonction data (), quelqu'un peut-il vous aider? Le code de la tentative d'accès il est ci-dessous.

d3.selectAll(".mynode").each( function(d, i){
  if(d.someId == targetId){
    console.log( d.attr("cx") );    //just trying to demo my point, doesn't work
  }
}

Je suis assez nouveau à d3.js & javascript, donc je ne sais pas si je suis pour aborder cet arrière vers l'avant, de toute façon, ou peut-être que j'ai peut-être raté une fonction intégrée de solution?

  • avez-vous essayé d.cx? Si vous avez appelé .les données sur le d3.selectAll(".mynode"), et l'argument de données contenait des objets avec un cx de champ, cela devrait fonctionner.
InformationsquelleAutor Mike Winter | 2012-07-04
  1. 66

    Votre code est d'essayer d'obtenir une svg d'attribut à partir d'un élément de données, quand ce que vous voulez vraiment est d'obtenir que l'attribut de l'élément du DOM de svg, comme dans:

    console.log(d3.selectAll(".mynode").attr("cx"));

    Cela ne fera que vous donner l'attribut de la première valeur non nulle de l'élément de votre choix; Vous pouvez également filtre votre choix pour obtenir l'élément DOM vous êtes à la recherche pour:

    console.log(d3.selectAll(".mynode").filter(_conditions_).attr("cx"));

    Ou, si vous souhaitez accéder aux attributs de l'ensemble des éléments sélectionnés, utilisez this dans votre chaque fonction:

    d3.selectAll(".mynode").each( function(d, i){
  if(d.someId == targetId){
    console.log( d3.select(this).attr("cx") );
  }
}
    • j'ai été en utilisant d3.select(this).attr("cx") avant, mais il était de retour null , j'ai réalisé que finalement, j'ai été demander la cx attribut d'un groupe svg élément (doh!) et j'ai eu à le modifier pour d3.select(this.firstChild).attr("cx") pour obtenir l'accès à mon entourage élément à l'intérieur de l'élément de groupe, je n'aime pas utiliser firstChild/lastChild, etc, mais il fonctionne pour l'instant. Aussi, je n'aurais pas pensé à la méthode de filtrage si vous n'aviez pas proposé, je ne suis toujours pas sûr de la façon d'aller sur la mise en œuvre de recherche spécifiques datum valeurs, mais je vous remercie!
    • Malade aussi ajouter qu'il peut retourner la valeur null si vous essayez d'accéder au début d'une chaîne de commandes et de la valeur n'a pas été encore fixé.
    InformationsquelleAutor Josh
  2. 12

    Il est encore plus simple: (fournir de l'indice i est donné)

    d3.selectAll("circle")[0][i].attributes.cx.value

    comme il peut être vu ici.

    InformationsquelleAutor VividD
  3. 10

    La méthode de filtrage à réponse est correcte. La deuxième approche dans la accepté de répondre (à l'aide .chacun) est incorrect, et contient la même erreur que l'interlocuteur a été prise: si .de données() n'est pas appelé (ce qui est le cas ici), alors le premier argument d passée à .chacun sera pas défini (et non pas l'actuel "nœud dom", comme tous les débutants, y compris moi-même, attendez); l'actuel nœud dom vous obtenez via d3.sélectionnez(ce), ce qui est correct dans l'instruction if à la fin - l'erreur est dans la si la condition de test. Version correcte de la façon suivante.

    d3.selectAll(".mynode").each(function(d,i){
    var elt = d3.select(this);
    if (elt.attr("id") == "yourTargetIdGoesHere"){
        console.log( elt.attr("cx") );
    }
});

    violon: violon (contenant du code pour les deux versions, c'est à dire de filtre et de chaque)

    Mise à JOUR: ma réponse est en supposant que vous n'utilisez pas .de données(), puisque vous n'avez pas donner le code pour que; plus tard, j'ai vu que vous avez écrit que vous aviez utilisé .de données()

    dans ce cas, en fonction de votre structure de données, le remplacement d.attr("cx") par la plaine d.cx pourrait fonctionner.

    InformationsquelleAutor mathheadinclouds