Question

我有一个D3.js折线图，我想根据用户输入进行更新。一种途径是“总价”，由固定价格+可变成本组成。我还会显示“固定价格”行（而不是路径）。

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

该行采用新输入的滑块值并按预期更新。但是，路径开始以非常负的y值绘制，因此不会显示在图表上。

我是否为此缺少逻辑？

如果我为“ fixedCost”硬编码一个新值，则路径会按预期更新，但是一旦我将其替换为document.getElementById（'fixed'）。value，它就会给我带来负面影响。如果使用滑块值，则在第一次绘制时会出现相同的问题。

之前，我已经成功地在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.line生成的原始路径坐标，其后是使用滑块值进行调整（甚至每分钟调整一次）时给出的负y图。最后，使用硬编码值进行更新，从起始点408000切换到508000-得到了第三组图。

Answer 1

路径生成器正在从输入中读取字符串形式的值。

thisValue = parseInt（thisValue）;

解决了问题。

从输入中获取值时，D3.js d3.line提供了意外的结果

1 个答案: