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，因为它是百分比组合。不知道我做错了什么。

Answer 1

如果存储为变量，则更新最适合滑块，可以再次调用，并在slideend捕获事件，例如：

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

如何覆盖D3函数中的.value（）

1 个答案: