d3.js动态生成带有弯曲文本的句子地图

Question

我有以下d3.js fiddle以波浪线打印句子。

正如你所看到的那样，它们彼此重叠打印。我怎样才能达到以下效果呢？他们最好将它们从上到下（有一些随机性和波浪状）适合它们？

关键当然是在行：

    .append("path").attr("d", "M 10,90 Q 100,15 200,70 Q 340,140 400,30");

但我怎样才能生成这些字符串来做我想要的呢？

编辑：抱歉，只是修正了错误的js小提琴链接！

Answer 1

您可以设置transform属性以移动您追加的元素的坐标系。这样，您可以将每个新元素按随机数量进行偏移：

svg.append("g")
    .attr("transform", "translate(" + (Math.random() * 50) + "," + (i * (50 + Math.random() * 100)) + ")")

完整演示here。您可能需要调整数字以获得您想要的结果。