Die Opazität schrittweise erhöhen

Ich möchte schrittweise die Deckkraft meines Kreises in D3.js erhöhen. Ich habe zwei Probleme, die erste ist, selbst wenn ich eine statische Deckkraft, meine Kreise erscheint nicht. Das zweite ist, ich weiß nicht, wie eine saubere Methode, um eine allmählich Erscheinung meiner Kreise haben:Die Opazität schrittweise erhöhen

<!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>

Dies ist Plunker: https://plnkr.co/edit/wrCk54GrDPpK8AkgWjCt?p=preview Danke.

Quelle

2016-04-26 Anonyme

Hier ist das Ergebnis: https://plnkr.co/edit/SAf0BaUpJJQw5Vwp3T5P?p=preview

Ich denke eher, als Sichtbarkeit Sie Opazität wollen für Ihren Kreis und Textelemente wie folgt aus:

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");

Und sollte Ihr SetTimeout Rückruf sein:

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

Sie können die Dauer für einen langsameren Effekt ändern.

Quelle

2016-04-26 12:47:33 echonax

Eine kleine Anmerkung, dass es besser wäre, 'node.selectAll (...)' in 'myFunction' zu verwenden, falls sich außerhalb des Diagramms andere' circle' und 'text' Elemente befinden (zB eine Werkzeugleiste/Tooltip)). – JSBob

Guter Vorschlag, ich habe es geändert. – echonax

Die Opazität schrittweise erhöhen

Antwort

Verwandte Themen