ссылки не отображаются в силовом макете - PullRequest
0 голосов
/ 09 марта 2020

Hy У меня есть D3. js схема размещения сил. Каждый узел является группой. Каждая группа содержит таблицу HTML с несколькими строками и столбцами.

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

<g class="node" stroke="#fff" stroke-width="1.5">
   <foreignObject width="50" height="50" style="overflow: visible;">
      <body>
         <table>
            <thead>
               <th colspan="4">table 1 name</th>
            </thead>
            <tbody>
               <tr id="line1 ID of table 1">
                  <td>line1 VALUE of table 1</td>
               </tr>
               <tr id="line2 ID of table 1">
                  <td>line2 VALUE of table 1</td>
               </tr>
            </tbody>
         </table>
      </body>
   </foreignObject>
</g>

Все заполненный через json, который выглядит следующим образом

var _data = [
   {
      "name":[
         "table 1 name"
      ],
      "id":[
         "table 1 id"
      ],
      "lines":[
         {
            "id":"line1 ID of table 1",
            "label":"line1 VALUE of table 1"
         },
         {
            "id":"line2 ID of table 1",
            "label":"line2 VALUE of table 1"
         }
      ]
   },
   {
      "name":[
         "table 2 name"
      ],
      "id":[
         "table 2 id"
      ],
      "lines":[
         {
            "id":"line1 ID of table 2",
            "label":"line1 VALUE of table 2"
         }
      ]
   }
]

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

Проблемы, когда я пытаюсь чтобы добавить ссылки между строками моих таблиц, используя идентификаторы строк

ничего не получается ...

<g stroke="#000" stroke-width="1.5">
    <line class="link">
    </line>
</g>

Я только начинаю изучать d3. js (как вы можете себе представить ) и мне непонятно, какие логики c использует d3. js, чтобы понять, какие узлы должны быть связаны.

Любое объяснение приветствуется

...