如何覆盖 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，因为它是一个百分比组成。不知道我做错了什么。

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