如何在D3.js中动态翻译SVG组？

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 + ")");});

OR

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

请找到我的笔here。

非常感谢您！

Answer 1

好..解决了！对于每个有兴趣或遇到相同麻烦的人：

我的上一次尝试几乎是正确的，但是我无法通过.style(...)进行转换。我必须像这样使用.attr(...)：

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