解析json到條形圖d3js

Question

我正在嘗試使用json url創建條形圖。關於印象和時間。我不認爲我在.data（data）處正確引用了數據，我如何從d3中的json文件訪問Impressions字段？

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：我添加了一個規模到您的代碼。