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

Question

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

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

我已经研究了第一个 link 的代码，但无法确定代码的哪些部分具有所需的功能。 @ the 2nd link 但是，我知道可能涉及/更改了以下代码。请指导我。

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

来自第一个例子的源代码link:

页面需要输入

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

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

How to implement variable tension functionality, D3 hierarchical edge bundling?

javascript

svg

d3.js

bundle-layout