D3 json股票圖表不顯示

似乎無法正確從JSON中獲取數據。我的圖表甚至無法顯示。任何想法如何我可以解決這個問題？D3 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 - > $ 23.32

在tradeList的時間是在納秒如此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"}, 
    ...

來源

2017-02-26 Edwards

說真的，如果你需要幫助，幫助我們來幫助你。閱讀[如何問]（http://stackoverflow.com/help/how-to-ask）並適當更新問題。 –

好吧對不起，這是我第一次使用它仍然使用它。我會做得更好 – Edwards

d3.json確實不是接受訪問器（或行）功能。它必須是剛：

d3.json（URL [回調]）

在您的代碼：URL和function(error, data)是行功能之間

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

一切。

解決方案：刪除它，並使用forEach要挾值，數字和日期：

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

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

    /... 
});

來源

2017-02-27 00:06:13

D3 json股票圖表不顯示

回答

相關問題