Можно ли «щелкнуть», чтобы изменить атрибут для вложенной группы?

Question

У меня есть схема упаковки кругов, в которой многие из самых верхних кругов (листьев) имеют общие заголовки.

Я хотел бы добавить взаимодействие, которое выделяет каждый лист с общим заголовком, когда пользовательнажимает на любой лист.Так, например, если бы в этом наборе данных было 1000 листов, пользователь мог бы щелкнуть по любому листу с надписью «CD 19» и легко увидеть все другие листы «CD 19».

Я делаю это для себяназидание.У меня есть полуработающее решение.Я был бы признателен за любую помощь, указав мне в правильном направлении или любое объяснение, почему мое решение не работает.

вот мое наивное решение:

сгруппировать листья по имени, используя d3.nest и.object.

const nodes = packLayout(root).descendants()
const nameNest = d3.nest().key(d => d.data.name).object(nodes);

теперь nameNest возвращает массив объектов с тем же именем, когда ему передано имя в качестве ключа.

console.log(nameNest['CD 19']) // => Array(3)

, затем используйте .forEach (...)установить общий атрибут для каждого члена массива.

nameNest['CD 19'].forEach(item => item.r = 50)

это даст желаемый эффект.Все круги, обозначенные «CD 19», получают радиус 50. Но я хочу превратить этот фрагмент кода в функцию, а затем передать эту функцию в событие на моих кругах следующим образом:

const namez = d => nameNest[d.data.name]
                    .forEach(item => item.r = 50)
...

const circles = nodesEnter
       .append('circle')
       ...
       .on('click', d => namez(d));

это не работает.cosnole.log (d => namez (d)) возвращает неопределенное значение.

Однако, когда я снимаю .forEach (...) console.log (d => namez (d)) возвращает ожидаемый массив объектов с тем же именем, что и узел, по которому я щелкаю.Так почему я не могу использовать .forEach для изменения массива, возвращаемого namez (d) изнутри .on ()?

вот мой код: bl.ocks: круговая диаграмма упаковки с общим узломимена

Answer 1

Ваш код работает!Однако вы просто изменяете данные, а не фактические элементы SVG.

Для изменения окружностей их необходимо перекрасить.Например:

.on('click', d => {
    namez(d);
    circles.attr('r', d => d.r)
});

Вот обновленный код: https://bl.ocks.org/GerardoFurtado/raw/3caee8c936d1cb3b98cce0706d52d890/f1a38bf56af9a66f418cc08b55f04a64b3c4b494/