Json 使用d3.js创建动态单词云

我使用下面的示例作为基础，并希望使其成为动态word cloud

数据已添加到数组中，但my word cloud未反映新添加的单词：

var fill=d3.scale.category20（）；
var数据=[{word:“你好”，权重：20}，{word:“世界”，权重：10}，{word:“正常”，权重：25}，{word:“你”，权重：15}，{word:“想要”，权重：30}，{word:“更多”，权重：12}，{word:“词语”，权重：8}，{word:“但是”，权重：18}，{word:“谁”，权重：22}，{word:“关心”，权重：27}；
d3.layout.cloud（）.size（[500500]）
.words（data.map）函数（d）{
返回{text:d.word，size:d.weight}；
}))
.填充（5）
.rotate（函数（）{return~~（Math.random（）*2）*90；}）
.font（“影响”）
.fontSize（函数（d）{返回d.size；}）
.on（“结束”，抽签）
.start（）；
函数图（字）{
d3.选择（“正文”）.附加（“svg”）
.attr（“宽度”，300）
.attr（“高度”，300）
.附加（“g”）
.attr（“转换”、“翻译（150150）”）
.selectAll（“文本”）
.数据（字）
.enter（）.append（“文本”）
.style（“字体大小”，函数（d）{返回d.size+“px”；}）
.style（“字体系列”、“影响”）
.style（“fill”，函数（d，i）{返回fill（i）；}）
.attr（“文本锚定”、“中间”）
.attr（“转换”，函数（d）{
返回“translate（“+[d.x，d.y]+”）rotate（“+d.rotate+”）”；
})
.text（函数（d）{返回d.text；}）；
}
功能更新（字）{
//alert（JSON.stringify（words））；//显示添加的数据
d3.选择（“正文”）。选择全部（“文本”）
.数据（文字）地图（功能（d）{
返回{text:d.word，size:d.weight}；
}))
.style（“字体大小”，函数（d）{返回d.size+“px”；}）
.style（“字体系列”、“影响”）
.style（“fill”，函数（d，i）{返回fill（i）；}）
.attr（“文本锚定”、“中间”）
.text（函数（d）{返回d.text；}）；
}
setInterval（函数（）{
var d_new=数据；
d_new.push（{单词：“Mappy”，重量：35}）；
图纸更新（d_新）；
}, 1500);

而且，它第一次刷新，但没有添加新单词。请有人纠正或指出我在这方面做错了什么。

---

谢谢

多亏了百灵鸟，我才得以完成。在这里我分享代码，如果其他人面临类似的问题，我希望它能有所帮助

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

var fill=d3.scale.category20（）；
var数据=[{word:“你好”，权重：20}，{word:“世界”，权重：10}，{word:“正常”，权重：25}，{word:“你”，权重：15}，{word:“想要”，权重：30}，{word:“更多”，权重：12}，{word:“词语”，权重：8}，{word:“但是”，权重：18}，{word:“谁”，权重：22}，{word:“关心”，权重：27}；
d3.layout.cloud（）.size（[500500]）
.words（data.map）函数（d）{
返回{text:d.word，size:d.weight}；
}))
.填充（5）
.rotate（函数（）{return~~（Math.random（）*2）*90；}）
.font（“影响”）
.fontSize（函数（d）{返回d.size；}）
.on（“结束”，抽签）
.start（）；
函数图（字）{
d3.选择（“正文”）.附加（“svg”）
.attr（“宽度”，300）
.attr（“高度”，300）
.附加（“g”）
.attr（“转换”、“翻译（150150）”）
.selectAll（“文本”）
.数据（字）
.enter（）.append（“文本”）
.style（“字体大小”，函数（d）{返回d.size+“px”；}）
.style（“字体系列”、“影响”）
.style（“fill”，函数（d，i）{返回fill（i）；}）
.attr（“文本锚定”、“中间”）
.attr（“转换”，函数（d）{
返回“translate（“+[d.x，d.y]+”）rotate（“+d.rotate+”）”；
})
.text（函数（d）{返回d.text；}）；
}
功能更新（字）{
d3.layout.cloud（）.size（[500500]）
.字（字）
.填充（5）
.rotate（函数（）{return~~（Math.random（）*2）*90；}）
.font（“影响”）
.fontSize（函数（d）{返回d.size；}）
.start（）；
d3.选择（“svg”）
.全选（“g”）
.attr（“转换”、“翻译（150150）”）
.selectAll（“文本”）
.data（words）.enter（）.append（“文本”）
.style（“字体大小”，函数（d）{返回d.size+“px”；}）
.style（“字体系列”、“影响”）
.style（“fill”，函数（d，i）{返回fill（i）；}）
.attr（“转换”，函数（d）{
返回“translate（“+[d.x，d.y]+”）rotate（“+d.rotate+”）”；
})
.text（函数（d）{返回d.text；}）；
}
setInterval（函数（）{
var d_new=数据；
d_new.push（{word:randomWord（），weight:randomWeight（）}）；
drawUpdate（d_new.map）（函数（d）{
返回{text:d.word，size:d.weight}；
}));
}, 1500);
函数randomWord（）{
var text=“”；
var-mable=“abcdefghijklmnopqrstuvxyzabefghijklmnopqrstuvxyz”；
对于（变量i=0；i<5；i++）
text+=可能的.charAt（Math.floor（Math.random（）*可能的.length））；
返回文本；
}
函数随机权重（）{
var r=Math.round（Math.random（）*100）；
返回r；
}

您没有在更新函数中处理enter选择（将包含新词）。但是，当我在data（）之后的drawUpdate函数中添加enter（）时，它会在浏览器控制台中显示undefined is not函数错误。你能详细说明一下吗？代码看起来和你的

draw（）

函数中的代码一样。谢谢，它工作起来有点正常，但是添加的单词显示在与上一个相同的位置上。有什么想法吗？我试着在update函数中使用transform attr，但它给出了未定义的d.x，无法理解这种行为，因为相同的语法适用于draw函数。为什么它在第二个函数中找不到具有相同数据集的x，y坐标呢？你注意到什么了吗。。文本相互重叠，表示布局不更新，是的，新单词是ge

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