D3関数で.value（）をオーバーライドする方法

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

    ); 

私の質問は、いくつかのパラメータにヒットするかどうかを確認した後、.value（g_grade）をオーバーライドする方法です。 .on（）関数呼び出しの後に ".value（g_grade）"を追加しようとしましたが、ドメインエラーが発生しました。

基本的に私は4つのスライダーを持っていますが、その合計が100％を超えないようにしようとしています。私が間違っていることを確信していない。例えば、再び呼び出すことができます変数、およびslideendで撮影されたイベントとして保存されている場合

Answer 1

更新がスライダで最高の作品：

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) 

例：http://bl.ocks.org/tomshanley/e6adabb6403a17990e8f4e39f5bc79eb