d3 v4 scaleTimeはオブジェクトまたは整数を受け付けません

Question

d3 v4でステップ補間グラフを実装しています。 時刻は、 "hh：mm：ss.ss"の形式で保存されます。私は時間の文字列を秒に変換することにより、timeScaleに整数の範囲を渡しています。それにもかかわらず、私は "エラー：属性d：予想される番号"、MNaN、NaNLNaN、NaNL ... "を受け取っています。"私はすべてのステップで、私は数字または数字で作られたBBOオブジェクトのいずれかを返すことだと思わデバッガでコードを辿る

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)); 
 

 
}

。問題は私のxScaleにあると信じていますが、私が探しているものは正確ではありません。どのように私はこのコードをデバッグするか、またはd3 v4のための良いリソースを見つけるために行く必要がありますどのような指針（.lineのドキュメントは私には不明です）

ありがとうございます。

Answer 1

この問題は、d3.extentへのお電話にあるようです。

bboListにはdataではなく、渡したいと思われます。 d3.extentはその最初のパラメータの配列を取りますが、dataは何らかの説明の対象と思われます。

スケーリング関数xScaleとyScaleは、入力範囲の値を出力範囲の値に変換する以外に何も行いません。したがって、コードをデバッグする1つの方法は、いくつかの値を使ってこれらのスケーリング関数を呼び出して、例えばconsole.log(xScale(12345));などを使用してそれらのスケーリング関数を見ることです。私は彼らと一緒に遊んだことがあり、NaN値が出てきたことがわかりました。