d3.js Carte (<svg>) ajuster automatiquement dans Conteneur Parent et Redimensionner avec Fenêtre

Mise à JOUR: j'ai posté et accepté un travail entièrement solution dans les réponses de la section. Le code de cette section est utilisée comme référence pour la comparaison aux NON-code de TRAVAIL, mais ne doit pas être utilisé comme solution.

Je suis en train de construire un tableau de bord et d3.js pour ajouter une carte du monde qui intrigue les tweets en temps réel basé sur la géo-localisation.

La monde.json fichier référencé dans d3.json() de la ligne est téléchargeable ICI (on appelle monde-pays.json).

La carte est sur la page comme un conteneur SVG et est rendu à l'aide de la d3.

Ci-dessous sont les segments de code.

<div id="mapContainer">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="500"></svg>
</div>

#mapContainer svg {
    display:block;
    margin:0 auto;
}
#mapContainer path {
  fill:#DDD;
  stroke:#FFF;
}

//generate US plot
function draw() {
    var map = d3.select("svg");
    var width = $("svg").parent().width();
    var height = $("svg").parent().height();

    var projection = d3.geo.equirectangular().scale(185).translate([width/2, height/2]);
    var path = d3.geo.path().projection(projection);
    d3.json('plugins/maps/world.json', function(collection) {
        map.selectAll('path').data(collection.features).enter()
            .append('path')
            .attr('d', path)
            .attr("width", width)
            .attr("height", height);
    });
}
draw();
latestLoop();

$(window).resize(function() {
    draw();
});

Mise à JOUR: j'ai mis à l'échelle de la carte pour une taille acceptable (pour mon particulier, la taille du navigateur), mais elle ne sera pas mise à l'échelle et au centre lorsque je change la taille de la fenêtre. SI, toutefois, je redimensionner la fenêtre, puis cliquer sur "actualiser", alors la carte sera centrée sur une fois que la page est rechargée. Cependant, puisque l'échelle est statique, il n'est pas ajustée correctement.

d3.js Carte (<svg>) ajuster automatiquement dans Conteneur Parent et Redimensionner avec Fenêtre

InformationsquelleAutor Jon | 2013-01-10

SOLUTION COMPLÈTE:

Voici la solution qui va redimensionner la carte APRÈS que l'utilisateur a publié le bord de la fenêtre, de la redimensionner, et le centrer dans le conteneur parent.

<div id="mapContainer"></div>

function draw(ht) {
    $("#mapContainer").html("<svg id='map' xmlns='http://www.w3.org/2000/svg' width='100%' height='" + ht + "'></svg>");
    map = d3.select("svg");
    var width = $("svg").parent().width();
    var height = ht;

    //I discovered that the unscaled equirectangular map is 640x360. Thus, we
    //should scale our map accordingly. Depending on the width ratio of the new
    //container, the scale will be this ratio * 100. You could also use the height 
    //instead. The aspect ratio of an equirectangular map is 2:1, so that's why
    //our height is half of our width.

    projection = d3.geo.equirectangular().scale((width/640)*100).translate([width/2, height/2]);
    var path = d3.geo.path().projection(projection);
    d3.json('plugins/maps/world.json', function(collection) {
        map.selectAll('path').data(collection.features).enter()
            .append('path')
            .attr('d', path)
            .attr("width", width)
            .attr("height", width/2);
    });
}
draw($("#mapContainer").width()/2);

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

$(window).bind('resizeEnd', function() {
    var height = $("#mapContainer").width()/2;
    $("#mapContainer svg").css("height", height);
    draw(height);
});

N'est-ce pas la réécriture de tout? Comment puis-je éviter cela?
Peut-être...cette solution a fonctionné pour moi, donc si c'est en fin de compte ce qu'il fait, puis haussement d'épaules. Je n'ai pas creuser dans la façon dont d3 est rendu les choses, donc si ma solution est en fait juste une réécriture, alors je suppose que c'est comment vous le faites.

InformationsquelleAutor Jon

8

La sélection de l'objet est un tableau multidimensionnel, bien que dans la plupart des cas, il n'aura sans doute qu'un objet en elle. Cet objet a un "clientWidth" champ vous indique quelle est la largeur de son parent.

De sorte que vous pouvez le faire:
```
var selection = d3.select("#chart"); 
width = selection[0][0].clientWidth;
```
- Puisque je n'ai pas regardé, je vais prendre votre parole. Un Violon peut aider pour le futur, les personnes si vous avez le temps, mais merci pour votre réponse!
- Avec d3v4, la deuxième ligne devrait être selection._groups[0][0].clientWidth
InformationsquelleAutor Spike Williams
5

Cela devrait fonctionner:
```
<svg 
    xmlns="http://www.w3.org/2000/svg"
    width="860"
    height="500"
    viewBox="0 0 860 500"
    preserveAspectRatio="xMinYMin meet">
```
- Donc, cela remplit le conteneur, mais la mise à l'échelle de la carte est waaay zoomée. Est-il possible que je peux l'obtenir à l'échelle en fonction de la taille du récipient? Je ne m'inquiète pas si je dois utiliser certains jQuery ou javascript, mais je ne sais pas quelles sont les valeurs que je dois changer.
- Vous souhaitez ajuster l' .scale() de la projection de côté à partir d'ajuster les paramètres de la viewbox. Si vous êtes intéressés à montrer plus ou moins de la carte d'une géospatiales point de vue en fonction de combien d'écran de l'immobilier que vous avez, alors vous n'allez pas vouloir s'appuyer sur la viewBox méthode, mais plutôt reprojeter ou tournez basée sur la modification de la largeur et de la hauteur du conteneur.
InformationsquelleAutor Elijah
2

Le meilleur choix est d'avoir une combinaison de l'utilisation du ratio d'aspect normal de la définition de la d3 du graphe de largeur et de hauteur. Cela m'a aidé dans beaucoup de mon graphique fonctionne.

Étape 1 : obtenir Dynamiquement la hauteur de la div pour laquelle le graphique doit être ajouté.

Étape 2 : Déclarer largeur comme ratio d'aspect à l'égard de l'dynamiquement pris de la hauteur.
```
var graph_div = document.getElementById(graph.divId);
graph.height = graph_div.clientHeight;
graph.width = (960/1200)*graph.height;
```
InformationsquelleAutor Raj sree

En d3 v4, nous pourrions le faire

const projection = d3.geo.equirectangular().fitSize([width, height], geojson);
const path = d3.geo.path().projection(projection);

fitSize est équivalent à

fitExtent([[0, 0], [width, height]], geojson)

remplissez pas à ajouter rembourrage

InformationsquelleAutor Bimal Grg

Vous devez vous connecter pour publier un commentaire.