d3.js selectAll().chaque sur svg chemin.. indéfinis?

Je suis de l'importation d'un svg (servi sous forme de contenu statique à partir du serveur) de cette manière,

d3.xml("http://localhost:3000/mysvg.svg", "image/svg+xml", function(xml) {
    var importedNode = document.importNode(xml.documentElement, true);
    var mySvg = d3.select("#somediv").node().appendChild(importedNode);

alors je suis en train de parcourir tous les chemins svg et faire quelque chose avec eux

    d3.selectAll("#somediv svg path").each(function(d, i) {
        console.log(this, d, i);
    });
}

ce que j'obtiens est à ce problème

  • i est de 1 à nombre de parcours, ce qui est correct.
  • d est undefined au lieu d'être le droit svg élément de chemin.
  • this est le svg élément du chemin, comme celui-ci

    <path id="m021" fill="#00AAFF" d="M225.438,312.609c-0.665-1.084-1.062-1.691-2.368-1.963c-0.582-0.121-1.686-0.271-2.265-0.069 c-0.507,0.174-0.637,0.649-1.431,0.368c-0.934-0.33-0.665-1.272-0.71-2.104c-0.597-0.021-1.18,0-1.733,0.262 ...etc" ></path>

Je m'attendais à d être la véritable svg chemin, pourquoi n'est-il pas?

EDIT:

Un peu d'un aperçu sur ce que je veux faire pourrait peut-être aider.

J'ai un svg avec un chemin d'accès pour chaque quartier de ma ville. Je veux faire de l'piecharts dans le centre de chaque chemin. Je n'ai pas les données, il sera utilisé pour la piecharts. Je veux faire une fonction mouseover sur le chemin, et ajouter un petit cercle rouge (que dans une prochaine étape va devenir le graphique), sur chaque chemin.

Quelle est la meilleure façon de le faire?

OriginalL'auteur nkint | 2013-03-07

  1. 6

    La simplification de votre demande initiale, supposons que vous souhaitez ajouter un cercle au centre de chaque district. Supposons que les districts sont relativement carrés. Notez que ce serait beaucoup plus simple si vous avez des données géographiques au lieu de chemins.

    var svg = d3.select("#somediv svg");
var districts = svg.selectAll("path");

var district_centers = districts[0].map(function(d, i) {
    var bbox = this.getBBox();
    return [bbox.left + bbox.width/2, bbox.top + bbox.height/2];
});

svg
  .selectAll("circle")
  .data(district_centers)
  .enter()
  .append("circle")
     .attr("class", "district_circle")
     .attr("cx", function(d){ return d[0]})
     .attr("cy", function(d){ return d[1]})
     .attr("r", 10)
     .attr("fill", "red");
    merci, très clair. j'ai modifié un peu la réponse!
    de réponses mis à jour
    ok, c'est clair! j'ai d'enquêter un peu sur des données géographiques!
    j'ai lu le manuel et votre code semble bon, mais quand j'écris console.log(district_centers[0]); - je obtenir un tableau de path#m110.[object SVGAnimatedString]
    désolé, doit avoir été each que vous aviez initialement.

    OriginalL'auteur methodofaction

  2. 3

    Selon la Doc API pour la sélection.chaque, d doit être la référence, vous n'aurez pas si vous n'avez pas appelé .data() pour lier les données aux noeuds. Tout ce que vous avez est de la pure SVG avec pas de données liée.

    Je remarque que vos chemins ne Id, donc si vous avez un ensemble de données correspondant à ceux de l'ID, vous pouvez probablement se lier à l'aide de la touches paramètre de la .les données de la fonction

    merci, très clair. j'ai modifié un peu la réponse!

    OriginalL'auteur explunit