Добавление текста в прямоугольные элементы с помощью D3 / SVG - PullRequest
Новая
       3

Добавление текста в прямоугольные элементы с помощью D3 / SVG

0 голосов
/ 25 мая 2019

Я загружаю внешний SVG-файл, как показано ниже, и мне нужно добавить текст в каждый прямоугольник, на который я могу ссылаться и которым можно манипулировать.Для этого я понимаю, что мне нужно поместить каждый прямоугольник в группу и вставить текстовый элемент в ту же группу.Если возможно, я бы хотел сделать это с помощью кода, поскольку изменение структуры файла SVG заняло бы вечность, так как потенциально может быть 100-х ритов.

Каков наилучший способ достижения этого?Я просмотрел некоторые другие вопросы, но не смог найти нужного мне ответа.

Лучшее, что я могу предположить на данный момент, - это то, что мне нужно либо выбрать все тезисы и добавить группу, либолибо проходить по циклу и выбирать каждый прямоугольник отдельно?

floor.svg 

    <rect id="SR001" x="288.62" y="220.7" class="st10" width="25.74" height="46.08"/>
<rect id="SR002" x="288.62" y="266.7" class="st10" width="25.74" height="46.08"/>
<rect id="SR003" x="288.62" y="312.49" class="st10" width="25.74" height="46.08"/>
<rect id="SR004" x="288.62" y="375.62" class="st10" width="25.74" height="46.08"/>
<rect id="SR005" x="288.62" y="421.7" class="st10" width="25.74" height="46.08"/>
<rect id="SR006" x="288.62" y="467.49" class="st10" width="25.74" height="46.08"/>
<rect id="SR007" x="288.62" y="513.62" class="st10" width="25.74" height="46.08"/>

Вот так загружается файл SVG, который, кажется, работает нормально.У меня есть другие функции, которые позволяют мне взаимодействовать с прямоугольниками при определенных событиях мыши и т. Д.

javascript 

d3.xml("floor.svg", function(xml) {
  document.body.appendChild(xml.documentElement);});

1 Ответ

0 голосов
/ 25 мая 2019

Подход, который я бы выбрал, - это сначала извлечь данные из ректов, затем удалить все ректы, а затем воссоздать их все в той структуре, какой вы хотите.Для извлечения вы можете использовать selection.each(callback).Внутри обратного вызова this указывает на элемент, таким образом, вы можете, например, d3.select(this).attr('x') получить его атрибут x 

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin: 0;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  </style>
</head>

<body>
  <svg>
    <rect id="SR001" x="288.62" y="220.7" class="st10" width="25.74" height="46.08"/>
		<rect id="SR002" x="288.62" y="266.7" class="st10" width="25.74" height="46.08"/>
		<rect id="SR003" x="288.62" y="312.49" class="st10" width="25.74" height="46.08"/>
		<rect id="SR004" x="288.62" y="375.62" class="st10" width="25.74" height="46.08"/>
		<rect id="SR005" x="288.62" y="421.7" class="st10" width="25.74" height="46.08"/>
		<rect id="SR006" x="288.62" y="467.49" class="st10" width="25.74" height="46.08"/>
		<rect id="SR007" x="288.62" y="513.62" class="st10" width="25.74" height="46.08"/>
  </svg>
  <script>
    var rectData = [];
    var svg = d3.select("svg")
      .attr('width', 600)
      .attr('height', 600);
    svg.selectAll("rect")
      .each(function() {
        var r = d3.select(this);
        rectData.push({
          id: r.attr('id'),
          x: r.attr('x'),
          y: r.attr('y'),
          class: r.attr('class'),
          width: r.attr('width'),
          height: r.attr('height')
        });
      }).remove();

    var g = svg.selectAll('g')
      .data(rectData)
      .enter()
      .append('g')
      .attr('id', function(d) {
        return d.id;
      });

    g.append('rect')
      .attr('class', function(d) {
        return d.class;
      })
      .attr('x', function(d) {
        return d.x;
      })
      .attr('y', function(d) {
        return d.y;
      })
      .attr('width', function(d) {
        return d.width;
      })
      .attr('height', function(d) {
        return d.height;
      });

    g.append('text')
      .attr('y', function(d) {
        return d.y;
      })
      .attr('x', function(d) {
        return d.x;
      })
      .text(function(d) {
        return d.id;
      })
  </script>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...