Расширение функциональности кода для анимации на d3.js

Question

Получил код от другого человека и никак не могу его адаптировать под себя. Изначально все было выполнено в виде таймера. Все лишнее удалил и оставил только плавное появление дуги. Но проблема в том, что все графики получаются одинаковые, а нужно, чтобы они принимали значения из массива data: каждая дуга со своим значением (по порядку). Как это сделать? Заранее извините, если забыть что-то указать.

var width = 400,
    height = 400;

var fields = [{
    value: 100,
    size: 100
}];

let data = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];

let lineThickness = 0.2,
    thickness = lineThickness,
    animTime = 800;

var arc = d3.arc()
    .innerRadius(width * .5 * (1 - thickness))
    .outerRadius(width * .5)
    .startAngle(0)
    .endAngle(function (d) {
        return ((d.value / d.size) * 2 * Math.PI);
    });

var svg = d3.selectAll(".roll").append("svg")
    .attr('viewBox', `0 0 ${width} ${height}`);

var field = svg.selectAll('.field')
    .data(fields)
    .enter()
    .append('g')
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    .attr('class', "field");

var back = field.append("path")
    .attr("class", "path path--background")
    .attr("d", arc);

var path = field.append("path")
    .attr("class", "path path--foreground");

let i = 0;
field.each(function (d) {
    d.previous = 0, d.value = data[i++];
});
path.transition()
    .duration(animTime)
    .attrTween("d", arcTween);

function arcTween(b) {
    var i = d3.interpolate({
        value: b.previous
    }, b);
    return function (t) {
        return arc(i(t))
    };
}

  .roll {
    width: 400px;
  }
  .path--background {
    fill: rgba(19, 19, 29, 0.46);
  }
  .path--foreground {
    fill: #F2263F;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<p class="roll"></p>
<p class="roll"></p>

БЛОГ НА HUSL

Расширение функциональности кода для анимации на d3.js

Ответы (0 шт):