Ограничительная коробка в D3.js

Я думаю, что многие из вас, которые работали с D3.js, уже испытали одно и то же: ваша сеть или любые подвижные элементы, которые вы взяли, все время вылетают из svg-элемента, если их сильно подталкивают. Если моя сеть крупнее, внешние узлы исчезают, они как бы "падают на край мира".

Я довольно уверен, что есть способ сделать границу svg сплошной "стеной", поэтому элементы не могут ее оставить и летать невидимыми в пространстве:)

Что вы сделали с этой проблемой? Как вы его решили?

Спасибо заранее, Дэвид

Ответ 1

В конце концов, если вы найдете нужные сайты в Интернете, это довольно легко. http://bl.ocks.org/1129492 делает именно то, что я хотел - объекты не могут выскользнуть из svg. Поэтому он просто добавил некоторые ограничения при обновлении позиций узлов. Моя функция "тика" закончилась, как

node.attr("cx", function(d) { return d.x = Math.max(15, Math.min(width - 15, d.x)); })
    .attr("cy", function(d) { return d.y = Math.max(15, Math.min(height - 15, d.y)); });

link.attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });

node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

Это называется всякий раз, когда что-то важное может произойти, "tick" -thing что-то построено где-то глубоко внутри D3.js, поэтому не спрашивайте меня об этом.:)

Первые две строки и последняя в данном коде проверяют, что координаты не выходят из окна.

Надеюсь, это поможет кому-то сделать работу быстрее, чем я;)

Хорошо провести время, Dave

Ответ 2

Чтобы границы были сплошной "стеной" в графике, ориентированном на усиление, вам нужно было бы реализовать определенное выборочное обнаружение столкновений для границ ограничивающей рамки. Вот пример пользовательского обнаружения конфликтов.

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

Для действительно больших графов я бы рекомендовал вместо этого просто позволить пользователю панорамировать и уменьшать масштаб. Этот пост SO дает несколько советов по масштабированию. Вам также необходимо создать rect, который является размером вашего графика в качестве цели для получения событий мыши. Вы можете динамически изменять размер этого файла до размера, например, ориентированного по силе графа, в обработчике события tick.

Надеемся, что это некоторые полезные указатели.

Ответ 3

Общий способ устранить визуализацию графа от вас - это получить ограничительную рамку, а затем создать преобразование на SVG, которое точно отображает ограничительную рамку в окне просмотра (сохраняя соотношение сторон, зажатое до некоторого неопределенно разумного значения).

Если пользователь увеличит масштаб, вы забудете об этом процессе.

Результат будет заключаться в том, что если "материал" улетит, вы эффективно увидите его масштабирование. И пользователь может масштабировать, как им заблагорассудится.

Ключом к получению этой работы является запись графа состояний. Когда что-то вызывает пересчет, вы переходите в режим "фиксировать ограничительную рамку", и когда графики в основном перестают двигаться, вы переключаетесь в режим "пользовательский контроль масштабирования". Чтобы это хорошо работало, это означает, что переходы между состояниями правильны (всегда предоставляйте переопределение для продвинутых пользователей).