d3 v4 scaleTime不接受日期對象也不是整數

Question

我在d3 v4中實現了一個step-after interpolation graph。 時間被保存爲格式爲「hh：mm：ss.ss」的字符串。我通過將時間字符串轉換爲秒來傳遞timeScale整數範圍。儘管如此，我收到了「錯誤：屬性d：預期號碼」，MNaN，NaNLNaN，NaNL ......「。

function render(data) { 
 
    const margin = {top: 20, right: 20, bottom: 30, left: 50}; 
 
    width -= margin.left + margin.right; 
 
    height -= margin.top + margin.bottom; 
 

 
    const bboList = data.bboList; 
 
    bboList.push(bboList[bboList.length - 1]); 
 

 
    const timeStrToDate = (timeStr) => { 
 
    var time = timeStr.split(':'); 
 
    let d = new Date(); 
 
    d.setHours (+time[0]); 
 
    d.setMinutes(time[1]); 
 
    d.setSeconds(time[2]); 
 
    return d; 
 
    } 
 

 
    bboList.forEach(function(bbo) { 
 
    bbo.time = timeStringToSeconds(bbo.timeStr); 
 
    bbo.ask = +bbo.ask; 
 
    bbo.bid = +bbo.bid; 
 
    }); 
 

 
    function timeStringToSeconds(timeString){ 
 
    const hms = timeString.split(':'); 
 
    return (+hms[0]) * 60 * 60 + (+hms[1]) * 60 + (+hms[2]); 
 
    } 
 

 
    const minTime = timeStringToSeconds(bboList[0].timeStr); 
 
    const maxTime = timeStringToSeconds(bboList[bboList.length - 1].timeStr); 
 

 

 
    let xScale = d3.scaleLinear() 
 
    .domain(d3.extent(data, function(bbo) { return bbo.time; })) 
 
    .range([minTime, maxTime]); 
 

 
    const yExtent = d3.extent(data, function(bbo) { return bbo.bid; }); 
 

 
    let yScale = d3.scaleLinear() 
 
    .domain(yExtent) 
 
    .range([height, 0]); 
 

 
    const xAxis = d3.axisBottom().scale(xScale); 
 

 
    const yAxis = d3.axisLeft().scale(yScale); 
 

 

 
    chart.append("g") 
 
    .attr("class", "x axis") 
 
    .attr("transform", "translate(0," + height + ")") 
 
    .call(xAxis); 
 

 
    chart.append("g") 
 
    .attr("class", "y axis") 
 
    .call(yAxis) 
 
    .append("text") 
 
    .attr("transform", "rotate(-90)") 
 
    .attr("y", 6) 
 
    .attr("dy", ".71em") 
 
    .style("text-anchor", "end") 
 
    .text("Price ($)"); 
 

 

 
    const line = d3.line() 
 
    .x(function(bbo) { 
 
     return xScale(bbo.time); 
 
    }) 
 
    .y(function(bbo) { 
 
     return yScale(bbo.bid); 
 
    }); 
 

 
    chart.append("path") 
 
    .attr("class", "line") 
 
    .attr("d", line(bboList)); 
 

 
}

當我跟隨通過與調試器的代碼似乎每走一步我回來編號或由數字組成一BBO對象。我相信問題出在我的xScale上，但我不確定我在找什麼。任何指導我應該如何去調試這個代碼，或找到一個好的資源爲d3 v4將不勝感激（.line的文檔不清楚給我）

謝謝。

Answer 1

該問題似乎與您撥打d3.extent的電話有關。

看來你想通過bboList他們，而不是data。 d3.extent需要一個數組作爲其第一個參數，而data似乎是一些描述的對象。

縮放功能xScale和yScale除了將輸入域中的值轉換爲輸出範圍中的值外，沒有其他任何作用。因此，調試代碼的一種方法是嘗試使用某些值調用這些縮放函數，然後使用例如console.log(xScale(12345));來查看它們的結果。我試着和他們一起玩，發現其中有NaN的值。