D3不顯示但沒有錯誤

Question

我想用下面的代碼創建一個非常簡單的氣泡圖。但沒有顯示。我試着看看控制檯，但沒有錯誤顯示在控制檯中。我跟着教程的原始來源是在這裏：https://jrue.github.io/coding/2014/exercises/basicbubblepackchart/

的的jsfiddle：https://jsfiddle.net/centem/yk4v29rq/

fruits = [ 
     {"Apple":32}, 
     {"Pear":13}, 
     {"Banana":25}, 
     {"Grapes":29}, 
     {"Strawberry":36} 
    ]; 

    var diameter = 500, //max size of the bubbles 
     color = d3.scale.category20b(); //color category 

    var bubble = d3.layout.pack() 
     .sort(null) 
     .size([diameter, diameter]) 
     .padding(1.5); 

    var svg = d3.select("body") 
     .append("svg") 
     .attr("width", diameter) 
     .attr("height", diameter) 
     .attr("class", "bubble"); 

    d3.csv("fruit.csv", function(error, data){ 

     //convert numerical values from strings to numbers 
     data = data.map(function(d){ d.value = +d["Amount"]; return d; }); 

     //bubbles needs very specific format, convert data to this. 
     var nodes = bubble.nodes({children:data}).filter(function(d) { return !d.children; }); 

     //setup the chart 
     var bubbles = svg.append("g") 
      .attr("transform", "translate(0,0)") 
      .selectAll(".bubble") 
      .data(nodes) 
      .enter(); 

     //create the bubbles 
     bubbles.append("circle") 
      .attr("r", function(d){ return d.r; }) 
      .attr("cx", function(d){ return d.x; }) 
      .attr("cy", function(d){ return d.y; }) 
      .style("fill", function(d) { return color(d.value); }); 

     //format the text for each bubble 
     bubbles.append("text") 
      .attr("x", function(d){ return d.x; }) 
      .attr("y", function(d){ return d.y + 5; }) 
      .attr("text-anchor", "middle") 
      .text(function(d){ return d["Fruit"]; }) 
      .style({ 
       "fill":"white", 
       "font-family":"Helvetica Neue, Helvetica, Arial, san-serif", 
       "font-size": "12px" 
      }); 
    }); 

Answer 1

教程負載從「fruit.csv」的數據，但在你的情況下，數據加載直接從一個變量，沒有必要撥打d3.csv。

data = [ 
    {"Fruit": "Apple", "Amount": 32}, 
    {"Fruit": "Pear", "Amount": 13}, 
    {"Fruit": "Banana", "Amount": 25}, 
    {"Fruit": "Pear", "Amount": 13}, 
    {"Fruit": "Grapes", "Amount": 29}, 
    {"Fruit": "Strawberry", "Amount": 36} 
]; 

var diameter = 500, //max size of the bubbles 
    color = d3.scale.category20b(); //color category 

var bubble = d3.layout.pack() 
    .sort(null) 
    .size([diameter, diameter]) 
    .padding(1.5); 

var svg = d3.select("body") 
    .append("svg") 
    .attr("width", diameter) 
    .attr("height", diameter) 
    .attr("class", "bubble"); 

//convert numerical values from strings to numbers 
data = data.map(function (d) { 
    d.value = +d["Amount"]; 
    return d; 
}); 

//bubbles needs very specific format, convert data to this. 
var nodes = bubble.nodes({children: data}).filter(function (d) { 
    return !d.children; 
}); 

//setup the chart 
var bubbles = svg.append("g") 
    .attr("transform", "translate(0,0)") 
    .selectAll(".bubble") 
    .data(nodes) 
    .enter(); 

//create the bubbles 
bubbles.append("circle") 
    .attr("r", function (d) { 
     return d.r; 
    }) 
    .attr("cx", function (d) { 
     return d.x; 
    }) 
    .attr("cy", function (d) { 
     return d.y; 
    }) 
    .style("fill", function (d) { 
     return color(d.value); 
    }); 

//format the text for each bubble 
bubbles.append("text") 
    .attr("x", function (d) { 
     return d.x; 
    }) 
    .attr("y", function (d) { 
     return d.y + 5; 
    }) 
    .attr("text-anchor", "middle") 
    .text(function (d) { 
     return d["Fruit"]; 
    }) 
    .style({ 
     "fill": "white", 
     "font-family": "Helvetica Neue, Helvetica, Arial, san-serif", 
     "font-size": "12px" 
    });