d3 sunburst не рисует с inline json

Question

Я пытался нарисовать солнечный свет, но результат всегда пустой. Может кто-нибудь, пожалуйста, взгляните и подскажите мне почему? Большое спасибо за Вашу помощь!

В основном это пример кода, и я только пытался изменить загрузку json для встроенного json, поэтому мне будет проще разбирать данные.

function draw_chart() { 
var width = 960, 
    height = 700, 
    radius = Math.min(width, height)/2, 
    color = d3.scale.category20c(); 

var data = { 
    "name": "flare", 
    "children": [ 
    { 
    "name": "analytics", 
    "children": [ 
    { 
     "name": "cluster", 
     "children": [ 
     {"name": "AgglomerativeCluster", "size": 3938}, 
     {"name": "CommunityStructure", "size": 3812}, 
     {"name": "HierarchicalCluster", "size": 6714}, 
     {"name": "MergeEdge", "size": 743} 
     ] 
    } 
    ] 
    } 
    ] 
}; 


var svg = d3.select("#chart").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .data(data) 
    .append("g") 
    .attr("transform", "translate(" + width/2 + "," + height * .52 + ")"); 

var partition = d3.layout.partition() 
    .sort(null) 
    .size([2 * Math.PI, radius * radius]) 
    .value(function(d) { return 1; }); 

var arc = d3.svg.arc() 
    .startAngle(function(d) { return d.x; }) 
    .endAngle(function(d) { return d.x + d.dx; }) 
    .innerRadius(function(d) { return Math.sqrt(d.y); }) 
    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); }); 

var path = svg.selectAll("path") 
    .enter().append("path") 
     .attr("display", function(d) { return d.depth ? null : 1; }) // hide inner ring 
     .attr("d", arc) 
     .style("stroke", "#fff") 
     .style("fill", function(d) { return color((d.children ? d : d.parent).name); }) 
     .style("fill-rule", "evenodd") 
     .each(stash); 

d3.selectAll("input").on("change", function change() { 
    var value = this.value === "count" 
     ? function() { return 1; } 
     : function(d) { return d.size; }; 

    path 
     .data(partition.value(value).nodes) 
     .transition() 
     .duration(1500) 
     .attrTween("d", arcTween); 
}); 

// Stash the old values for transition. 
function stash(d) { 
    d.x0 = d.x; 
    d.dx0 = d.dx; 
} 

// Interpolate the arcs in data space. 
function arcTween(a) { 
    var i = d3.interpolate({x: a.x0, dx: a.dx0}, a); 
    return function(t) { 
    var b = i(t); 
    a.x0 = b.x; 
    a.dx0 = b.dx; 
    return arc(b); 
    }; 
} 

d3.select(self.frameElement).style("height", height + "px"); 
} 

$(document).ready(function(){ 
    draw_chart(); 
}); 

Answer 1

Проблема заключается в том, что вам нужно позвонить data() на ваш выбор для того, чтобы быть в состоянии назвать enter() и сделать что-нибудь полезное.

var path = svg.selectAll("path") 
    .data(partition.nodes)  // this is the line you were missing 
    .enter().append("path") 

См this working example on jsfiddle