2012-05-21 17 views
5

Estoy modificando el código: https://github.com/jasondavies/d3-cloudd3.js Tamaño de la nube de etiquetas de un Json/array?

<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> 

me gustaría correr la voz y los datos de tamaño de datos JSON separadas. tengo dos variables

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

jWord tiene las palabras que desea que aparezca en las nubes de etiquetas. jCount es el tamaño de la palabra correspondiente (mismo orden).

que me pasa a la palabra a jWord, pero no está seguro de cómo cambiar el tamaño de la parte de

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

También tengo otra variable formato JSON.

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

Si este formato es útil.

Respuesta

11

Pruebe d3.zip: d3.zip(jWord, jCount) devuelve una matriz fusionada donde el primer elemento es el texto y el tamaño de la primera palabra [jWord[0], jCount[0]], el segundo elemento es la segunda palabra, y así sucesivamente. Por ejemplo:

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

En efecto, d3.zip convierte los datos en columnas en datos por filas. También podría representar sus datos en forma orientada a filas para comenzar:

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

Por último, tenga cuidado con los tipos. Sus recuentos se representan como cadenas ("2") en lugar de números (2). Por lo tanto, es posible que desee utilizar + para forzarlos a números.

+0

Impresionante, está funcionando. muchas gracias. – clerksx

+0

Si uno fuera a declarar una var JSON, es decir, 'var topicsJson = [{'abc': 2}, {'def': 5}, {'ghi': 3}, {'jkl': 8}]; '¿cómo se manejaría en la declaración de devolución? – sAguinaga