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

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）”，但是这引发了域错误。如何覆盖D3函数中的.value（）

基本上我有4个滑块，我试图确保他们的总和不超过100，因为它是一个百分比组成。不知道我做错了什么。

来源

2017-07-31 a1letterword

如果存储为一个变量，它可以再次被调用，而该事件在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

来源

2017-07-31 22:56:29

嗯，我只是去尝试但它引发了一个错误，说d3（...）。值不是一个函数。我知道我所要做的就是访问.value元素并手动重新分配它，但是完全不知道如何去做。 – a1letterword

用示例更新了答案 –

现在可以正确处理文本更新。谢谢！你似乎比我更了解这一点，但是有没有办法让滑块不能移动？随着你在那里的文本和内部值将保持最大值，但滑块位置将继续移动。我尝试设置newPos和pos，但这并不奏效。 – a1letterword

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

回答

相关问题