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 函数内容。

NVD3 平行坐标图的重置按钮

Reset Button for NVD3 Parallel Coordinate Plot

javascript

d3.js

nvd3.js