d3.js文字云从json加载数据

我正在修改此代码https://github.com/jasondavies/d3-cloud以显示json文件中的“关键字”。我的问题：如何连接json文件以显示关键字标签？是否可以突出更常见的单词（比如大字体）？d3.js文字云从json加载数据

谢谢你们！

的index.html

<!DOCTYPE html> 
<meta charset="utf-8"> 
<body> 
<script src="../lib/d3/d3.js"></script> 
<script src="../d3.layout.cloud.js"></script> 
<script> 
var fill = d3.scale.category20(); 

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}; 
    })) 
    .padding(5) 
    .rotate(function() { return ~~(Math.random() * 2) * 90; }) 
    .font("Impact") 
    .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"; }) 
    .style("font-family", "Impact") 
    .style("fill", function(d, i) { return fill(i); }) 
    .attr("text-anchor", "middle") 
    .attr("transform", function(d) { 
     return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; 
    }) 
    .text(function(d) { return d.text; }); 
} 
</script>

pub.json

{"pub":[ 
    { 
     "citationKey":"Smuc_HCV2012", 
     "entryType":"inbook", 
     "entryTags": { 
      "title":"How do you connect moving dots? Insights from user studies on Dynamic Network Visualizations", 
      "booktitle":"Handbook of Human Centric Visualization", 
      "year":"2013", 
      "pages":"623-650", 
      "publisher":"Springer", 
      "organization":"Springer", 
      "location":"New York, USA", 
      "isbn":"978-1-4614-7484-5", 
      "doi":"10.1007/978-1-4614-7485-2_25", 
      "type":"Awesome Reports", 
      "author":"muc, Michael and Federico, Paolo and Windhager, Florian and Aigner, Wolfgang and Zenk, Lukas and Miksch, Silvia", 
      "editor":"Huang, Weidong" 
      "keywords":"Data Mining, KDD, Pattern Finding, Time-Oriented Data, Visual analytics" 
      } 
    }, 
    { 
     "citationKey":"Schratt_2009_IKE-TR-2009-02_UmfragezuBusiness-Intelligence-Weiterbildung", 
     "entryType":"incollection", 
     "entryTags": { 
      "title":"Umfrage zu Business-Intelligence-Weiterbildung", 
      "number":"IKE-TR-2009-02", 
      "year":"2009", 
      "publisher":"Danube University Krems", 
      "type":"Technical Reports", 
      "author":"Schratt, Alexander and Aigner, Wolfgang" 
      "keywords":"Data Mining, Interactive Visualization, KDD, Pattern Finding, temporal data mining, Time-Oriented Data, Visual analytics" 
      } 
    } 


    ] 
}

来源

2014-12-03 Gordon Freeman

如何JSON文件中显示的关键字标签连接？

将文件托管在您的服务器上。假设它在/resources/pub.json。然后以d3.json为例给客户。然后，您可以使用您检索的数据作为wordcloud的输入。

d3.json('/resources/pub.json', function(error, data){ 

    // get words as a list of objects of the form {text: 'asdf', size: 5} 
    // ie. 

    words = data.pub[0]['entryTags']['title'].split(' '); // now its a list of words in the title 
    words = words.map(function(word){ 
     return { 
      text: word, 
      size: 12 
     } 
    }); // now it has the correct format, but this is just an example 

    // then use it as input to the layout 
    d3.layout.cloud().size([300, 300]) 
    .words(words) 
    ... // etcetera 

});

是否有可能强调这是更常用词（例如更大的字体）？

是，大小设置在这一行：如果你确保你的话，通过在先前的变换计数出现次数得到不同的尺寸，例如

.enter().append("text") 
.style("font-size", function(d) { return d.size + "px"; }) 
.. // etcetera

因此，他们有不同的尺寸。

也有许多不同的方法

您可以直接包括在JavaScript中的数据，所以你不必从服务器请求它分别
您可以将数据转换的正确的格式在服务器上，所以你不必做转换clientide。
除了文本和大小之外，还可以为云中的每个标签使用其他格式，例如，添加count和color，并使用格式中的标签。

请注意，这是伪码引导您前进，但并未完成。

来源

2014-12-03 12:03:29 Gijs

d3.js文字云从json加载数据

回答

相关问题