D3.js带有JSON数据的简单饼图示例 - 由浏览器呈现的空白页面

Question

我正在尝试让以下示例在本地服务器上运行 https://jsfiddle.net/ragingsquirrel3/qkHK6/所以我重新格式化了JSON文件，如下所示：

data.json

{"Category A" : { "value":20, "label" : "Text1"},
"Category B" : {"value":50, "label" : "Text2" }, 
"Category C" : {"value":30, "label" : "Text3" }
}

问题是我仍然得到一个空白页面，我可以在控制台中看到数据被正确读取

Chrome中的#Console：

example.html:20 
Object {Category C: Object, Category B: Object, Category A: Object}
Category A
:
Object
Category B
:
Object
Category C
:
Object
__proto__
:
Object
__defineGetter__
:
__defineGetter__()
__defineSetter__
:
__defineSetter__()
__lookupGetter__
:
__lookupGetter__()
__lookupSetter__
:
__lookupSetter__()
constructor
:
Object()
hasOwnProperty
:
hasOwnProperty()
isPrototypeOf
:
isPrototypeOf()
propertyIsEnumerable
:
propertyIsEnumerable()
toLocaleString
:
toLocaleString()
toString
:
toString()
valueOf
:
valueOf()
get __proto__
:
__proto__()
set __proto__
:
__proto__()

HTML

<div id="chart"></div>

的Javascript：

var w = 400;
var h = 400;
var r = h/2;
var color = d3.scale.category20c();

var data = [{"label":"Category A", "value":20}, 
                  {"label":"Category B", "value":50}, 
                  {"label":"Category C", "value":30}];


var vis = d3.select('#chart').append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")");
var pie = d3.layout.pie().value(function(d){return d.value;});

// declare an arc generator function
var arc = d3.svg.arc().outerRadius(r);

// select paths, use arc generator to draw
var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");
arcs.append("svg:path")
    .attr("fill", function(d, i){
        return color(i);
    })
    .attr("d", function (d) {
        // log the result of the arc generator to show how cool it is :)
        console.log(arc(d));
        return arc(d);
    });

// add the text
arcs.append("svg:text").attr("transform", function(d){
            d.innerRadius = 0;
            d.outerRadius = r;
    return "translate(" + arc.centroid(d) + ")";}).attr("text-anchor", "middle").text( function(d, i) {
    return data[i].label;}
        );

结果：

<div id="chart"><svg></svg></div>

（但注意在浏览器中呈现 - 只是一个空白的白页）