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, чтобы понять, какие узлы должны быть связаны.
Любое объяснение приветствуется