Question

我使用以下示例作为基础，并希望使其成为动态词云 https://github.com/jasondavies/d3-cloud

数据被添加到数组中，但我的word-cloud没有反映新添加的单词：

<script>
  var fill = d3.scale.category20();
  var data = [{word:"Hello",weight:20},{word:"World",weight:10},{word:"Normally",weight:25},{word:"You",weight:15},{word:"Want",weight:30},{word:"More",weight:12},{word:"Words",weight:8},{word:"But",weight:18},{word:"Who",weight:22},{word:"Cares",weight:27}];

  d3.layout.cloud().size([500, 500])
          .words(data.map(function(d) {
              return {text: d.word, size: d.weight};
          }))
          .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; });
   }

   function drawUpdate(words){
      //alert(JSON.stringify(words));   //shows me the added data

     d3.select("body").selectAll("text")
          .data(words.map(function(d) {
               return {text: d.word, size: d.weight};
          }))
          .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")
          .text(function(d) { return d.text; });       
  }

 setInterval(function () { 
    var d_new = data;
    d_new.push({word: "Mappy",weight:35});
     drawUpdate(d_new);
 }, 1500);

</script>

此外，它第一次刷新，但没有添加新单词。有人可以纠正或指出我在这方面做错了什么。感谢

Answer 1

感谢Larks，我能够完成它。我在这里分享代码，如果其他人面临类似的问题，我希望它可以帮助

<script>

var fill = d3.scale.category20();
  var data = [{word:"Hello",weight:20},{word:"World",weight:10},{word:"Normally",weight:25},{word:"You",weight:15},{word:"Want",weight:30},{word:"More",weight:12},{word:"Words",weight:8},{word:"But",weight:18},{word:"Who",weight:22},{word:"Cares",weight:27}];

d3.layout.cloud().size([500, 500])
      .words(data.map(function(d) {
        return {text: d.word, size: d.weight};
      }))
      .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; });
  }
  function drawUpdate(words){
   d3.layout.cloud().size([500, 500])
      .words(words)
      .padding(5)
      .rotate(function() { return ~~(Math.random() * 2) * 90; })
      .font("Impact")
      .fontSize(function(d) { return d.size; })
      .start();


      d3.select("svg")
      .selectAll("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("transform", function(d) {

          return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
        })
        .text(function(d) { return d.text; });



  }

  setInterval(function () { 
        var d_new = data;
        d_new.push({word:randomWord(),weight:randomWeight()});

         drawUpdate(d_new.map(function(d) {
        return {text: d.word, size: d.weight};
      }));
      }, 1500);

  function randomWord() {
          var text = "";
          var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";

          for( var i=0; i < 5; i++ )
              text += possible.charAt(Math.floor(Math.random() * possible.length));

          return text;
      }
      function randomWeight(){
        var r = Math.round(Math.random() * 100);
        return r;
      }
</script>

使用d3.js创建动态Word Cloud

1 个答案: