title: Gradually increment the opacity
body: <p>I would like to increment gradually the opacity of my circle in D3.js. I have two problems, the first is even if I put a static opacity, my circles doesn't appears. The second is I don't know how to have a clean method to have a gradually apparition of my circles :</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt;
      text {
          font: 10px sans-serif;
      }
  &lt;/style&gt;
  &lt;body&gt;
  &lt;script src="https://d3js.org/d3.v3.min.js" charset="utf-8"&gt;&lt;/script&gt;
  &lt;script&gt;
  
      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 &lt;= 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");
  
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This is the Plunker : <a href="https://plnkr.co/edit/wrCk54GrDPpK8AkgWjCt?p=preview" rel="nofollow">https://plnkr.co/edit/wrCk54GrDPpK8AkgWjCt?p=preview</a>
  Thanks.</p>