Calculer SVG Chemin du Centre de gravité avec D3.js

Je suis en utilisant le format SVG situé à http://upload.wikimedia.org/wikipedia/commons/3/32/Blank_US_Map.svg dans un projet et interagir avec elle, avec d3.js. J'aimerais créer un cliquez pour effet de zoom comme http://bl.ocks.org/2206590, cependant que l'exemple s'appuie sur le chemin d'accès des données stockées dans un objet JSON pour calculer le centre de gravité. Est-il possible de charger les données de la trajectoire en d3 à partir d'un SVG pour obtenir le centre de gravité?

Mon (hackish) tentative à ce jour:

  function get_centroid(sel){
    var coords = d3.select(sel).attr('d');
    coords = coords.replace(/*[LC] */g,'],[').replace(/*M */g,'[[[').replace(/*z */g,']]]').replace(//g,'],[');
    return d3.geo.path().centroid({
      "type":"Feature",
      "geometry":{"type":"Polygon","coordinates":JSON.parse(coords)}
    });
  }

Cela semble fonctionner sur certains états, comme le Missouri, mais d'autres, comme Washington échouer parce que mon SVG données d'analyse est si rudimentaire. Ne d3 soutien à quelque chose comme ça en natif?

InformationsquelleAutor Zikes | 2012-08-21
  1. 55

    La D3 toutes les fonctions semblent partir du principe que vous débutez avec GeoJSON. Cependant, je ne pense pas que vous devez le centre de gravité de cette - ce que vous avez vraiment besoin est la boîte englobante, et c'est heureusement disponible directement à partir de l'SVG interface DOM:

    function getBoundingBoxCenter (selection) {
  //get the DOM element from a D3 selection
  //you could also use "this" inside .each()
  var element = selection.node();
  //use the native SVG interface to get the bounding box
  var bbox = element.getBBox();
  //return the center of the bounding box
  return [bbox.x + bbox.width/2, bbox.y + bbox.height/2];
}

    C'est en fait légèrement mieux que le vrai centre de gravité pour le but de zoom, car elle permet d'éviter une certaine projection problèmes que vous pourriez rencontrer.

    • +1 pour le détail de la solution et de mentionner le fait que vous n'avez pas besoin GeoJSON pour thisl
    • +1 Instructif et le bit supplémentaire au sujet de l'avantage de zoom à la boîte englobante ici a été très utile à la solution que je cherchais.
    • Que peut travailler pour des formes carrées comme U. S etats, cependant banane formes nécessitent une approche différente.
    • Mon point ici est que, pour le zoom-à-utilisation de la fonctionnalité des cas, vous n'avez pas besoin ou qui veulent le vrai centre de gravité. Ce code ne prétend pas à calculer le vrai centre de gravité, il traite de l'OP zoom en cas d'utilisation à la place.
    InformationsquelleAutor nrabinowitz
  2. 1

    Accepté la réponse a été très bien fonctionné pour moi jusqu'à ce que j'ai testé à Bord. Je ne peux pas commenter car je n'ai pas assez de karma, ou que ce soit, mais a l'aide de cette solution, et trouvé un problème avec Microsoft Edge, qui n'utilise pas x ou y, juste en haut/gauche/bas/droite, etc.

    Donc le code ci-dessus devrait être:

    function getBoundingBoxCenter (selection) {
  //get the DOM element from a D3 selection
  //you could also use "this" inside .each()
  var element = selection.node();
  //use the native SVG interface to get the bounding box
  var bbox = element.getBBox();
  //return the center of the bounding box
  return [bbox.left + bbox.width/2, bbox.top + bbox.height/2];
}
    InformationsquelleAutor Neil Ruud