如何动态翻译 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 + ")");});

或

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})');