D3 событие click с несколькими svg на одной странице

Question

У меня есть веб-страница с двумя svg, вставленными через D3.js. Я могу добавить события кликов в svg, с которыми я непосредственно присоединяюсь к телу. Однако у меня есть еще один «плавающий» div над первым svg, где я добавляю другой svg. При попытке добавить события клика они не срабатывают.

Я также попытался отслеживать положение мыши, но это работало только в svg, прикрепленном к телу.

Есть ли способ назначить прослушиватели кликов rect, которые находятся внутри «плавающего» div?

У меня есть скрипку здесь: JsFiddle

Я пытаюсь, чтобы изменить цвет от черного к белому и наоборот, при нажатии на rect в верхней части страницы. Как это возможно?

Я также попробовал подход Jquery ..

Обратите внимание, что при перемещении мыши на второй SVG, вы можете фактически Drap и увеличения в первом, что нежелательное поведение, тоже.

Answer 1

Настоящий обновленный рабочий JsFiddle, который использует переключение классов для достижения желаемого эффекта. Соответствующая часть JS здесь:

d3.selectAll(".controlBarButton") 
    .classed("white",function(d,i){return rule[i] === "none"}) 
    .on("click",function(){ 
     d3.select(this).classed("white",!d3.select(this).classed("white")); 
    }); 

Я также закомментированы предыдущие настройки стиля к белому по линиям 68 и 79. Я добавленные правила CSS для настройки черно-белой заливки по переключению white класса и удалены pointer-events: none CSS которое блокирует все события мыши на панели управления.