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"
    });