d3 js在矩形陣列上的過渡不起作用

Question

我正在研究水平線段條形圖。我想這樣做是爲了使條形圖根據每隔幾秒隨機生成的值爲單個段之間的顏色過渡設置動畫效果。

在開始時，我設置了兩個變量midRange和highRange，將我的片段分成3組 - 綠色，黃色和紅色。然後我創建一個2數組。 rectArrays包含我的細分/矩形。 colorArray保存每個矩形的顏色。

在animate（）函數中，我將這些數組用於轉換目的。目前，最初的25段應該是綠色的，然後是黃色的，其餘的段應該是紅色的。超過25段應打開時，顏色之間的轉換不起作用。他們都是黃色或紅色。看起來轉換過程只記住了在我的animate函數中退出for循環之前存儲在最後一個索引中的顏色。有3種情況，所以動畫可以從左到右，反之亦然。

This圖片顯示不良效果。第一半的部分應該是綠色和remein 5黃色。但由於某種原因，它們都是黃色的。 這裏是我的小提琴如果你想每個styleTween得到一個不同的i實例code

謝謝你的任何建議

var configObject = { 

    svgWidth : 1000, 
    svgHeight : 500, 


    minValue : 1, 
    maxValue : 100, 

    midRange : 50, 
    highRange : 75, 

    numberOfSegments : 50 
}; 
//define variables 
var newValue; 
var gaugeValue = configObject.minValue - 1; 
var mySegmentMappingScale; 
var reverseScale; 
var rectArray=[]; 
var segmentIndex=configObject.maxValue/configObject.numberOfSegments; 
var dynamicArc=true; 
var staticArc="yellow"; 
var gradientArray=[]; 
var colorArray=[]; 
var rectWidth=(configObject.svgWidth/1.5)/configObject.numberOfSegments; 
var rectPadding=3; 


getColor(); 
setmySegmentMappingScale(); 
//define svg 
var svg = d3.select("body").append("svg") 
    .attr("width", configObject.svgWidth) 
    .attr("height", configObject.svgHeight) 
    .append("g") 
    .attr("transform", 'translate('+ 0 +',' + configObject.svgHeight/2 + ')'); 


var valueLabel= svg.append("text") 
    .attr('x',0) 
    .attr('y', (configObject.svgHeight/13)+15) 
    .attr('transform',"translate(" + 0 + "," + 0 + ")") 
    .text(configObject.minValue) 
    .attr('fill', "white"); 




    var HueGreenIndex=1; 
    var HueYellowIndex=1; 
    var HueRedIndex=1; 
    function addGradient(c){ 
     //debugger 
     if (c=="green"){ 
      var hslString =d3.hsl(HueGreenIndex + 160, .40, .29).toString(); 
       HueGreenIndex=HueGreenIndex+0.5; 
       return hslString; 
     } 
     else if(c=="yellow"){ 
      var hslString=d3.hsl(HueYellowIndex + 39, .67, .57).toString(); 
       HueYellowIndex=HueYellowIndex+0.5; 
       return hslString; 

     } 
     else if (c=="red"){ 
      var hslString=d3.hsl(1+HueRedIndex , 1, .58).toString(); 
       HueRedIndex=HueRedIndex+0.10; 
      return hslString; 

     } 
    } 

    function getColor(){ 
      if (dynamicArc){ 

       for(i = 0; i <= configObject.numberOfSegments; i++){ 
        if(i<=(configObject.numberOfSegments/100)*configObject.midRange){ 

         //gradientArray.push(addGradient("green")); 
         colorArray.push("green"); 
        } 
        else if(i > ((configObject.numberOfSegments/100)*configObject.midRange) && i<= ((configObject.numberOfSegments/100)*configObject.highRange)){ 
         //gradientArray.push(addGradient("yellow")); 
         colorArray.push("yellow"); 
        } 
        else if (i > ((configObject.numberOfSegments/100)*configObject.highRange)){ 
         //gradientArray.push(addGradient("red")); 
         colorArray.push("red"); 
        } 

       } 
      } 
      else{ 
       if (staticArc=="green"){ 
        //gradientArray.push(addGradient("green")); 
        colorArray.push("green") 
       } 
       else if(staticArc=="yellow"){ 
        //gradientArray.push(addGradient("yellow")); 
        colorArray.push("yellow") 
       } 
       else { 
        //gradientArray.push(addGradient("red")); 
        colorArray.push("red") 
       } 
      } 

    } 


    for(i = 0; i <= configObject.numberOfSegments; i++){ 
     var myRect=svg.append("rect") 
      .attr("fill", "#2D2D2D") 
      .attr("x",i * rectWidth) 
      .attr("y", 0) 
      .attr("id","rect"+i) 
      .attr("width", rectWidth-rectPadding) 
      .attr("height", configObject.svgHeight/13);  

      rectArray.push(myRect); 

     } 
