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

Question

我正在关注分层边缘捆绑上的d3示例 - http://mbostock.github.io/d3/talk/20111116/bundle.html

我唯一感兴趣的是，如何在以下示例的基础上以最简单的方式在上面的示例中加入张力函数（其代码为here）：

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

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

Answer 1

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

页面上需要输入

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

初始化视图时，它会订阅输入更改事件并相应地更新tension参数：

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

需要的另一件事（第一个例子，但具有不同的变量名称）从输入变更处理程序中重新绘制基于新值的所有路径。在你的情况下，它可能是这样的（也许不完全正确;你必须尝试）：

link.attr("d", line);

Answer 2

line.tension(this.value / 100)无法在 d3.v4 中使用。它会抛出一个错误

line.tension is not a function

您需要做的是：

将输入标记设为 meetamit 建议

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

然后在你的

d3.json("flare.json", function (error, classes) {}功能

添加以下代码：

d3.select("input[type=range]").on("change", function () { line.curve(d3.curveBundle.beta(this.value / 100)); link.attr("d", line); });