D3.js V5.0 词云图（标签云）

#词云图
需要安装d3-cloud 插件。
https://www.npmjs.com/package/d3-cloud

实现代码如下：

  const width = 500;
  const height = 500;
  const color = d3.scaleOrdinal(d3.schemeCategory10);
  const svg = d3
    .select(id)
    .append('svg')
    .attr('width', width)
    .attr('height', height);

  const layout = cloud()
    .size([500, 500])
    .words(
      data.map(function(d) {
        return { text: d, size: 10 + Math.random() * 90 };
      })
    )
    .padding(5)
    .rotate(function() {
      return Math.random() * 45;
    })
    .font('Impact')
    .fontSize(function(d) {
      return d.size;
    })
    .on('end', draw);

  layout.start();

  function draw(words) {
    svg
      .append('g')
      .attr('transform', `translate(${layout.size()[0] / 2},${layout.size()[1] / 2})`)
      .selectAll('text')
      .data(words)
      .enter()
      .append('text')
      .attr('fill', (_, i) => color(i))
      .style('font-size', function(d) {
        return `${d.size}px`;
      })
      .style('font-family', 'Impact')
      .attr('text-anchor', 'middle')
      .attr('transform', function(d) {
        return `translate(${[d.x, d.y]})rotate(${d.rotate})`;
      })
      .text(function(d) {
        return d.text;
      });
  }

数据结构：
[
“Web2.0”,
“JavaScript”,
“HTML”,
“CSS”,
“D3”,
“SVG”,
“React”,
“Vue”
]
运行截图：

优缺点：
优点：使用这个插件可以很快速的得到想要的图表。
缺点：做数据可视化需要一个更新的过程，可以通过刷新组件来重新渲染或者(请大佬指教)。
本例子实现较为简单。单词位置较为随机，只通过字体大小来进行突出重点，不是很理想的类型。