D3 json株価チャートが表示されない

Question

JSONからデータを正しく取得できないようです。私のグラフは表示することさえできません。どのように私はこれを修正することができますに関する任意のアイデア？

<svg width="960" height="500"></svg> 
    <script src="https://d3js.org/d3.v4.min.js"></script> 
    <script> 

    var svg = d3.select("svg"), 
     margin = {top: 20, right: 20, bottom: 30, left: 50}, 
     width = +svg.attr("width") - margin.left - margin.right, 
     height = +svg.attr("height") - margin.top - margin.bottom, 
     g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    var parseTime = d3.timeParse("%d-%b-%y"); 

    var x = d3.scaleTime() 
     .rangeRound([0, width]); 

    var y = d3.scaleLinear() 
     .rangeRound([height, 0]); 

    var line = d3.line() 
     .x(function(d) { return x(d.timeStr); }) 
     .y(function(d) { return y(d.bid); }); 

    d3.json("bboList.json", function(d) { 
     d.timeStr = parseTime(d.timeStr); 
     d.bid = +d.bid; 
     return d; 
    }, function(error, data) { 
     if (error) throw error; 

     x.domain(d3.extent(data, function(d) { return d.timeStr; })); 
     y.domain(d3.extent(data, function(d) { return d.bid; })); 

     g.append("g") 
      .attr("transform", "translate(0," + height + ")") 
      .call(d3.axisBottom(x)) 
     .select(".domain") 
      .remove(); 

     g.append("g") 
      .call(d3.axisLeft(y)) 
     .append("text") 
      .attr("fill", "#000") 
      .attr("transform", "rotate(-90)") 
      .attr("y", 6) 
      .attr("dy", "0.71em") 
      .attr("text-anchor", "end") 
      .text("Price ($)"); 

     g.append("path") 
      .datum(data) 
      .attr("fill", "none") 
      .attr("stroke", "steelblue") 
      .attr("stroke-linejoin", "round") 
      .attr("stroke-linecap", "round") 
      .attr("stroke-width", 1.5) 
      .attr("d", line); 
    }); 

    </script> 

注：

• 尋ねるとbboListの入札、およびtradeListの価格はペニーの何百ものであるので、233200 - > tradeListの時間がとてもナノ秒である$ 23.32

• 34574353918784 - > 09：36：14.353

  {"bboList":[{"ask":235400,"bid":231800,"timeStr":"09:30:00.000"}, 
      {"ask":235400,"bid":230900,"timeStr":"09:30:07.819"}, 
      {"ask":238300,"bid":230900,"timeStr":"09:30:07.819"}, 
      {"ask":238300,"bid":227500,"timeStr":"09:30:26.786"}, 
      ... 
  

Answer 1

d3.jsonはではありません。はアクセサ（または行）機能を受け入れます。それはちょうどである必要があります：

d3.json（URL [コールバック]）あなたのコードで

：

d3.json("bboList.json", function(d) { 
    d.timeStr = parseTime(d.timeStr); 
    d.bid = +d.bid; 
    return d; 
}, function(error, data) { 
    if (error) throw error; 
    //... 
}); 

URLとfunction(error, data)間のすべてが行関数です。

ソリューション：それを削除し、forEachを使用して数値や日付に値を強制：

d3.json("bboList.json", function(error, data) { 
    if (error) throw error; 

    data.forEach(d => { 
     d.timeStr = parseTime(d.timeStr); 
     d.bid = +d.bid; 
    }); 

    /... 
});