CODEWITHSUNDEEP
javascriptd3.jstransition
alexis
alexis

Reputation: 25

d3 js transition over the array of rectangles does not work

I am working on horizontal segment bar chart. I want to make it so that the bar chart will animate the colour transition between individual segments depending on the value that is generated randomly every few seconds.

At the beginning I set two variables midRange and highRange that split my segments into 3 groups - green, yellow and red. Then I create an 2 arrays. rectArrays holds my segments/rectangles. colorArray holds the colour for each rectangle.

In animate() function I am using these arrays for transition purposes. At the moment first 25 segments should be animated as green then few yellow and the remaining segments should be red. The transition between colours does not work when more than 25 segments should be turned on. They are all either yellow or red. It seems like the transition is remembering only the colour that is stored on the last index before exiting the for loop in my animate function. There are 3 cases so the animation can go from left to right and vice versa.

This picture shows the undesired effect.First half of the segments should be green and remein 5 yellow. But for some reason they are all yellow. Here is my fiddle code

Thank you for any suggestions

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);

Upvotes: 2

Views: 146

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

If you want that every styleTween gets a different i instance, you'll have to use let, not var.

Just change:

var temp = colorArray[i];

To:

let temp = colorArray[i];

Here is the updated fiddle: https://jsfiddle.net/x2mL97x7/

Upvotes: 1

Related Questions