D3 V5 Перенос слов в круг - PullRequest
Новая
       10

D3 V5 Перенос слов в круг

0 голосов
/ 20 февраля 2020

Я довольно новичок в D3 и добился некоторого прогресса, но эта проблема полностью поставила меня в тупик. Я не могу заставить свой текст вписаться в круги. Ничего особенного, я думаю, что простые разрывы строк даже не пройдут.

Вот мой пример кода для создания кругов и текста. 

graph
.selectAll('circle')
.data(this.nodes)
.enter()
.append('circle')
.attr('r', 30)

graph
.selectAll('text')
.data(this.nodes)
.enter()
.append('text')
.attr('x', 0)
.attr('y', '.31em')
.attr('text-anchor', 'middle')
.text((d: Vertex) => d.name)

Я попытался добавить tspans, но я не смог заставить его работать.

1 Ответ

1 голос
/ 20 февраля 2020

Я предлагаю вам попробовать использовать d3plus плагин для D3, вот пример: 

// Wrap text in a rectangle.
  d3plus.textwrap()
    .container(d3.select("#rectWrap"))
    .draw();

  // Wrap text in a rectangle, and size the text to fit.
  d3plus.textwrap()
    .container(d3.select("#rectResize"))
    .resize(true)
    .draw();

  // Wrap text in a circle.
  d3plus.textwrap()
    .container(d3.select("#circleWrap"))
    .draw();

  // Wrap text in a circle, and size the text to fit.
  d3plus.textwrap()
    .container(d3.select("#circleResize"))
    .resize(true)
    .draw();
svg {
  font-family: "Helvetica", "Arial", sans-serif;
  height: 425px;
  margin: 25px;
  width: 900px;
}

.type {
  fill: #888;
  text-anchor: middle;
}

.shape {
  fill: #eee;
  stroke: #ccc;
}
<!DOCTYPE html>
<meta charset="utf-8">

<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>

<svg>

  <!-- Text that will use the D3plus default wrapping. -->
  <text class="type" dy="15px" x="75px">Wrapped</text>

  <rect class="shape" height="150px" width="150px" y="50px"></rect>
  <text id="rectWrap" class="wrap" y="50px" font-size="12">
    Here is a long text string that SVG should wrap by default, but it does not.
  </text>

  <circle class="shape" r="75px" cx="75px" cy="300px"></circle>
  <text id="circleWrap" class="wrap" y="225px" x="0px" font-size="12">
    Here is a long text string that SVG should wrap by default, but it does not.
  </text>

  <!-- Text that D3plus will resize to fit the available space. -->
  <text class="type" dy="15px" x="275px">Resized</text>

  <rect class="shape" height="150px" width="150px" y="50px" x="200px"></rect>
  <text id="rectResize" class="wrap" y="50px" x="200px" font-size="12">
    Here is a long text string that SVG should wrap by default, but it does not.
  </text>

  <circle class="shape" r="75px" cx="275px" cy="300px"></circle>
  <text id="circleResize" class="wrap" y="225px" x="200px" font-size="12">
    Here is a long text string that SVG should wrap by default, but it does not.
  </text>

  <!-- For comparison, how SVG would display the text without D3plus. -->
  <text class="type" dy="15px" x="475px">Default Behavior</text>

  <rect class="shape" height="150px" width="150px" y="50px" x="400px"></rect>
  <text class="wrap" y="50px" x="400px" font-size="12">
    Here is a long text string that SVG should wrap by default, but it does not.
  </text>

  <circle class="shape" r="75px" cx="475px" cy="300px"></circle>
  <text class="wrap" y="225px" x="400px" font-size="12">
    Here is a long text string that SVG should wrap by default, but it does not.
  </text>

</svg>
...