Javascript D3.js word cloud未显示错误消息

我正在尝试使用d3.js制作word cloud，当我尝试调用页面时，不会显示word cloud

然而，控制台中并没有错误消息，所以我无法找出哪个部分是错误的

数据集如下所示

[{word: "happy", freq: 3}, {word: "apple", freq: 4}]

这是我的密码

 <div id="cloud"></div>
<style>
text:hover {
    stroke: black;
}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://rawgit.com/emeeks/3361332/raw/61cf57523fe8cf314333e5f60cc266351fec2017/d3.layout.cloud.js"></script>

<script type="text/javascript">
  var weight = 3,
      width = 960,
      height = 500;

  var fill = d3.scale.category20();
  var data = {{ data|js }};

  var result = scale(data);

  function scale (data) {
      var result = [];
      for (var k in data){
          var value = data[k];
          result.push({word:value['word'], weight:+value['freq'] * weight});
      }
      return result;
  }

  d3.layout.cloud().size([width, height]).words(result)
      .rotate(0)
      .font("Impact")
      .fontSize(function(data) { return data.size; })
      .on("end", draw)
      .start();

  function draw(words) {
      d3.select("#cloud").append("svg")
          .attr("width", width)
          .attr("height", height)
        .append("g")
          .attr("transform", "translate(" + width/2 + "," + height/2 + ")")
        .selectAll("text")
          .data(words)
        .enter().append("text")
          .style("font-size", function(data) { return data.size + "px"; })
          .style("font-family", "Impact")
          .style("fill", function(data, i) { return fill(i); })
          .attr("text-anchor", "middle")
          .attr("transform", function(data) {
            return "translate(" + [data.x, data.y] + ")rotate(" + data.rotate + ")";
          })
        .text(function(data) { return data.text; });
    }

文本：悬停{
笔画：黑色；
}
变量权重=3，
宽度=960，
高度=500；
var fill=d3.scale.category20（）；
var data={{data | js}}；
var结果=标度（数据）；
功能量表（数据）{
var结果=[]；
for（数据中的var k）{
var值=数据[k]；
结果.push（{word:value['word']，weight:+value['freq']*weight}）；
}
返回结果；
}
d3.layout.cloud（）.size（[width，height]）.words（结果）
.旋转（0）
.font（“影响”）
.fontSize（函数（数据）{return data.size；}）
.on（“结束”，抽签）
.start（）；
函数图（字）{
d3.选择（“#云”）。追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（“+width/2+”，“+height/2+”）
.selectAll（“文本”）
.数据（字）
.enter（）.append（“文本”）
.style（“字体大小”，函数（数据）{return data.size+“px”；}）
.style（“字体系列”、“影响”）
.style（“fill”，函数（数据，i）{返回fill（i）；}）
.attr（“文本锚定”、“中间”）
.attr（“转换”，函数（数据）{
返回“translate（“+[data.x，data.y]+”）rotate（“+data.rotate+”）”；
})
.text（函数（数据）{return data.text；}）；
}

---

我注意到您的代码中有两个问题

1） 当前用于计算每个节点权重的数据集中缺少

freq

属性。因为字体大小取决于“权重”属性，所以它变为0

2） 结果数组包含键名为

word

的对象。因此，您应该覆盖如下所示的云布局的text方法，或者将key name更新为

text

 d3.layout.cloud()
   ..............
   ..............
  .text(function(d) {
    return d.word;
  }) 

var权重=3，
宽度=960，
高度=500；
var fill=d3.scale.category20（）；
风险值数据=[{
字：“快乐”，
体重：10，
“频率”：8
}, {
单词：“苹果”，
体重：4，
“频率”：3
}, {
字：“愿望”，
体重：6，
“频率”：5
}, {
字：“悲伤”，
体重：5，
“频率”：2
}, {
单词：“橙色”，
体重：21，
“频率”：3
}, {
字：“吊唁”，
体重：3，
“频率”：2
}];
var结果=标度（数据）；
功能量表（数据）{
var结果=[]；
for（数据中的var k）{
var值=数据[k]；
结果：推({
单词：值['word']，
权重：+值['freq']*权重
});
}
返回结果；
}
//控制台日志（结果）；
d3.layout.cloud（）.size（[width，height]）.words（结果）
.旋转（0）
.font（“影响”）
.文本（功能（d）{
返回d.word；
})
.fontSize（函数（数据）{
返回数据。权重；
})
.on（“结束”，抽签）
.start（）；
函数图（字）{
d3.选择（“#云”）。追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（“+width/2+”，“+height/2+”）
.selectAll（“文本”）
.数据（字）
.enter（）.append（“文本”）
.style（“字体大小”、函数（数据）{
返回data.size+“px”；
})
.style（“字体系列”、“影响”）
.样式（“填充”，功能（数据，i）{
返回填充（i）；
})
.attr（“文本锚定”、“中间”）
.attr（“转换”，函数（数据）{
返回“translate（“+[data.x，data.y]+”）rotate（“+data.rotate+”）”；
})
.text（函数（数据）{
返回data.text；
});
}

text:悬停{
笔画：黑色；
}

---

您在代码中引用的是

值['freq']

。但我在数据集对象中找不到该属性。为什么会这样？