javascript - NVD3 平行坐标图的重置按钮

Question

我正在尝试为 NVD3 平行坐标图添加重置按钮，以便该图恢复到页面加载时首次显示的状态。不幸的是，到目前为止我在各种类似示例中找到的解决方案都不成功。有什么建议吗？

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

    }

提前致谢

Answer 1

最简单的方法可能是清除图表并重新绘制(您似乎可能正在使用上面的 removeAll 函数尝试此操作。

<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显示了 stackedAreaChart 的实际操作，不过您应该能够将 nv.addGraph 函数内容替换为您自己的函数内容。