jsonを棒グラフd3jsにパースする

Question

json URLを使用して棒グラフを作成しようとしています。印象と時間に関して。私はデータを正しく参照しているとは思わない。データ（データ）d3のjsonファイルからインプレッションフィールドにアクセスするにはどうすればよいですか？

var url = "https://script.google.com/macros/s/AKfycbwy56QiQwyfkkaLFWZ33QHVieAHhtLJYNa_AzKcCBr-J7Catgv2/exec?id=1vQsWQPUET20KcgeRKgs5NOOBngqLeUuNTHI1bWi5Et8&sheet=Sheet1"; 


d3.json(url, function(data) { 
    console.log(data.Sheet1[0]); 

    var canvas = d3.select("body").append("svg") 
     .attr("width", 500) 
     .attr("height", 500) 
    canvas.selectAll("rect") 
     .data(data) 
     .enter() 
     .append("rect") 
     .attr("width", function(d) { 
      return d.Impressions 
     }) 
     .attr("height", 45) 
     .attr("y", function(d, i) { 
      return i * 50 
     }) 
     .attr("fill", "blue") 
}); 

Answer 1

関数data（）に配列を渡す必要があります。したがって、data以来オブジェクトです：

Object {Sheet1: Array[71]} 

あなたのデータは、代わりにdata.Sheet1でなければなりません。

var url = "https://script.google.com/macros/s/AKfycbwy56QiQwyfkkaLFWZ33QHVieAHhtLJYNa_AzKcCBr-J7Catgv2/exec?id=1vQsWQPUET20KcgeRKgs5NOOBngqLeUuNTHI1bWi5Et8&sheet=Sheet1"; 
 

 
d3.json(url, function (data) { 
 

 
var scale = d3.scale.linear() 
 
    .domain([0, d3.max(data.Sheet1, function(d){ return d.Impressions})]) 
 
    .range([0, 500]); 
 

 

 
var canvas = d3.select("body").append("svg") 
 
    .attr("width",500) 
 
    .attr("height",500) 
 
canvas.selectAll("rect") 
 
    .data(data.Sheet1) 
 
    .enter() 
 
     .append("rect") 
 
     .attr("width",function(d){return scale(d.Impressions)}) 
 
     .attr("height", 6) 
 
     .attr("y",function(d,i){return i*7}) 
 
     .attr("fill","blue") 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

PS：デモを確認してください、私はあなたのコードにスケールを追加しました。