Мне нужно создать диаграмму, состоящую из иерархии блоков (большой блок, содержащий меньшие блоки, содержащие другие блоки).
Данные представляют собой иерархию этих блоков
{
element: {name: test, geometry: [..], orientation: '180'}
element: {name: test2, geometry: [..], orientation: 'none'}
element: {name: test3, geometry: [..], orientation: 'flipX'}
element: {
name: test4,
geometry: [..],
orientation: '90'
children:
[
element: {name: test5, geometry: [..], orientation: '180'}
element: {name: test6, geometry: [..], orientation: 'none'}
]
}
}
Каждый блок имеет геометрию (массив ребер) и ориентацию:
- отсутствие ориентации
- перевернуть на X (щелкнуть по центру ограничительной рамки по оси X)
- перевернуть на y (перевернуть центр ограничительной рамки по оси Y)
- поверните на 90 градусов (поверните вокруг точки начала 90 градусов)
- 180 градусов
Координаты ребер относительно исходного родительского блока.
Итак, если главный блок повернут, система координат субблока также будет повернута.
Мне нужно нарисовать это, а затем изменить цвет заливки каждого блока на основе показателей.
Теперь я сделал это, чтобы рекурсивно разобрать эту иерархию и добавить элементы svg для каждого из них:
<svg>
<g><path>
<g><path></g>
<g><path></g>
<g><path>
<g><path></g>
</g>
</g>
</svg>
Это помогает со всем наследованием координат, когда я рисую внутри групп, которые уже повернуты.
Я не уверен, что это лучший способ, поскольку я не использую функции .data() append() enter(), потому что я не знаю, как рисовать неотъемлемые элементы. Блоки также имеют метки и показатель того, где их происхождение, но я не включил это, чтобы упростить.
Есть ли лучший способ сделать это?
Спасибо!