Question

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

我正在使用的代码改编自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

这不是一个很好的解决方案，但它应该让你知道如何做到这一点。

D3-多个径向进度图表

1 个答案: