如何使用 d3.layout.cloud.js 创建一个包含单词及其权重的 csv 的词云？

Question

我正在使用 d3.layout.cloud.js 制作词云，源数据是一个 .csv table 包含两个词及其 weight.Now 我可以显示云，但不能单独考虑每个词的权重。有人在这里帮助我，非常感谢你们；p

<script type="text/javascript">
    var fill = d3.scale.category20();
    d3.csv("wordTfIdf.csv",function(data){
    console.log(data);
    var word = [];
    var value = [];
    for(i in data)
    {
        word[i] = data[i].word;
        value[i] = data[i].tfidf;
    }
    console.log(word);
    console.log(value);
    d3.layout.cloud().size([960, 600])
      **.words(word.map(function(d) {return {text: d, size: 10 + Math.random() * 50};}))**
      .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", 960)
        .attr("height", 600)
        .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>

Answer 1

你没有包含你的 "wordTfIdf.csv" 的例子，这确实有助于回答这个问题，但我从它的外观来看它是这样的：

word,tfidf
one, 20
two, 30
three, 40
four, 50
five, 60
six, 70
seven, 80
nine, 90

其中 word 是要显示的文本，tfidf 是单词的字体大小。

第一步是将其转换为 d3.layout.cloud() 喜欢的格式，主要是具有 text 和 size 属性的对象数组。我们可以使用d3.csv's解析来帮助我们。

// give d3.csv two functions
// the first to parse each row
// the second to draw the cloud
d3.csv("wordTfIdf.csv", function(d) {
    return { // for each csv row return an object with text and size
      text: d.word,
      size: +d.tfidf // cast this to a number with +
    }
  },
  function(data) {
    d3.layout.cloud().size([960, 600]).words(
      data // data is already in the correct format
    )

这是一个 example。

如何使用 d3.layout.cloud.js 创建一个包含单词及其权重的 csv 的词云？

How to use d3.layout.cloud.js to create a word cloud with a csv containing both words and their weight?

javascript

csv

dictionary

word-cloud

d3.js