Анимация окружности в 3djs

278
21 мая 2017, 23:13

Есть некая окружность. Появление которой нужно анимировать. Что то по типу окружности которая начинается в одной точке и через некоторое время смыкается.

$(document).ready(function() { 
      var height = 138, 
        width = 138, 
        margin = 14, 
        data = [{ 
            proposal: "proposal1", //невидимая область 
            rate: 45, 
 
          }, 
          { 
            proposal: "proposal2", //видимая область 
            rate: 135 
          } 
        ]; 
 
      // функция для получения цветов 
      var color = d3.scale.ordinal() 
        .range(["rgba(0, 0, 0, 0)", "#4fb5ad"]); 
 
      // задаем радиус 
      var radius = Math.min(width - 2 * margin, height - 2 * margin) / 2; //задаем радиус которой впишеться в область 
 
      // создаем элемент арки с радиусом 
      var arc = d3.svg.arc() 
        .outerRadius(radius) 
        .innerRadius(radius - 10) 
        .endAngle(1); 
 
 
      var pie = d3.layout.pie() 
        .sort(null) 
        .value(function(d) { 
          return d.rate; 
        }); 
      //создание тега svg 
      var svg = d3.select(".pie-graphic").append("svg") 
        .attr("class", "axis") 
        .attr("width", width) 
        .attr("height", height) 
        .append("g") 
        .attr("transform", 
          "translate(" + (width / 2) + "," + (height / 2) + ")"); 
 
 
      //Подложка серый круг 
      svg.append("circle") 
        .attr("cx", 0) 
        .attr("cy", 0) 
        .attr("fill", "#f2f3f5") 
        .attr("r", 0) 
        .transition() 
        .duration(760) 
        .attr("r", 69); 
 
      //Добавление всех частей диаграммы 
      var g = svg.selectAll(".arc") 
        .data(pie(data)) 
        .enter().append("g") 
        .attr("class", "arc"); 
 
 
      g.append("path") 
        .style("fill", function(d) { 
          return color(d.data.proposal); 
        }) 
        .attr("d", arc); 
 
      var circleAnin = g.selectAll('path'); 
 
      //Вот тут анимация почему то применяется сразу, а не через 760 мс 
      d3.transition().duration(760).tween("name", function(t) { 
        circleAnin.attr("d", arc.endAngle(0.1)) 
      }); 
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="pie-graphic"></div>

READ ALSO
css наследование или вроде того

css наследование или вроде того

Вопрос глуповат, но я постоянно забываю, как происходит наследование и выборка(извиняюсь за французский) дочерних элементов в классах?

278
Как реализовать плавающий сайдбар

Как реализовать плавающий сайдбар

Как сделать плавающий сайдбар как на сайте https://wwwcitilink

280
Как убрать hover на мобильных устройствах?

Как убрать hover на мобильных устройствах?

Тестирую на устройстве с ios 9 и при клике срабатывает стиль hoverКак сделать, чтобы стиль наведения не срабатывал на мобильных устройствах?

1958