Обработка событий для переключения видимости родственного элемента SVG?

Я пытаюсь понять, как переключить видимость родного брата мыши.

У меня есть "компонент окна событий", состоящий из group SVG содержащей circle, rect и text элемент. Мне нужна функциональность, чтобы щелчок по красному кругу (показанному на рисунке ниже) переключает видимость желтого прямоугольника. У меня есть событие click, прикрепленное к circle и вы можете переключать его "состояние", но я не знаю, как получить доступ к его родному брату, rect.

Это, наверное, довольно просто, но я не нахожу хороших примеров. Я не хочу транслировать общее событие (если мне это не нужно), так как будет множество "компонентов ящика событий". Наверное, я могу передать некоторый "id", поэтому он обрабатывается только соответствующим rect (?).

Существует ли стандартный способ d3 для такого рода вещей? Я исхожу из обект-ориентированного фона ActionScript, где доступ к родителям и братьям и сестрам довольно прост.

Дополнительный вопрос... Правильно ли я обрабатываю визуальное "состояние" в коде ниже? Я добавляю и удаляю классы для каждого "состояния" для красного круга. Это работает, но кажется немного неуклюжим. Есть ли более стандартный способ сделать это?

     function eventClick(d, i) {
        if (d3.event.altKey == false) {
            if (d.state == false) {
                d3.select(this)
                    .classed("event-box", false)
                    .classed("event-box-hilite", true);
                d.state = true;
            } else {
                d3.select(this)
                    .classed("event-box", true)
                    .classed("event-box-hilite", false);
                d.state = false;
            }

        }
    }