Comment remplacer le .value() dans une fonction D3

Question

d3.select('#ggrade') 
    .call(
    d3.slider() 
     .value(g_grade) 
     .max(100) 
     .step(1) 
     .axis(true) 
     .on("slide", function(evt,value) { 
     d3.select('#nodes').text(value); 
     if (100 < value + f_grade+ d_grade + e_grade){ 
      value = 100-f_grade-d_grade-e_grade; 
      console.log(value) 
     } 
     else { g_grade = value;} 

     graphdata = [["D", "E", "F", "G"], [e_grade, d_grade, f_grade, g_grade]] 
     change(randomData()); 
     updateweight(); 
     } 
     ) 

    ); 

Ma question est de savoir comment remplacer la .value (g_grade) après avoir vérifié si elle touche quelques paramètres ou non. J'ai essayé d'ajouter ".value (g_grade)" après l'appel de la fonction .on(), mais cela a déclenché une erreur de domaine.

Fondamentalement, j'ai 4 curseurs, et j'essaie de faire en sorte que leur somme ne dépasse pas 100, car c'est une composition en pourcentage. Je ne sais pas ce que je fais mal.

Answer 1

La mise à jour fonctionne le mieux sur curseur si stocké comme une variable, qui peut être appelé à nouveau, et l'événement capturé à slideend, par exemple:

let d_grade = 25; 
let e_grade = 25; 
let f_grade = 25; 
let g_grade = 25; 

var gSlider = d3.slider() 
    .value(g_grade) 
    .max(100) 
    .step(1) 
    .axis(true) 
    .on("slideend", function(evt,value) { 
    let totalValue = value + f_grade+ d_grade + e_grade 

    if (totalValue > 100){ 

     g_grade = 100 - f_grade - d_grade - e_grade; 

    } else { 

     g_grade = value; 

    } 

     gSlider.value(g_grade) 
    }) 


d3.select('#ggrade') 
    .call(gSlider) 

Exemple: http://bl.ocks.org/tomshanley/e6adabb6403a17990e8f4e39f5bc79eb