javascript - 在 for 循环中创建时，只有最后一个径向进度条有效

Question

我正在尝试创建三个径向进度条，但只有最后一个有效。知道为什么前两个不起作用吗？

html

<div id="radialProgress1" 
     data-percentage="30" 
     data-track-width="5"
     data-track-colour="656975" 
     data-fill-colour="#5AAAFA"
     data-text-colour="#959595" 
     data-stroke-colour="#C7D2D2"
     data-stroke-spacing="4">
</div>
<div id="radialProgress2" 
     data-percentage="30" 
     data-track-width="5"
     data-track-colour="656975" 
     data-fill-colour="#5AAAFA"
     data-text-colour="#959595" 
     data-stroke-colour="#C7D2D2"
     data-stroke-spacing="4">
</div>
<div id="radialProgress3" 
     data-percentage="30" 
     data-track-width="5"
     data-track-colour="656975" 
     data-fill-colour="#5AAAFA"
     data-text-colour="#959595" 
     data-stroke-colour="#C7D2D2"
     data-stroke-spacing="4">
</div>     

javascript

var progressRadial = [document.getElementById('radialProgress1'), document.getElementById('radialProgress2'), document.getElementById('radialProgress3')];

for(i=0; i<progressRadial.length; i++) {    
  var wrapper = progressRadial[i];
  var start = 0;
  var end = parseFloat(wrapper.dataset.percentage);

  var colours = {
    fill: '#' + wrapper.dataset.fillColour,
    track: '#' + wrapper.dataset.trackColour,
    text: '#' + wrapper.dataset.textColour,
    stroke: '#' + wrapper.dataset.strokeColour,
  }

  var radius = 75;
  var border = wrapper.dataset.trackWidth;
  var strokeSpacing = wrapper.dataset.strokeSpacing;
  var endAngle = Math.PI * 2;
  var formatText = d3.format('.0%');
  var boxSize = radius * 2;
  var count = end;
  var radialprogress = start;
  var step = end < start ? -0.01 : 0.01;

  //Define the circle
  var circle = d3.svg.arc()
    .startAngle(0)
    .innerRadius(radius)
    .outerRadius(radius - border);

  //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').attr('class', 'radial-progress');
  track.append('path')
    .attr('class', 'radial-progress__background')
    .attr('fill', colours.track)
    .attr('stroke', colours.stroke)
    .attr('stroke-width', strokeSpacing + 'px')
    .attr('d', circle.endAngle(endAngle));

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

  //Add text value
  var numberText = track.append('text')
    .attr('class', 'radial-progress__text')
    .attr('fill', colours.text)
    .attr('text-anchor', 'middle')
    .attr('font-size', 40)
    .attr('dy', '.5rem');


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

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

Answer 1

在 for 循环中使用 var 不会为每次迭代创建新变量。在最新版本的 JavaScript (ES6+) 中，您可以使用 let 和 const 来提供这种 block 作用域，但 ES5 解决方案是用一个IIFE :

var progressRadial = [document.getElementById('radialProgress1'), document.getElementById('radialProgress2'), document.getElementById('radialProgress3')];

for (i = 0; i < progressRadial.length; i++) (function () {
  var wrapper = progressRadial[i];
  var start = 0;
  var end = parseFloat(wrapper.dataset.percentage);

  var colours = {
    fill: '#' + wrapper.dataset.fillColour,
    track: '#' + wrapper.dataset.trackColour,
    text: '#' + wrapper.dataset.textColour,
    stroke: '#' + wrapper.dataset.strokeColour,
  }

  var radius = 75;
  var border = wrapper.dataset.trackWidth;
  var strokeSpacing = wrapper.dataset.strokeSpacing;
  var endAngle = Math.PI * 2;
  var formatText = d3.format('.0%');
  var boxSize = radius * 2;
  var count = end;
  var radialprogress = start;
  var step = end < start ? -0.01 : 0.01;

  //Define the circle
  var circle = d3.svg.arc()
    .startAngle(0)
    .innerRadius(radius)
    .outerRadius(radius - border);

  //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').attr('class', 'radial-progress');
  track.append('path')
    .attr('class', 'radial-progress__background')
    .attr('fill', colours.track)
    .attr('stroke', colours.stroke)
    .attr('stroke-width', strokeSpacing + 'px')
    .attr('d', circle.endAngle(endAngle));

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

  //Add text value
  var numberText = track.append('text')
    .attr('class', 'radial-progress__text')
    .attr('fill', colours.text)
    .attr('text-anchor', 'middle')
    .attr('font-size', 40)
    .attr('dy', '.5rem');


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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="radialProgress1" data-percentage="30" data-track-width="5" data-track-colour="656975" data-fill-colour="#5AAAFA" data-text-colour="#959595" data-stroke-colour="#C7D2D2" data-stroke-spacing="4">
</div>
<div id="radialProgress2" data-percentage="30" data-track-width="5" data-track-colour="656975" data-fill-colour="#5AAAFA" data-text-colour="#959595" data-stroke-colour="#C7D2D2" data-stroke-spacing="4">
</div>
<div id="radialProgress3" data-percentage="30" data-track-width="5" data-track-colour="656975" data-fill-colour="#5AAAFA" data-text-colour="#959595" data-stroke-colour="#C7D2D2" data-stroke-spacing="4">
</div>