d3.js d3.从输入中获取值时，会产生意外的结果

Question

我有一个我想在用户输入上更新的D3.js线图。一条路径是"总价"，由固定价格 可变成本组成。我还显示了"固定价格"线(不是路径(。

我有一个滑块来更改固定成本的值，然后更新路径和线路。

该行以预期的方式采用新的输入的滑块值和更新。但是，这条路径开始被非常负y值绘制，因此在图表上没有显示。

我错过了这一点吗？

如果我用预期的是"固定量"的"固定量"更新的新值，但是一旦我将其替换为document.getElementById('reciend'(。值 - 值 - 它给了我负面的图。如果我使用滑块值，则在第一次绘制时也会发生同样的问题。

我之前已经在D3中成功更新了线路图，但这通常是在更改事件上加载新数据集。我以前从未遇到这个问题。我正在使用D3 V4。以下是滑块和更新功能的代码。谢谢

...javascript
var slider = d3.select("#chart").append("p").attr('id', 'slider')  
        .style('position', 'absolute')  
        .style('top', height + margin.top + 60 + 'px')  
        .style('left', margin.left + 'px')  
        .append("input")  
        .attr("type", "range")  
        .attr('id', 'fixed')  
        .attr("value", 408000)  
        .attr("min", 0)  
        .attr("max", 1000000)  
        .style("width", sliderWidth)  
        .on("input", updateFixed);  
// set starting parameters  
// var fixedCost = document.getElementById('fixed').value; // doesn't behave as expected when plotting path.  
var fixedCost = 408000;  
var valuelineTotCost = d3.line()  
    .x(function(d) { return x(d.subs); })  
    .y(function(d) { return y(d.variCost + fixedCost); });  

function updateFixed() {  
var thisValue = document.getElementById('fixed').value;  
d3.select('#sliderText')  
  .text("Fixed Costs: " + format(thisValue) );  // displays as expected
console.log(thisValue);  // returns as expected  
svg.select('#fixedCostLine')    
      .attr("x1", 0)  
      .attr("x2", width)  
      .attr("y1", y(thisValue))  
      .attr("y2", y(thisValue));  // this line updates as expected  
// var fixedCost = document.getElementById('fixed').value; // tried this instead of using thisValue but still not behaving as expected  
// var fixedCost = thisValue;  // also not behaving as expected
var fixedCost = 508000;  // behaves as expected
// adjust totCost path
var valuelineTotCost = d3.line()
    .x(function(d) { return x(d.subs); })
    .y(function(d) { return y(d.variCost + fixedCost); });
svg.select("#totalPath")
  .style("stroke", "purple")
  .attr("d", valuelineTotCost);
};
...

以下是由D3生成的原始路径坐标，然后使用滑块值调整(甚至是详细(时给出的负y图。最后，使用硬编码值进行更新，从408000的起点切换到508000 - 给出了第三组图。

Answer 1

路径发生器正在从输入中读取值。

thisValue = parseint(thisValue(;

解决了问题。