D3.js在將源文件從tsv更改爲JSON之後不繪製圖形

Question

我有使用TSV文件繪製的D3.js線條圖。現在我有一個帶有時間戳和值作爲鍵的JSON文件。這與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文件的代碼：

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文件拿鑰匙：「日期」和「關閉」。 我的JSON對象具有我需要的「timestamp」，「value」和我不需要的「valid」，「channelid」鍵，所以它幾乎是相同的。 一個例子JSON文件是這樣的：

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

爲什麼doesn't D3不再顯示圖形？我需要改變什麼？

Answer 1

不像d3.tsv,d3.json確實不是接受一個行轉換函數。

在你的代碼...

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

...一切"/all.json "和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 
});