D3: обнаружение столкновения / перекрытия кругов в сгенерированном виде - PullRequest
Новая
       4

D3: обнаружение столкновения / перекрытия кругов в сгенерированном виде

0 голосов
/ 12 февраля 2020

Я использую d3 для анимации некоторых кругов, представляющих некоторые инструменты, которые вы можете перетаскивать. Я хотел бы иметь возможность создать функцию, которая обнаруживает, когда два элемента circle / g сталкиваются друг с другом.

У меня уже есть много кода, но это интересующий код, который я хотел бы изменить. Я действительно просто пытаюсь определить, есть ли способ обнаружить, когда элемент circle / g сталкивается или перекрывает любой другой 

        function circCollide(g) {
            node = g;
            nodeBox = g.getBBox();
            nodeLeft = nodeBox.x;
            nodeRight = nodeBox.x + nodeBox.width;
            nodeTop = nodeBox.y;
            nodeBottom = nodeBox.y + nodeBox.height;

            d3.selectAll(g)
                .attr("fill", function() {
                    if (this !== node) {
                        otherBox = this.getBBox();

                        otherLeft = otherBox.x;
                        otherRight = otherBox.x + otherBox.width;
                        otherTop = otherBox.y;
                        otherBottom = otherBox.y + otherBox.height;

                        collideHoriz = nodeLeft < otherRight && nodeRight > otherLeft;
                        collideVert = nodeTop < otherBottom && nodeBottom > otherTop;

                        if ( collideHoriz && collideVert) {
                            return "tomato";
                        } else {
                            return "none"
                        }

                    } else {
                        return "none";
                    }
                });
        }
}

Прямо сейчас я получаю следующую ошибку ("Uncaught TypeError: g.getBBox - это не функция ") Как я могу это исправить и заставить мою систему обнаружения столкновений работать

1 Ответ

0 голосов
/ 12 февраля 2020

g содержит выбор d3, тогда как getBBox - это функция, связанная с узлом DOM .

Доступ к узлу DOM возможен из выбора d3 с помощью selection.node function.

Попробуйте следующее: 

nodeBox = g.node().getBBox();

При этом вы можете использовать getBoundingClientRect вместо getBBox, чтобы получить точные значения (например, принимая преобразования в учетную запись); c .F. статья, указанная выше для деталей.

...