Постепенно увеличивайте непрозрачность

Я хотел бы постепенно увеличивать непрозрачность круга в 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

Небольшая заметка о том, что было бы лучше использовать 'node.selectAll (...)' inside 'myFunction' в случае, если есть другие элементы' circle' и 'text' вне диаграммы (т. Е. Панель инструментов/подсказка). – JSBob

Хорошее предложение, я изменил его. – echonax

Постепенно увеличивайте непрозрачность

ответ

Смежные вопросы