Добавить текст в прямоугольный тег в d3js - PullRequest
Новая
       24

Добавить текст в прямоугольный тег в d3js

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

Я очень новичок в d3js и готовлю школьный проект, и завтра будет представление, и мне интересно, возможно ли добавить текст над этими прямоугольниками, я искал и пробовал много и обнаружил, что он <text> не может чтобы быть вложенным в <rect>, мы должны использовать группу <g>, но не в состоянии сделать это, и я не уверен, как это сделать. Вы можете мне помочь? 

<script type="text/javascript"><![CDATA[
      function makeDraggable(evt) {
        var svg = evt.target;
        svg.addEventListener('mousedown', startDrag);
        svg.addEventListener('mousemove', drag);
        svg.addEventListener('mouseup', endDrag);

        function getMousePosition(evt) {
          var CTM = svg.getScreenCTM();
          return {
            x: (evt.clientX - CTM.e) / CTM.a,
            y: (evt.clientY - CTM.f) / CTM.d
          };
        }

        var selectedElement, offset;

        function startDrag(evt) {
          if (evt.target.classList.contains('draggable')) {
            selectedElement = evt.target;
            offset = getMousePosition(evt);
            offset.x -= parseFloat(selectedElement.getAttributeNS(null, "x"));
            offset.y -= parseFloat(selectedElement.getAttributeNS(null, "y"));
          }
        }


        function drag(evt) {
          if (selectedElement) {
            var coord = getMousePosition(evt);
            selectedElement.setAttributeNS(null, "x", coord.x - offset.x);
            selectedElement.setAttributeNS(null, "y", coord.y - offset.y);
          }
        }


        function endDrag(evt) {
          selectedElement = null;
        }
      }
    ]]> </script>

  <rect x="0" y="0" width="30" height="20" class="background"/>
  <rect id ="2" class="draggable" x="4" y="5" width="3" height="1" fill="#007bff" />
  <rect class="draggable" x="4" y="5" width="3" height="2" fill="#E5B454"/>
  <rect class="draggable" x="4" y="5" width="3" height="3" fill="#8FE4B1"/>
  <rect class="draggable" x="4" y="5" width="3" height="4" fill="#7D8AC3"/>
  <rect class="draggable" x="4" y="5" width="3" height="5" fill="#C37DA8"/>
...