Parsing JSON zu Balkendiagramm d3js

Question

Ich versuche, ein Balkendiagramm mit der JSON-URL zu erstellen. In Bezug auf Eindrücke und Zeit. Ich denke nicht, dass ich die Daten unter .data (Daten) richtig referenziere. Wie greife ich auf das Impressionsfeld von der json Datei in d3 zu?

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

Sie müssen ein Array an die Funktion data() übergeben. Da somit data ist ein Ziel:

Object {Sheet1: Array[71]} 

Ihre Daten data.Sheet1 stattdessen sein sollte. Schauen Sie sich die Demo:

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: Ich habe einen Maßstab, um Ihren Code.