Incrémenter graduellement l'opacité

Je voudrais incrémenter progressivement l'opacité de mon cercle dans D3.js. J'ai deux problèmes, le premier est que même si je mets une opacité statique, mes cercles n'apparaissent pas. Le deuxième est que je ne sais pas comment avoir une méthode propre pour une apparition peu à peu de mes cercles:Incrémenter graduellement l'opacité

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 
    text { 
     font: 10px sans-serif; 
    } 
</style> 
<body> 
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
<script> 

    var diameter = 960, 
      format = d3.format(",d"), 
      color = d3.scale.category20c(); 

    var bubble = d3.layout.pack() 
      .sort(null) 
      .size([diameter,diameter]) 
      .value(function(d) { console.log(d.size);return d.size; }) 
      .padding(1.5); 

    var svg = d3.select("body").append("svg") 
      .attr("width", diameter) 
      .attr("height", diameter) 
      .attr("class", "bubble"); 


    d3.json("./data.json", function(error, root) { 
     if (error) throw error; 

     var node = svg.selectAll(".node") 
       .data(bubble.nodes(classes(root)) 
       .filter(function(d) { return !d.children; })) 
       .enter().append("g") 
       .attr("class", "node") 
       .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

     node.append("title") 
       .text(function(d) { return d.className + ": " + format(d.value); }); 

     node.append("circle") 
       .attr("r", function(d) {return d.r; }) 
       .style("fill", function(d) { return color(d.size); }) 
       .style("visibility","hidden"); 

     node.append("text") 
       .attr("dy", ".3em") 
       .style("text-anchor", "middle") 
       .text(function(d) { return d.className.substring(0, d.r/3); }) 
       .style("visibility","hidden"); 

        setTimeout(myFunction, 3000); 
     function myFunction() { 
      for (var i = 0 ; i <= 1 ; i = i + 0.01){ 
      console.log(i); 
      node.append("circle").style("opacity",i); 
      } 
      //At this time, circles should be appears ! 
     } 
    }); 


    // Returns a flattened hierarchy containing all leaf nodes under the root. 
    function classes(root) { 
     var classes = []; 
     function recurse(name, node) { 
      if (node.children) node.children.forEach(function(child) { recurse(node.name, child); }); 
      else classes.push({packageName: name, className: node.name, value: node.size, size: node.size}); 
     } 
     recurse(null, root); 
     return {children: classes}; 
    } 
    d3.select(self.frameElement).style("height", diameter + "px"); 

</script> 
</body>

C'est le Plunker: https://plnkr.co/edit/wrCk54GrDPpK8AkgWjCt?p=preview Merci.

Source

2016-04-26 Anonyme

Voici le résultat: https://plnkr.co/edit/SAf0BaUpJJQw5Vwp3T5P?p=preview

Je pense plutôt que la visibilité que vous voulez opacité pour vos éléments de cercle et texte comme celui-ci:

node.append("circle") 
       .attr("r", function(d) {return d.r; }) 
       .style("fill", function(d) { return color(d.size); }) 
       .style("opacity","0"); 

     node.append("text") 
       .attr("dy", ".3em") 
       .style("text-anchor", "middle") 
       .text(function(d) { return d.className.substring(0, d.r/3); }) 
       .style("opacity","0");

Et votre rappel setTimeout devrait être:

function myFunction() { 
     node.selectAll("circle").transition().duration(1000).style("opacity","1"); 
     node.selectAll("text").transition().duration(1000).style("opacity","1"); 
    }

Vous pouvez modifier la durée ci-dessus pour un effet plus lent.

Source

2016-04-26 12:47:33 echonax

Une petite note qu'il vaudrait mieux utiliser 'node.selectAll (...)' dans 'myFunction' dans le cas où il y a d'autres éléments' circle' et 'text' en dehors du graphique (ie une barre d'outils/tooltip). – JSBob

Bonne suggestion, je l'ai changé. – echonax

Incrémenter graduellement l'opacité

Répondre

Questions connexes