ソースをtsvからJSONに変更した後、D3.jsグラフを描画しない

Question

私はTSVファイルを使って描いたD3.js線グラフを持っています。今私はキーとしてタイムスタンプと値を持つJSONファイルを持っています。これは、TSVファイルとコードである：「日」と「クローズ」：キーを持っていた

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("%y-%m-%d"); 

     @* x-Axis goes from 0 to width*@ 
     var x = d3.scaleTime() 
       .rangeRound([0, width]); 

     @* y-Axis goes from 0 to height*@ 
     var y = d3.scaleLinear() 
       .rangeRound([height, 0]); 

     @* line generator, returns timestamp on x-axis and value on y-axis *@ 
     var line = d3.line() 
       .x(function(d) { return x(d.timestamp); }) 
       .y(function(d) { return y(d.value); }); 



     d3.json(" /all.json ", function(d) { 

      d.forEach(function(d){ 
       d.timestamp = d.timestamp; 
       d.value = d.value; 
       console.log(d.timestamp); 
       console.log(d.value); 
      }); 

      return d; 
     }, function(error, data) { 

      @* returns maximum and minimum of array d (data) *@ 
      x.domain(d3.extent(data, function(d) { return d.timestamp; })); 
      y.domain(d3.extent(data, function(d) { return d.value; })); 



      g.append("g") 
        .attr("transform", "translate(0," + height + ")") 
        .call(d3.axisBottom(x)) 
        .append("text") 
        .attr("fill", "#000") 
        .attr("transform", "rotate(0)") 
        .attr("x", 6) 
        .attr("dx", "1em") 
        .attr("text-anchor", "begin ") 
        .text("time") 
        .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") 
         @* https://github.com/d3/d3-selection/blob/master/README.md#selection_datum *@ 
        .data(data) 
        .attr("fill", "none") 
        .attr("stroke", "steelblue") 
        .attr("stroke-linejoin", "round") 
        .attr("stroke-linecap", "round") 
        .attr("stroke-width", 1.5) 
        .attr("d", line); 
     }); 

    } 

TSVファイル：

<script language="javascript" type="text/javascript"> 
    window.onload = function(){ 
     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.date); }) 
       .y(function(d) { return y(d.close); }); 
     d3.tsv(" /data.tsv ", function(d) { 
      d.date = parseTime(d.date); 
      d.close = +d.close; 
      return d; 
     }, function(error, data) { 
      x.domain(d3.extent(data, function(d) { return d.date; })); 
      y.domain(d3.extent(data, function(d) { return d.close; })); 
      g.append("g") 
        .attr("transform", "translate(0," + height + ")") 
        .call(d3.axisBottom(x)) 
        .append("text") 
        .attr("fill", "#000") 
        .attr("transform", "rotate(0)") 
        .attr("x", 6) 
        .attr("dx", "1em") 
        .attr("text-anchor", "begin ") 
        .text("time") 
        .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> 

これは、JSONファイルのコードです。 私のJSONオブジェクトには、「タイムスタンプ」、「値」、「有効」、「チャンネルID」のキーがあります。 例JSONファイルには、次のようになります。

Object { timestamp: "2017-10-15 19:45", ChannelID: 13, value: 65469, valid: false } 

doesn't D3はもうグラフを表示するのはなぜ？私は何を変える必要がありますか？

Answer 1

d3.tsvとは異なり、d3.jsonはではありません。は行変換機能を受け入れます。 "/all.json "とfunction(error, data)間のすべてが行の変換機能で、あなたのコードで

...

d3.json("/all.json ", function(d) { 
    d.forEach(function(d){ 
     d.timestamp = d.timestamp; 
     d.value = d.value; 
     console.log(d.timestamp); 
     console.log(d.value); 
    }); 
    return d; 
}, function(error, data) { 

...。

ソリューション：それは何もしていないことから、それをドロップし、その代わりに、...コールバックの内側に

d3.json("/all.json ", function(error, data) { 
    //this is "inside the callback" 
}); 

を行関数を移動したり。

はまた、あなたは（あなたがTSVのバージョンでやっている）あなたの日付を解析する必要があります。

d3.json("/all.json ", function(error, data) { 
    data.forEach(function(d){ 
     d.timestamp = parseTime(d.timestamp); 
    }); 
    //the rest of the code 
});