javascript - 如何覆盖 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 个 slider ，我试图确保它们的总和不超过 100，因为它是百分比构成。不确定我做错了什么。

Answer 1

如果存储为变量，则更新在 slider 上效果最佳，可以再次调用该变量，并且在幻灯片结束时捕获事件，例如:

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