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

Question

I am following a d3 sample on hierarchical edge bundling - http://mbostock.github.io/d3/talk/20111116/bundle.html

What I am only interested in is, how may I incorporate tension functionality in the above sample in the simplest way possible on top of the following example (its code is here):

I've studied the code @ the 1st link but cannot determine which parts of the code attribute to the desired functionality. @ the 2nd link however, I know the following code may be involved / altered. Please guide me along.

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

From the source code of the example in the 1st link:

There needs to be an input on the page

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

When the view is initialized, it subscribes to input change events and updates the tension param accordingly:

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

The other thing that's needed (which the 1st example does, but with different variable names) redraw all the paths based on the new value, from within the input change handler. In your case, it's probably like this (maybe not totally right; you have to try it):

link.attr("d", line);

Answer 2

line.tension(this.value / 100) will not work in d3.v4. It will throw an error saying

line.tension is not a function

What you need to do is this:

Put an input tag as meetamit suggested,

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

then in your

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

add the following code:

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