Q:

How to change line interpolation dynamically

How do I change the line interpolation dynamically with D3.js?
I.e. why does the 'Toggle' button on my D3.js example below not update the interpolation, and how do I fix it?
jsfiddle
<!DOCTYPE html>
<head>
    <script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
    <style>
        svg {width: 200px; height: 200px; border: 1px solid gray;}
       .line { fill: none;  stroke: steelblue;  stroke-width: 2;}
    </style>

</head>
<body>
    <button id="toggle">Toggle</button><br/>
    <svg></svg>
</body>

<script type="text/javascript">

document.getElementById('toggle').onclick=function(){
    if (chart.interpolate === 'basis') {
        chart.interpolate = 'linear';
    } else {
        chart.interpolate = 'basis';
    }
    chart.render();
};

function Chart() {
    this.svg = d3.select('svg');

    this.points = [{x:0, y:60}, {x:50, y:110}, {x:90, y:70}, {x:140, y:100}];

    this.interpolate = 'basis';

    this.line = d3.svg.line()
                  .x(function(d){return d.x;})
                  .y(function(d){return d.y;})
                  .interpolate(this.interpolate);

    this.render = function (container) {
        this.svg.append('path')
            .attr('d', this.line(this.points))
            .attr('class', 'line');
    };
}

chart = new Chart();
chart.render("#chart");

</script>
</html>

A:

The problem is that the line is not recreated or updated inside the render function and so it keeps the old interpolate value.
function Chart() {
    this.svg = d3.select('svg');

    this.points = [{x:0, y:60}, {x:50, y:110}, {x:90, y:70}, {x:140, y:100}];

    this.interpolate = 'basis';

    this.line = d3.svg.line()
                  .x(function(d){return d.x;})
                  .y(function(d){return d.y;})
                  .interpolate(this.interpolate);

    this.render = function (container) {

        this.svg.selectAll('path.line').remove()

        // update the line with the new interpolate value
        this.line.interpolate(this.interpolate);

        this.svg.append('path')
            .attr('d', this.line(this.points))
            .attr('class', 'line');
    };
}

Here it is in action on jsfiddle

