Javascript Girl
  1. Javascript Girl
  3. D3 animant un diagramme à bulles dans un rayon donné
Intereting Posts
Confusion de comportement de tableau Vérifiez l'égalité variable en fonction d'une liste de valeurs Regex.prototype.exec renvoie null lors de la deuxième itération de la recherche Utilisation de PUT / POST / DELETE avec JSONP et jQuery La directive angularJS templateUrl ne se met pas à jour Empêcher l'élément dupliqué dans jQueryUI sortable Recevoir des données de .js dans server.R brillant Animation KineticJS avec JQuery OnCollapse définit le parent comme nœud sélectionné, si l'enfant / petit-enfant est déjà sélectionné (bootstrap treeView) Comment modifier la valeur avec Ember.js Array forEach? Unique () pour les tableaux dans javascript JQuery cross domain POST shenanigans Node.js demande CERT_HAS_EXPIRED Node.js ne peut pas obtenir la sortie du processus généré Désactivation temporaire d'un bouton de soumission

D3 animant un diagramme à bulles dans un rayon donné

Entrez la description de l'image ici

// base de diagramme à bulle. Http://jsfiddle.net/NYEaX/1450/

J'essaie d'animer les bulles – en changeant leur échelle – et, si possible, je les fais disparaître. À un certain moment, j'ai besoin de les regrouper avec une sorte de gravité pour occuper plus d'une circonférence contenant. 

(function() { var diameter = 250; var svg = d3.select('#graph').append('svg') .attr('width', diameter) .attr('height', diameter); var bubble = d3.layout.pack() .size([diameter, diameter]) .value(function(d) { return d.size; }) .padding(3); var color = d3.scale.ordinal() .domain(["Lorem ipsum", "dolor sit", "amet", "consectetur", "adipisicing"]) .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]); function randomData() { var data1 = { "children": [ { name: "AA", className: "aa", size: 170 }, { name: "BB", className: "bb", size: 393 }, { name: "CC", className: "cc", size: 293 }, { name: "DD", className: "dd", size: 89 } ] }; var data2 = { "children": [ { name: "AA", className: "aa", size: 120 }, { name: "BB", className: "bb", size: 123 }, { name: "CC", className: "cc", size: 193 }, { name: "DD", className: "dd", size: 289 } ] }; var j = Math.floor((Math.random() * 2) + 1); console.log("j", j); if (j == 1) { return data1; } else { return data2; } } change(randomData()); d3.select(".randomize") .on("click", function() { change(randomData()); }); function change(data) { console.log("data", data); // generate data with calculated layout values var nodes = bubble.nodes(data) .filter(function(d) { return !d.children; }); // filter out the outer bubble var vis = svg.selectAll('circle') .data(nodes); vis.enter() .insert("circle") .attr('transform', function(d) { return 'translate(' + dx + ',' + dy + ')'; }) .attr('r', function(d) { return dr; }) .style("fill", function(d) { return color(d.name); }) .attr('class', function(d) { return d.className; }); vis .transition().duration(1000) vis.exit() .remove(); }; })();

Ces bulles animées feront partie de ce tableau général – j'ai besoin de soutien pour affiner les arcs animés et les bulles en conséquence. Donc, les arcs de diagramme à tarte doivent être en douceur – et les bulles doivent s'effacer dans / hors / croître dans le rayon / réduire le rayon

Entrez la description de l'image ici

Dernier violon. http://jsfiddle.net/NYEaX/1505/

( http://jsfiddle.net/NYEaX/1506/ ) – refactorisé 

  1. -- how to animate the arcs 2. -- how to animate the bubbles 3. -- adding back the randomise button to test with 2 dummy data sets.

Ce sont les vieilles animations de tarte et ont très bien fonctionné 

  /* ------- ANIMATE PIE SLICES -------*/ var slice = doughpie.select(".slices").selectAll("path.slice") .data(pie(data), key); slice.enter() .insert("path") .style("fill", function(d) { return color(d.data.label); }) .style("transform", function(d, i){ //return "translate(0, 0)"; }) .attr("class", "slice"); slice .transition().duration(1000) .attrTween("d", function(d) { this._current = this._current || d; var interpolate = d3.interpolate(this._current, d); this._current = interpolate(0); return function(t) { return arc(interpolate(t)); }; }) slice.exit() .remove(); /* ------- ANIMATE PIE SLICES -------*/

// ce sont les arcs de tarte actuels – mais lorsque j'essaie d'animer la tarte de la même manière, elle échoue. 

 var g = svg.selectAll(".arc") .data(pie(data)) .enter().append("g") .attr("class", "arc"); g.append("path") .attr("d", arc) .style("fill", function(d) { return color(d.data.label); }); arc .outerRadius(radius - 10) .innerRadius(0);

Essayez d'animer le graphique circulaire d'abord, puis révisez l'animation à bulle