Javascript 如何实现可变张力功能，D3分层边缘捆绑？

我正在跟踪分层边缘捆绑的d3示例-

我唯一感兴趣的是，如何在下面的示例（其代码为）的基础上，以最简单的方式将张力功能合并到上述示例中：

我已经研究了第1个链接的代码，但无法确定代码的哪些部分属于所需的功能。@第二个链接，但是，我知道以下代码可能涉及/更改。请带我走

var line = d3.svg.line.radial()
                .interpolate("bundle")
                .tension(.85)
                .radius(function (d) {
                     return d.y;
                })      
                .angle(function (d) {
                     return d.x / 180 * Math.PI;
                });

---

从第一个链接中示例的源代码：

页面上需要有一个输入

<input style="position:relative;top:3px;" type="range" min="0" max="100" value="85">

需要做的另一件事（第一个示例就是这样做的，但是使用不同的变量名）是基于输入更改处理程序中的新值重新绘制所有路径。在您的情况下，可能是这样的（可能不是完全正确；您必须尝试）：

line.tension（this.value/100）

在d3.v4中不起作用。它会抛出一个错误

line.tension不是一个函数

您需要做的是：

将输入标记设置为meetamit建议

然后在你的

d3.json（“flare.json”，函数（错误，类）{}

function

添加以下代码：

d3.选择（“输入[类型=范围]”）。打开（“更改”，函数（）{
直线曲线（d3曲线bundle.beta（this.value/100））；
链接属性（“d”，行）；
})

谢谢，我们很快就会试用：）

d3.select("input[type=range]").on("change", function() {
  line.tension(this.value / 100);
  // more needed here (see below)
});

link.attr("d", line);