javascript - D3.js词云不显示不报错

Question

我正在尝试用 d3.js 制作词云，当我尝试调用页面时，词云没有显示。

但是，控制台中没有错误消息，所以我无法确定是哪部分出错了。

数据集看起来像这样。

[{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; });
    }

Answer 1

我注意到您的代码中存在两个问题。

1) 当前用于计算每个节点权重的数据集中缺少freq 属性。由于字体大小取决于 weight 属性，因此它变为 0。

2) 结果数组包含键名为word 的对象。因此，要么您应该覆盖云布局的文本方法，如下所示，要么将键名更新为 text。

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

var weight = 3,
  width = 960,
  height = 500;

var fill = d3.scale.category20();
var data = [{
  word: "happy",
  weight: 10,
  "freq": 8
}, {
  word: "apple",
  weight: 4,
  "freq": 3
}, {
  word: "wishes",
  weight: 6,
  "freq": 5
}, {
  word: "sad",
  weight: 5,
  "freq": 2
}, {
  word: "orange",
  weight: 21,
  "freq": 3
}, {
  word: "condolence",
  weight: 3,
  "freq": 2
}];

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

//console.log(result);

d3.layout.cloud().size([width, height]).words(result)
  .rotate(0)
  .font("Impact")
  .text(function(d) {
    return d.word;
  })
  .fontSize(function(data) {
    return data.weight;
  })
  .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;
    });
}

text:hover {
  stroke: black;
}

<div id="cloud"></div>

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://rawgit.com/emeeks/3361332/raw/61cf57523fe8cf314333e5f60cc266351fec2017/d3.layout.cloud.js"></script>