D3.js – Zoom sur bbox avec un menu déroulant

Sur une carte, j'aimerais zoomer sur la bbox de pays spécifiques avec un menu déroulant qui contient les noms ou ids de ces pays.

J'ai réussi à le faire en cliquant sur le pays grâce à cet exemple: https://bl.ocks.org/mbostock/4699541 . Mais maintenant, je voudrais faire cela en cliquant sur le pays mais quand je le sélectionne dans un menu déroulant.

J'ai trouvé quelques réponses ici: mettre le pays sur la liste déroulante en utilisant d3 via le fichier csv . Mais cela ne fonctionne pas dans mon cas (je pense que le problème concerne les "jsonOutside.features.forEach (partie de la fonction (d)").

J'ai essayé de le faire mais cela ne fonctionne pas:

d3.select("#zoom").on("change", function() { //trying to zoom on the bbox with the dropdown menu var selected = this.value; //but it doesn't work clicked(selected); });

J'ai placé une console.log dans ce code qui me renvoie la bonne valeur (l'id du pays). J'ai également fait cela dans la fonction "cliqué" et il me renvoie un objet. Je pense donc que le problème est que mon menu déroulant ne contient que les noms de pays, et non leurs objets utilisés par la fonction cliquée.

Voici le reste de mon code:

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://d3js.org/topojson.v1.min.js"></script> <script src="http://d3js.org/queue.v1.min.js"></script> <style type="text/css"> #form { width: 20%; padding-top: 200px; margin-left: 2%; } #svg { display: block; margin-left: 30%; margin-top: -300px; border: 1px; } #map { border: 2px; } </style> </head> <body> </div> <form id="form"> <fieldset> <legend>Zoom on</legend> <div> <select id="zoom"> <option value="01">01</option> //options containing the countries id <option value="02">02</option> <option value="03">03</option> </select> </div> </fieldset> </form> <div id="map"></div> </div> </body> </html> <script type="text/javascript"> var width = 600, height = 550, centered; var path = d3.geo.path(); var projection = d3.geo.conicConformal() //focus on the topojson .center([2.454071, 47.279229]) .scale(3000) .translate([width / 2, height / 2]); path.projection(projection); var svg = d3.select('#map').append("svg") .attr("id", "svg") .attr("width", width) .attr("height", height); var departments = svg.append("g"); function clicked(d) { //zoom on bbox function var x, y, k; if (d && centered !== d) { var centroid = path.centroid(d); x = centroid[0]; y = centroid[1]; k = 4; centered = d; } else { x = width / 2; y = height / 2; k = 1; centered = null; } svg.selectAll("path") .classed("active", centered && function(d) { return d === centered; }); svg.transition() .duration(750) .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")") .style("stroke-width", 1.5 / k + "px"); } d3.json('https://gist.githubusercontent.com/PierreVivet/f46c2fe235ec7d7ab2db3dbaa163cc50/raw/f2f3fb092beb94f3a0582a9a82a040fa789028c1/departements.json', function(req, data) { data.objects.territoire.geometries.forEach(function (d) { d.properties = {}; d.properties.code = d.code; }); departments.selectAll("path") .data(topojson.feature(data, data.objects.territoire).features) .enter() .append("path") .attr("d", path) .attr('id', function(d) {return "d" + d.properties.code;}) .style("fill", "white") .style("stroke", "black") .style("stroke-width", ".5px") .on("click", clicked); //the function works fine by clicking on the country }); d3.select("#zoom").on("change", function() { //trying to zoom on the bbox with the dropdown menu var selected = this.value; //but it doesn't work clicked(selected); }); </script>

Avez-vous des idées sur la façon de faire cela?

Merci

J'ai trouvé la réponse à ma question.

J'étais proche, le seul problème était que j'ai créé manuellement le menu de sélection avec html. Le but est de créer et de le remplir directement avec d3, afin que nous puissions utiliser la fonction onclick avec le droit 'd'.

Le code utilisé est comme suit:

 var select = d3.select('#map') .append('select') select.selectAll("option") .data(topojson.feature(data, data.objects.territoire).features) .enter().append("option") .text(function(d) { return d.properties.code; }) .on("click", function(d) { clicked(d); });

Ce n'était pas très complexe, mais comme je suis toujours nouveau dans D3, je devais comprendre la syntaxe.

Merci pour les réponses de Lars Kotthoff trouvées ici: https://groups.google.com/forum/#!topic/d3-js/g6PLMZbRLvs