Как динамически перевести SVG-группу в D3.js?

Question

Я работаю над пузырьковой диаграммой, используя d3.Теперь под текстовыми элементами должна быть стрелка в виде графического актива.Я хочу добиться динамического позиционирования группы стрелок с определенным промежутком между собой и последним текстом:

Я ужепопытался позиционировать его с процентным значением:

arr.append("g").attr("class", "arrow").style('transform', 'translate(-1%, 5%)');

, что не дает желаемого эффекта.

Я также пытался вставить динамическое значение на основерадиус кругов, который просто не работает, и я не знаю почему:

arr.append("g") .attr("class", "arrow") .attr('transform', function(d, i) { return "translate(20," + d.r / 2 + ")");});

ИЛИ

arr.append("g") .attr("class", "arrow") .style('transform', (d, i) => 'translate(0, ${d.r/2})');

Пожалуйста, найдите мою ручку здесь .

Большое спасибо заранее!

Answer 1

Ладно .. решил это! Для всех, кто заинтересован или имеет такие же проблемы:

Моя последняя попытка была почти правильной, но я не смог преобразовать через .style(...). Я должен был использовать .attr(...) так:

arr.append("g") .attr("class", "arrow") .attr('transform', (d, i) => translate(0, ${d.r/2})');