Есть некая окружность. Появление которой нужно анимировать. Что то по типу окружности которая начинается в одной точке и через некоторое время смыкается.
$(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>
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Виртуальный выделенный сервер (VDS) становится отличным выбором
Вопрос глуповат, но я постоянно забываю, как происходит наследование и выборка(извиняюсь за французский) дочерних элементов в классах?
Как сделать плавающий сайдбар как на сайте https://wwwcitilink
Тестирую на устройстве с ios 9 и при клике срабатывает стиль hoverКак сделать, чтобы стиль наведения не срабатывал на мобильных устройствах?