Javascript Girl
  1. Javascript Girl
  3. D3.js change le comportement de zoom en zoom sémantique
Intereting Posts
DTM – st relation de fonction et de charge de charge de page Est-il possible dans les diagrammes élevés d'avoir 2 graphiques, partageant le même axe x, mais à côté de l'autre? Qu'est-ce qui ne va pas avec ce Javascript? chariot Comment déterminer le chemin vers les paquets obsolètes ou obsolètes (NPM)? Ion.RangeSlider 2.0.3 Pourquoi ma demande JSONP me donne-t-elle SyntaxError non détecté: jeton inattendu <(moins que)? Comment changer les iframes InternJS Comment puis-je utiliser cette table d'arbre D3 à l'échelle locale? La mise en œuvre de la position fixe dans javascript provoque une gigue dans Safari lors du défilement OO Javascript a-t-il un `to_bool` ou` __len__` équivalent? Comment manipuler différentes conventions de dénomination lors de la sérialisation d'objets C # sur JSON? (HTML) Télécharger un fichier PDF au lieu de les ouvrir dans le navigateur lorsque vous cliquez Vitesse de la page – tout problème avec l'utilisation d'un attribut de report? Comment étiez-vous une image ou un bouton brillant lorsque vous passez votre souris sur l'utilisation de javascript ou jquery? Pourquoi les fonctions javascript doivent-elles avoir le mot-clé "async"? Le mot-clé "attendez-vous" n'est-il pas suffisant?

D3.js change le comportement de zoom en zoom sémantique

Je fais des tests avec d3.js concernant le zoom. Pour le moment, j'ai réussi à mettre en place un zoom géométrique dans mon test, mais il présente un inconvénient: les éléments sous le g zoomé sont mis à l'échelle. Comme je l'ai compris, cela pourrait être résolu en utilisant un zoom sémantique .

Le problème est que j'ai besoin d'une scale dans mon test, car je le synchronise avec une value curseur jQuery.UI.

D'autre part, j'aimerais que les éléments de text soient redimensionnés pour maintenir leur taille après une opération de zoom.

J'ai ici un exemple de ma tentative actuelle.

J'ai du mal à modifier mon code en fonction de ce but. Quelqu'un peut-il partager des idées / des idées?

Pour votre solution, j'ai fusionné 2 exemples:

  • Zoom sémantique
  • Zoom programmatique

Extraits de code: 

 function zoom() { text.attr("transform", transform); var scale = zoombehavior.scale(); //to make the scale rounded to 2 decimal digits scale = Math.round(scale * 100) / 100; //setting the slider to the new value $("#slider").slider( "option", "value", scale ); //setting the slider text to the new value $("#scale").val(scale); } //note here we are not handling the scale as its Semantic Zoom function transform(d) { //translate string return "translate(" + x(d[0]) + "," + y(d[1]) + ")"; } function interpolateZoom(translate, scale) { zoombehavior .scale(scale)//we are setting this zoom only for detecting the scale for slider..we are not zoooming using scale. .translate(translate); zoom(); } var slider = $(function() { $("#slider").slider({ value: zoombehavior.scaleExtent()[0],//setting the value min: zoombehavior.scaleExtent()[0],//setting the min value max: zoombehavior.scaleExtent()[1],//settinng the ax value step: 0.01, slide: function(event, ui) { var newValue = ui.value; var center = [centerX, centerY], extent = zoombehavior.scaleExtent(), translate = zoombehavior.translate(), l = [], view = { x: translate[0], y: translate[1], k: zoombehavior.scale() }; //translate wrt the center translate0 = [(center[0] - view.x) / view.k, (center[1] - view.y) / view.k]; view.k = newValue;//the scale as per the slider //the translate after the scale(so we are multiplying the translate) l = [translate0[0] * view.k + view.x, translate0[1] * view.k + view.y]; view.x += center[0] - l[0]; view.y += center[1] - l[1]; interpolateZoom([view.x, view.y], view.k); } }); });

Je suis zoom avant 250 250, qui est le centre du cercle clip.

Code de travail ici (ont ajouté les commentaires nécessaires)

J'espère que cela t'aides!

Pour faire ce que vous voulez, vous devez d'abord refacher le code. Avec d3, il est recommandé d'utiliser les data() pour ajouter des éléments à une sélection, plutôt que d'utiliser pour les boucles.

Donc ça : 

 for(i=0; i<7; i++){ pointsGroup.append("text") .attr("x", function(){ var plusOrMinus = Math.random() < 0.5 ? -1 : 1; var randx = Math.random(); return Math.floor(plusOrMinus*randx*75)+centerx; }) .attr("y", function(){ var plusOrMinus = Math.random() < 0.5 ? -1 : 1; var randy = Math.random(); return Math.floor(plusOrMinus*randy*75)+centery; }) .html("star") .attr("class", "point material-icons") .on("click", function(){console.log("click!");}); }