d3.js 反向过渡不起作用

Question

我正在研究水平线段条形图。我想让条形图根据每隔几秒随机生成的值对各个段之间的颜色过渡进行动画处理。

我还有一个文本框，此时显示“你好”，它与过渡同时移动。它只能在从左到右的一个方向上工作。 我无法在段之间进行颜色转换并将文本框从左向右翻译。从左到右我的意思是上次生成的数字大于当前生成的数字。条形图应该从右到左关闭段。但它是从左到右进行的，当涉及到反向翻译时，文本框的行为也很奇怪。

我也收到此错误：g 属性变换：预期的变换函数，“null”。在我的代码中，我想对我的 valueLabel 进行转换，我认为我使用的方式不正确。尽管有这个错误，代码还是会被执行。 我的小提琴代码是here

非常感谢您的建议

var configObject = {

    svgWidth : 1000,
    svgHeight : 1000,


    minValue : 1,
    maxValue : 100,

    midRange : 50,
    highRange : 75,

    numberOfSegments : 50
};
//define variables
var newValue;
var gaugeValue = configObject.minValue - 1;
var mySegmentMappingScale;
var rectArray=[];


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

//var myG=svg.append('g');
var valueLabel= svg.append("text")
    .attr('x',0)
    .attr('y', (configObject.svgHeight/13)+15)
    .text("hello");

var backgroundRect=svg.append("rect")
    .attr("fill", "black")
    .attr("x",0) 
    .attr("y", 0)
    .attr("width", (configObject.svgWidth/3))
    .attr("height",  configObject.svgHeight/13);

for(i = 0; i <= configObject.numberOfSegments; i++){
    var myRect=svg.append("rect")
        .attr("fill", "#2D2D2D")
        .attr("x",i * ((configObject.svgWidth/3)/configObject.numberOfSegments)) 
        .attr("y", 0)
        .attr("id","rect"+i)
        .attr("width", ((configObject.svgWidth/3)/configObject.numberOfSegments)-3)
        .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);

    }

//generate random number
function generate(){
    var randomNumber = Math.random() * (configObject.maxValue - configObject.minValue) + configObject.minValue;     
    newValue = Math.floor(randomNumber);
    setmySegmentMappingScale(); 
    animateSVG();
}     
function animateSVG(){

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

    if(previousSegment <= -1 && newSegment > -1){
        for(i = 0; i <= newSegment; i++){ 

            rectArray[i].transition()
                .ease("linear")
                .duration(50)
                .delay(function(d){return i * 90})
                .styleTween("fill", function() { return d3.interpolate( "#2D2D2D","red"); });

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


        }
    }
    else if(newSegment > previousSegment){

        for(i = previousSegment; i <= newSegment; i++){
            rectArray[i].transition()
                        .ease("linear")
                        .duration(50)
                        .delay(function(d){return i * 90})
                         .styleTween("fill", function() { return d3.interpolate( "#2D2D2D","red"); });
            //console.log(temp);
            valueLabel
            .transition()
            .ease("linear")
            .duration(50)
            .delay(function(d){return i * 90})
            .attr("transform","translate(" + (i * ((configObject.svgWidth/3)/configObject.numberOfSegments)+((configObject.svgWidth/3)/configObject.numberOfSegments)) + "," + 0 + ")")




        }
    }
    else if(newSegment < previousSegment){

        for(i = previousSegment; i > newSegment; i--){

            rectArray[i].transition()
                        .ease("linear")
                        .duration(50)
                        .delay(function(d){return i * 90})
                        .styleTween("fill", function() { return d3.interpolate( "red","#2D2D2D"); });


                        valueLabel
                        .transition()
                        .ease("linear")
                        .duration(50)
                        .delay(function(d){return i * 90})
                        .attr("transform","translate(" + (i * ((configObject.svgWidth/3)/configObject.numberOfSegments)-((configObject.svgWidth/3)/configObject.numberOfSegments)) + "," + 0 + ")")

        }
    }   
     gaugeValue = newValue;

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

Answer 1

问题只是delay。

newSegment > previousSegment 时，你可以这样设置延迟：

.delay(function(d){return i * 90})

这是有道理的，因为i 是一个递增变量。但是，当newSegment < previousSegment 不再适用相同的数学运算时：i 是一个递减变量，并且延迟必须随着i 减少 而增加，而不是相反。 p>

这是你需要的：

.delay(function(d){return Math.abs(i -previousSegment)*90})

这是你更新的小提琴：https://jsfiddle.net/b7usw2nr/