D3.js Sunburst not rendering

Я пытаюсь построить простой D3 Sunburst Diagram, основанный на этом примере.D3.js Sunburst not rendering

http://bl.ocks.org/mbostock/4348373

Мой сломанный пример размещен здесь -

http://colinwhite.net/Sunburst/

Мой источник JSON здесь -

http://colinwhite.net/Sunburst/data/getJson.php

Я вложенности мой JSON, чтобы сделать его иерархическая с эта функция-

http://colinwhite.net/Sunburst/js/treeRemapper.js

И пытается привлечь мое SVG с этим main.js -

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

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

var partition = d3.layout.partition() 
    .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); }); 

d3.json("data/getJson.php", function(error, data) { 

    var treeData = genJSON(data, ['SourceID', 'ProviderID']); 

    var path = svg.selectAll("path") 
     .data(partition.nodes(treeData)) 
     .enter().append("path") 
     .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring 
     .attr("d", arc) 
     .style("stroke", "#fff") 
     .style("fill", function(d) { return color(d.name); }) 
     .attr("fill-rule", "evenodd"); 

    console.log(treeData); 

});

Я не получаю никаких ошибок консоли, но и не получает ничего оказаны.

Что я делаю неправильно? Любые указатели или предложения будут высоко оценены.

источник

2014-11-18 Colin

Посмотрите на свою структуру документа. Нет элемента <svg>. Проблема в том, что вы пытаетесь получить доступ к <body>, когда он еще не был создан браузером.

Поместите свои скрипты в нижней части страницы (непосредственно перед закрытием тега </body>) или дождитесь события onload перед выполнением любых манипуляций с DOM.

источник

2014-11-19 21:06:26 Oleg

Все было. Благодарю. – Colin

D3.js Sunburst not rendering

ответ

Смежные вопросы