D3.js - बाहरी डेटा लोड करना और छेड़छाड़ करना

Question

मैं डी 3.जेएस के लिए नया हूं और विभिन्न ट्यूटोरियल्स/अभ्यास/आदि के साथ खेल रहा हूं, लेकिन डी 3 के लिए मेरी मूल आवश्यकता बाहरी डेटा (आमतौर पर जेएसओएन) लोड करना है। और उस डेटा के आधार पर कुछ इंटरैक्टिव चार्ट बनाएं।

बुनियादी सनबर्स्ट उदाहरण here है:

मैं सफलतापूर्वक अपने खुद के डेटा के लिए यह अनुकूलित। हालांकि, मैं डेटा की डिलीवरी को सरल बनाने और डी 3.जे.एस. के भीतर कुछ हेरफेर को संभालने की उम्मीद कर रहा था। उदाहरण के लिए, एक पदानुक्रमित सरणी के बजाय जो सनबर्स्ट आरेख के लिए तैयार है, मैं एक फ्लैट डेटा फ़ाइल वितरित करना चाहता हूं जिसे डी 3 द्वारा आवश्यक रूप से उपयोग किया जा सकता है।

लेकिन, मुझे यकीन नहीं है कि डी 3 के डेटा कार्यों में से किसी एक के बाहर सनबर्स्ट चार्ट कैसे आकर्षित किया जाए। मैं नीचे दिए गए कोड की कोशिश की, और बदले json के माध्यम से डेटा लोड हो रहा की यह इनलाइन शामिल थे ताकि संरचना दिखाई देता है (आश्चर्य यह काम नहीं किया):

var w = 960, 
    h = 700, 
    r = Math.min(w, h)/2, 
    color = d3.scale.category20c(); 

var vis = d3.select("#chart").append("svg:svg") 
    .attr("width", w) 
    .attr("height", h) 
     .append("svg:g") 
    .attr("transform", "translate(" + w/2 + "," + h/2 + ")"); 

var partition = d3.layout.partition() 
    .sort(null) 
    .size([2 * Math.PI, r * r]) 
    .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 data = [ 
         {'level1': 'Right Triangles and an Introduction to Trigonometry', 
'level2': '', 'level3': '', 'level4': '', 'branch': 'TRI', 'subject': 
'MAT'}, 
         {'level1': '', 'level2': 'The Pythagorean Theorem', 'level3': '', 
'level4': '', 'branch': 'TRI', 'subject': 'MAT'}, 
         {'level1': '', 'level2': '', 'level3': 'The Pythagorean Theorem', 
'level4': '', 'branch': 'TRI', 'subject': 'MAT'}, 
         {'level1': '', 'level2': '', 'level3': 'Pythagorean Triples', 
'level4': '', 'branch': 'TRI', 'subject': 'MAT'} 
         ]; 
console.log(data); // looks good here 
var nest = d3.nest() 
     .key(function(d) { return d.subject;}) 
     .key(function(d) { return d.branch;}) 
     .entries(data); 
console.log(nest); // looks good here 
var path = vis.selectAll("path") 
     .data(nest) 
    .enter().append("svg:path") 
     .attr("display", function(d) { return d.depth ? null : 
"none"; }) // hide inner ring 
     .attr("d", arc) 
     .attr("fill-rule", "evenodd") 
     .style("stroke", "#fff") 
     .style("fill", function(d) { return color((d.children ? d : 
d.parent).name); }); 

यहाँ एचटीएमएल लग रहा है जैसे:

<div class="gallery" id="chart"> 
    <svg width="960" height="700"> 
     <g transform="translate(480,350)"> 
      <path display="none" d="MNaN,NaNANaN,NaN 0 1,1 NaN,NaNL0,0Z" fill-rule="evenodd" style="stroke: #ffffff; "/> 
     </g> 
    </svg> 
</div> 

मुझे यकीन है कि मैं कुछ गलत कर रहा हूं जो कि बहुत आसान है, लेकिन मुझे अपने दिमाग को समझने में परेशानी हो रही है कि डी 3 सभी डेटा के माध्यम से कैसे जायेगा और आरेख को मानचित्रित करेगा यदि मैं ड्राइंग कार्यों को घोंसला नहीं दे रहा हूं d3.json की तरह काम करें।

कोई विचार?

Answer 1

ऐसा लगता है कि आप मार्गों को प्रस्तुत करने के लिए उपयुक्त लेआउट स्थितियों के साथ डेटा को पॉप्युलेट करने के लिए partition.nodes(nest) पर कॉल करना भूल गए हैं।

sunburst example है कि आप से जुड़ा हुआ है, JSON डेटा इस तरह ही है:

var path = vis.data([json]).selectAll("path") 
    .data(partition.nodes) 
    .enter().append("path") 
    // … 

इस के बराबर है:

var path = vis.selectAll("path") 
    .data(partition.nodes(json)) 
    .enter().append("path") 
    // … 

या तो दृष्टिकोण काम करेगा, लेकिन आप partition.nodes कॉल करने की आवश्यकता कहीं अन्यथा डेटा में कोई स्थिति नहीं होगी।

यह भी ध्यान रखें कि निर्दिष्ट घोंसले के साथ आपका उदाहरण डेटा एक नोड के साथ पदानुक्रम का उत्पादन करेगा, क्योंकि सभी निर्दिष्ट घोंसले वाले फ़ील्ड समान हैं।