Reset Button for NVD3 Parallel Coordinate Plot

Question

I'm trying to add a reset button for my NVD3 parallel coordinate plot, so that the plot reverts to how it first appears when the page loads. Unfortunately the solutions I've found so far in various similar examples are unsuccessful. Any advice?

<div id="chart2" class="chart">
    
    <svg></svg>
</div>

<div id="option">
    <input name="updateButton" 
                 type="button" 
                value="Reset" 
                onclick="removeall()">
</div>

<script>

function removeall(){
    d3.select("chart2").select("svg").Reset;
}

d3.csv("data/paralleldata.csv", function (data) {

    visualisedata2(data)
});

function visualisedata2(data){
    var chart;
    nv.addGraph(function() {

       var width = 1000, height = 600;
        chart = nv.models.parallelCoordinates()
            .dimensions(["mission_num","sessiontime","%_sessions","BR_1","BR_2","CH","CC","SV","RG","onlineitems","offlineitems"])
            .width(width).height(height);;

        //console.log(data)

        d3.select('#chart2 svg')
                .datum(data)
                .call(chart)
                .style({ 'width': width, 'height':height});

        nv.utils.windowResize(chart.update);

        return chart;
    });

    }

Thanks in advance

Answer 1

The simplest method is probably to clear the chart and redraw (you seemed to possibly be trying this with the removeAll function above.

<div id="chart2" class="chart">
    <svg></svg>
</div>

<button id="update" onclick="update()">Update</button>

<script>

  // Where chart is being drawn
  var chartContainer = '#chart2 svg';

  // Wraps addGraph
  function draw() {
      nv.addGraph(function () {
          // YOUR GRAPH CODE HERE
      });
  }

  // Updates chart to original state    
  function update() {
      // Clear the chart html
      d3.select(chartContainer).html('');
      // Redraw the chart
      draw();
  }

  // Make sure to draw the chart the first time when the page loads    
  draw();

</script>

This plunk shows it in action for a stackedAreaChart, though you should be able to just replace the nv.addGraph function contents with your own.