//define scale 
    function setmySegmentMappingScale(){ 
      var domainArray = []; 
      var x=0; 
      for(i = configObject.minValue; i <= configObject.maxValue+1; i = i + (configObject.maxValue - configObject.minValue)/configObject.numberOfSegments){ 
       if(Math.floor(i) != domainArray[x-1]){ 
        var temp=Math.floor(i); 
        domainArray.push(Math.floor(i)); 
        x++; 
       } 
      } 

      var rangeArray = []; 
      for(i = 0; i <= configObject.numberOfSegments+1; i++){// <= 
       rangeArray.push(i); 
      } 
      mySegmentMappingScale = d3.scale.threshold().domain(domainArray).range(rangeArray); 
      reverseScale= d3.scale.threshold().domain(rangeArray).range(domainArray); 

     } 
    function widgetScale (x,y,r){ 
     return (x*r)/y; 
    } 
//generate random number 
    function generate(){ 
     var randomNumber = Math.random() * (configObject.maxValue - configObject.minValue) + configObject.minValue;  
     newValue = Math.floor(randomNumber); 
     animateSVG(); 
    } 



    function animateSVG(){ 

    var previousSegment = mySegmentMappingScale(gaugeValue) -1; 
    var newSegment = mySegmentMappingScale(newValue) -1; 


     if(previousSegment <= -1 && newSegment > -1){ 

      for(i = 0; i <= newSegment; i++){ 
      var temp=colorArray[i]; 

       rectArray[i].transition() 
        .ease("linear") 
        .duration(50) 
        .delay(function(d){return i * 90}) 
        .styleTween("fill", function() { return d3.interpolateRgb(getComputedStyle(this).getPropertyValue("fill"), temp);}); 

       valueLabel.transition() 
        .ease("linear") 
        .duration(50) 
        .delay(function(d){return i * 90}) 
        .text(i==newSegment ? newValue : i*segmentIndex); 

       valueLabel.transition() 
        .ease("linear") 
        .duration(50) 
        .delay(function(d){return i * 90}) 
        .attr("transform","translate(" + (i * (rectWidth)+(rectWidth)) + "," + 0 + ")") 

      } 
     } 
     else if(newSegment > previousSegment){ 

      for(i = previousSegment; i <= newSegment; i++){ 

      var temp=colorArray[i]; 
       rectArray[i].transition() 
        .ease("linear") 
        .duration(50) 
        .delay(function(d){return i * 90}) 
        .styleTween("fill", function() { return d3.interpolateRgb(getComputedStyle(this).getPropertyValue("fill"),temp);}); 

       valueLabel.transition() 
        .ease("linear") 
        .duration(50) 
        .delay(function(d){return i * 90}) 
        .text(i==newSegment ? newValue : i*segmentIndex); 

       valueLabel.transition() 
        .ease("linear") 
        .duration(50) 
        .delay(function(d){return i * 90}) 
        .attr("transform","translate(" + (i * (rectWidth)+(rectWidth)) + "," + 0 + ")") 

      } 
     } 
     else if(newSegment < previousSegment){ 


      for(i = previousSegment; i > newSegment; i--){ 
      var temp=colorArray[i]; 

       rectArray[i].transition() 
        .ease("linear") 
        .duration(50) 
        .delay(function(d){return Math.abs(i -previousSegment)*90}) 
        .styleTween("fill", function() { return d3.interpolateRgb(getComputedStyle(this).getPropertyValue("fill"),"#2D2D2D"); }); 

       valueLabel.transition() 
        .ease("linear") 
        .duration(50) 
        .delay(function(d){return Math.abs(i -previousSegment)*90}) 
        .text(i==newSegment+1 ? newValue : i*segmentIndex);   

       valueLabel.transition() 
        .ease("linear") 
        .duration(50) 
        .delay(function(d){return Math.abs(i -previousSegment)*90}) 
        .attr("transform","translate(" + (i * (rectWidth)-(rectWidth)) + "," + 0 + ")") 

      } 
     } 
    gaugeValue = newValue; 

    } 


setInterval(function() { 
    generate() 
}, 6000); 

Answer 1

，你將不得不使用let，不var。

只是改變：

var temp = colorArray[i]; 

要：

let temp = colorArray[i]; 

這裏是更新的小提琴：https://jsfiddle.net/x2mL97x7/