如何覆蓋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（）

回答

相關問題