d3.js обратный переход не работает

Question

Я работаю над горизонтальной диаграммой сегмента. Я хочу сделать так, чтобы гистограмма отображала переход цвета между отдельными сегментами в зависимости от значения, которое генерируется случайным образом каждые несколько секунд.

У меня также есть текстовое поле, которое в настоящий момент говорит «привет» и оно движется одновременно с переходом. Он работает только в одном направлении слева направо. Я не могу сделать переход цвета между сегментами и переводить текстовое поле слева направо. Слева направо я имею в виду, что число, сгенерированное в последний раз, больше, чем число, сгенерированное в настоящее время. Гистограмма должна отключать сегменты справа налево. Но он делает это слева направо, и текстовое поле действует странно, когда дело доходит до обратного перевода.

Я также получаю эту ошибку: g attribute transform: Ожидаемое преобразование, «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уменьшает, а не наоборот.

Это то, что вам нужно:

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

Вот ваша обновленная скрипка: https://jsfiddle.net/b7usw2nr/