逐渐增加不透明度

我想逐渐增加D3.js中我的圆圈的不透明度。我有两个问题，第一个是即使我把静态不透明，我的圈子不出现。第二个是，我不知道如何有一个干净的方法有我的圈子的逐渐幽灵：逐渐增加不透明度

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

这是Plunker：https://plnkr.co/edit/wrCk54GrDPpK8AkgWjCt?p=preview 感谢。

来源

2016-04-26 Anonyme

这里的结果： https://plnkr.co/edit/SAf0BaUpJJQw5Vwp3T5P?p=preview

我想，而不是知名度，你想不透明度为你的圈子和文字内容是这样的：

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

和你的setTimeout的回调应该是：

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

您可以更改上面的持续时间以获得较慢的效果。

来源

2016-04-26 12:47:33 echonax

有一点需要注意，如果在图表外有其他'circle'和'text'元素（即工具栏/工具提示），在'myFunction'内部使用'node.selectAll（...））。 – JSBob

好的建议，我改变了。 – echonax

逐渐增加不透明度

回答

相关问题