2012-05-21 12 views
5

मैं इस कोड को संशोधित कर रहा हूँ: https://github.com/jasondavies/d3-cloudd3.js टैग क्लाउड आकार जेसन/सरणी से?

<script> 
    d3.layout.cloud().size([300, 300]) 
     .words([ 
     "Hello", "world", "normally", "you", "want", "more", "words", 
     "than", "this"].map(function(d) { 
     return {text: d, size: 10 + Math.random() * 90}; 
     })) 
     .rotate(function() { return ~~(Math.random() * 2) * 90; }) 
     .fontSize(function(d) { return d.size; }) 
     .on("end", draw) 
     .start(); 

    function draw(words) { 
    d3.select("body").append("svg") 
     .attr("width", 300) 
     .attr("height", 300) 
     .append("g") 
     .attr("transform", "translate(150,150)") 
     .selectAll("text") 
     .data(words) 
     .enter().append("text") 
     .style("font-size", function(d) { return d.size + "px"; }) 
     .attr("text-anchor", "middle") 
     .attr("transform", function(d) { 
      return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; 
     }) 
     .text(function(d) { return d.text; }); 
    } 
</script> 

मैं अलग JSON डेटा से शब्द और आकार डेटा प्राप्त करना चाहते हैं। मैं दो चर

jWord = ["abc","def","ghi,"jkl"]; 
jCount = ["2", "5", "3", "8"]; 

है jWord शब्द है कि मैं टैग बादलों में प्रदर्शित करना चाहते हैं नहीं है। jCount इसी शब्द का आकार है (उसी क्रम)।

मैं कैसे

 .words(jWord.map(function(d) { 
     return {text: d, size: 10 + Math.random() * 90}; 
     })) 

में आकार हिस्सा स्विच करने के लिए मैं भी एक और JSON प्रारूप चर है यकीन है कि jWord करने के लिए शब्द का प्रयोग किया, लेकिन नहीं।

jWord_Count = ["abc":2, "def":5, "ghi":3, "jkl":8 ]; 

यदि यह प्रारूप मदद करता है।

उत्तर

11

d3.zip: d3.zip(jWord, jCount) एक मर्ज किए गए सरणी को लौटाता है जहां पहला तत्व [jWord[0], jCount[0]] के पहले शब्द का पाठ और आकार है, दूसरा तत्व दूसरा शब्द है, और इसी तरह। उदाहरण के लिए:

.words(d3.zip(jWord, jCount).map(function(d) { 
    return {text: d[0], size: d[1]}; 
})) 

असल में, d3.zip स्तंभ-उन्मुख डेटा को पंक्ति-उन्मुख डेटा में बदल देता है। आप पंक्ति-उन्मुख रूप में अपने डेटा को केवल आरंभ करने के लिए प्रस्तुत कर सकते हैं:

var words = [ 
    {text: "abc", size: 2}, 
    {text: "def", size: 5}, 
    {text: "ghi", size: 3}, 
    {text: "jkl", size: 8} 
]; 

आखिरकार, प्रकारों के साथ देखें। आपकी गणना संख्याओं (2) की बजाय स्ट्रिंग्स ("2") के रूप में दर्शायी जाती है। तो आप उन्हें संख्याओं पर मजबूर करने के लिए + का उपयोग करना चाह सकते हैं।

+0

बहुत बढ़िया, यह काम कर रहा है। बहुत बहुत धन्यवाद। – clerksx

+0

यदि कोई JSON var घोषित करना था, यानी, 'var topicJson = [{' abc ': 2}, {' def ': 5}, {' ghi ': 3}, {' jkl ': 8}]; 'रिटर्न स्टेटमेंट में इसे कैसे संभाला जाएगा? – sAguinaga