javascript - D3-多放射状进度图

Question

我是 D3 新手，正在尝试创建多个径向进度图表。我有一个正在工作，但不知道如何在 D3 中循环它以使第二个出现。

我使用的代码改编 self 发现的 JS Fiddle，它使用数据属性来填充图形。

文本显示为 <p>标签但使用 D3，但我无法让图表与之配合。我一直在解决实现此问题的不同方法，但找不到任何好的文档或 Stack Overflow 答案来帮助我做我需要的事情。

谢谢!

var wrapper = document.querySelectorAll('.progress')[0];
var start = 0;
var end = parseFloat(wrapper.dataset.percentage);

var colors = {
fill: '#2c3187',
track: '#cec6bc',
text: '#2c3187',
stroke: '#FFFFFF',
}

var endAngle = Math.PI * 2;
var formatText = d3.format('.0%');
var boxSize = 200;
var count = end;
var progress = start;
var step = end < start ? -0.01 : 0.01;

//Define the circle
var circle = d3.svg.arc()
.startAngle(0)
.innerRadius(100)
.outerRadius(60);

//setup SVG wrapper
var svg = d3.select(wrapper)
.append('svg')
.attr('width', boxSize)
.attr('height', boxSize);

// Add Group container
var g = svg.append('g')
.attr('transform', 'translate(' + boxSize / 2 + ',' + boxSize / 2 + ')');

//Setup track
var track = g.append('g');
track.append('path')
  .attr('fill', colors.track)
  .attr('stroke', colors.stroke)
  .attr('stroke-width', 7 + 'px')
  .attr('d', circle.endAngle(endAngle));

//Add colour fill
var value = track.append('path')
  .attr('class', 'radial-path')
  .attr('fill', colors.fill)
  .attr('stroke', colors.stroke)
  .attr('stroke-width', 7 + 'px');

//Add text value
  var numberText = track.append('text')
  .attr('class', 'radial-text')
  .attr('fill', colors.text)
  .attr('text-anchor', 'middle')
  .attr('dy', '.8rem');

//Action
function update(progress) {
  //update position of endAngle
  value.attr('d', circle.endAngle(endAngle * progress));
  //update text value
  numberText.text(formatText(progress));
}

(function iterate() {
  //call update to begin animation
  update(progress);
  if (count > 0) {
    //reduce count till it reaches 0
    count--;
    //increase progress
    progress += step;
    //Control the speed of the fill
    setTimeout(iterate, 10);
  }
    })();

<div class="progress" data-percentage="35"></div>
<p class="radial-text">Chart One</p>

<div class="progress" data-percentage="60"></div>
<p class="radial-text">Chart Two</p>
  
<script src="https://d3js.org/d3.v3.min.js"></script>

Answer 1

例如，您可以将 document.querySelectorAll('.progress')[0]; 部分替换为变量而不是静态整数

var nextChart = 0;
var wrapper = document.querySelectorAll('.progress')[nextChart];

然后让它在页面末尾递增，并将所有代码包装在一个函数中，然后再次执行它。

nextChart++

在这里发布了一个工作版本:Plunker

这不是一个很好的解决方案，但它应该让您了解如何完成它。