Как правильно использовать тег Использовать в SVG с d3 js? - PullRequest
Новая
       1

Как правильно использовать тег Использовать в SVG с d3 js?

0 голосов
/ 03 марта 2019

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

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

Обход, который я нашел, состоял в том, чтобы использовать тег использования , но я не мог заставить его работать, вот моя текущая попытка:

текст: 

      var textToolTip = gToolTip
        .append("text")

        .attr("id", "toUse")
        .text(.....)...

тег использования: 

var useText = gToolTip.append("use").attr("xlink:xlink:href", "#toUse");

Я также пытался дать textToolTip xlink: href, но он не работал.Для использования тега я попытался использовать xlink: href вместо xlink: xlink: href, это не сработало.Я использую двойную ссылку xlink из-за этого ответа, который я нашел: Как определить документ SVG в и повторно использовать с тегом ?

1 Ответ

0 голосов
/ 03 марта 2019

Если я правильно вас понимаю, было бы проще добавить прямоугольник, добавить текст, а затем изменить размер прямоугольника на текст: 

<!DOCTYPE html>
<html>

  <head>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>

  <body>
    <svg width="900" height="900"></svg>
    <script>
      
      var svg = d3.select('svg');
      
      var rect = svg.append("rect")
        .style("fill", "black")
        .attr("x", 20)
        .attr("y", 20);
      
      var text = svg.append("text")
        .text("Now is the time for all good men to come to the aid of their country")
        .attr("x", 20)
        .attr("y", 20)
        .attr("alignment-baseline","hanging")
        .style("fill","steelblue")
        .style("font-family", "arial")
        .style("font-size", "14pt")
        
      var bbox = text.node().getBBox();
      
      rect.attr("width", bbox.width);
      rect.attr("height", bbox.height);
    </script>
  </body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...