javascript - 如何实现可变张力功能，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">

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

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

需要做的另一件事(第一个示例所做的，但具有不同的变量名称)根据新值从输入更改处理程序中重绘所有路径。在你的情况下，它可能是这样的(也许不完全正确；你必须尝试一下):

link.attr("d", line);