D3 слово облако макет круг и прямоугольник

Question

Я новичок в D3 и пытаюсь создать страницу с облаком слов, используя JasonDavies d3-cloud .

Но иногда все слова отображаются по кругу, а иногда по прямоугольнику.

Как я могу сделать так, чтобы они всегда находились в круге?

Answer 1

Алгоритм компоновки

d3-cloud помещает слова в эллипс, начиная с предоставленного вами центра прямоугольника (d3.layout.cloud().size([width, height])).

Если у вас есть контейнер (size([width, height])), достаточно большой по сравнению с вашим количеством слов и размером, который вы дали этим словам, тогда вы получите хороший круг (или эллипс, если ваш контейнер не квадрат):

Math.seedrandom('hello words');

var data = [{ text: "Hello", count: 38 }, { text: "World", count: 27 }, { text: "Whatever", count: 21 }, { text: "Massive", count: 21 }, { text: "Thing", count: 16 }, { text: "Something", count: 14 }, { text: "What", count: 12 }, { text: "Else", count: 9 }, { text: "Blabla", count: 6 }, { text: "Small", count: 6 }, { text: "VeryLong", count: 6 }, { text: "Word", count: 3 }, { text: "abcdef", count: 4 }, { text: "Elsewhere", count: 9 }, { text: "Anything", count: 3 }, { text: "Placeholder", count: 14 }, { text: "WhateverSmall", count: 3 }, { text: "Work", count: 12 }, { text: "Wording", count: 7 }, { text: "Verb", count: 4 }];

  var svg = d3.select("svg").append("g");

  let fill = d3.scaleOrdinal(d3.schemeCategory20);
  let size = d3.scaleLinear().range([0, 20]).domain([0, d3.max(data, d => d.count)]);

  let word_cloud_data = data
    .map( function(d) {
      return { text: d.text, size: 9 + size(d.count) * 3.5 };
    });

  let layout = d3.layout.cloud()
    .size([600, 600])
    .words(word_cloud_data)
    .padding(2.5)
    .rotate(d => ~~(Math.random() * 2) * -90)
    .fontSize(d => d.size)
    .on("end", draw);

  layout.start();

  function draw(words) {

    svg.append("g")
      .attr("transform", "translate(250,250)")
      .selectAll("text")
      .data(words)
      .enter().append("text")
      .style("fill", (d, i) => { d.color = fill(i); return d.color; })
      .style("text-anchor", "middle")
      .attr("transform", d => "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")")
      .text(d => d.text)
      .style("font-size", d => d.size + "px");
  }

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdn.rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js"></script>
<script src="https://d3js.org/d3-scale.v1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.4/seedrandom.min.js">
</script>
<svg width="700" height="700"></svg>

Если ваш контейнер не может содержать ваши слова в виде эллипса / круга, алгоритм компоновки d3-cloud начнет находить пространство в углах контейнера, который вы выбрали для размещения своего облака. И это начнет выглядеть как прямоугольник / квадрат. (До этого места даже не хватало места для добавления оставшихся слов):

Math.seedrandom('hello words');

var data = [{ text: "Hello", count: 38 }, { text: "World", count: 27 }, { text: "Whatever", count: 21 }, { text: "Massive", count: 21 }, { text: "Thing", count: 16 }, { text: "Something", count: 14 }, { text: "What", count: 12 }, { text: "Else", count: 9 }, { text: "Blabla", count: 6 }, { text: "Small", count: 6 }, { text: "VeryLong", count: 6 }, { text: "Word", count: 3 }];

  var svg = d3.select("svg").append("g");

  let fill = d3.scaleOrdinal(d3.schemeCategory20);
  let size = d3.scaleLinear().range([0, 20]).domain([0, d3.max(data, d => d.count)]);

  let word_cloud_data = data
    .map( function(d) {
      return { text: d.text, size: 9 + size(d.count) * 3.5 };
    });

  let layout = d3.layout.cloud()
    .size([275, 275])
    .words(word_cloud_data)
    .padding(2.5)
    .rotate(d => ~~(Math.random() * 2) * -90)
    .fontSize(d => d.size)
    .on("end", draw);

  layout.start();

  function draw(words) {

    svg.append("g")
      .attr("transform", "translate(150,150)")
      .selectAll("text")
      .data(words)
      .enter().append("text")
      .style("fill", (d, i) => { d.color = fill(i); return d.color; })
      .style("text-anchor", "middle")
      .attr("transform", d => "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")")
      .text(d => d.text)
      .style("font-size", d => d.size + "px");
  }

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdn.rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js"></script>
<script src="https://d3js.org/d3-scale.v1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.4/seedrandom.min.js">
</script>
<svg width="700" height="700"></svg>

Решения заключаются в том, чтобы либо уменьшить размер ваших слов, чтобы выделить d3-layout достаточно места, либо увеличить ширину и высоту облачного контейнера.

Например, уменьшив размер слова:

// domain reduced from [0, 20] to [0, 13]:
var sizeScale = d3.scaleLinear().range([0, 13]).domain([0, d3.max(data, d => d.count)]);

Math.seedrandom('hello word');

var data = [{ text: "Hello", count: 38 }, { text: "World", count: 27 }, { text: "Whatever", count: 21 }, { text: "Massive", count: 21 }, { text: "Thing", count: 16 }, { text: "Something", count: 14 }, { text: "What", count: 12 }, { text: "Else", count: 9 }, { text: "Blabla", count: 6 }, { text: "Small", count: 6 }, { text: "VeryLong", count: 6 }, { text: "Word", count: 3 }];

  var svg = d3.select("svg").append("g");

  let fill = d3.scaleOrdinal(d3.schemeCategory20);
  let size = d3.scaleLinear().range([0, 13]).domain([0, d3.max(data, d => d.count)]);

  let word_cloud_data = data
    .map( function(d) {
      return { text: d.text, size: 9 + size(d.count) * 3.5 };
    });

  let layout = d3.layout.cloud()
    .size([275, 275])
    .words(word_cloud_data)
    .padding(2.5)
    .rotate(d => ~~(Math.random() * 2) * -90)
    .fontSize(d => d.size)
    .on("end", draw);

  layout.start();

  function draw(words) {

    svg.append("g")
      .attr("transform", "translate(150,150)")
      .selectAll("text")
      .data(words)
      .enter().append("text")
      .style("fill", (d, i) => { d.color = fill(i); return d.color; })
      .style("text-anchor", "middle")
      .attr("transform", d => "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")")
      .text(d => d.text)
      .style("font-size", d => d.size + "px");
  }

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdn.rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js"></script>
<script src="https://d3js.org/d3-scale.v1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.4/seedrandom.min.js">
</script>
<svg width="700" height="700"></svg>