D3.js 在svg路径上绘制加权圆

我有一组带有权重和标题的节点。 如何使用D3 js将这些数据渲染为具有以下条件的圆：

圆圈应放置在预定义的路径上（例如SVG格式的树）

圆圈不应该互相干扰

每个圆的半径应与其重量相关

在预定义路径（条件1）中有一个预定义的参考中心点，每个圆到该参考点的距离也由其权重决定。权重最大的节点应距离该参考点最近

圆圈应限制在一个框架内（宽度和高度）

是否有必要使用D3，或者只需在html5画布上使用算法即可

---

提前感谢

您可以用纯Javascript实现这一点。你介意分享到目前为止你拥有的代码吗？仍然没有代码。我认为使用D3会很容易。但仍然没有找到任何类似的示例。有关在路径上放置圆圈的信息，请参阅例如。关于根据数据调整圆的大小，请参见，例如，谢谢lars。那么无干涉绘图如何？我认为我们可以通过测试来检查：r1+r2<中心距离，如果这是错误的，则替换圆。对吗？