Question

请使用新的数据集更新网页的正确方法是什么。我有一个带有引导导航栏和下拉菜单的网页，我想用它来选择数据集。网页首次打开时，它将自动加载这些数据集之一。问题在于，当网页加载完全相同的数据集时（这次是从下拉菜单中），它崩溃了。该图表是一个带有很多标记的传单图表（大约300K，如果没有几个ppl的帮助，这是不可能的！），但它工作正常。但是，如前所述，再次推送相同的数据时，浏览器阻塞（在“ layer.on add”回调过程中对我来说看起来很崩溃）并崩溃。

我认为（这是一个疯狂的猜测），这与传单有关，也许旧数据仍然存在于某处，并且没有被丢弃，但是我真的不知道。

那与chrome有关，但其他浏览器也是如此。我的代码概述如下所示。（注意：在摘要中，启动时不会加载任何内容，您将不得不使用菜单）

尽管刷新浏览器仍然可以正常工作。

如何清除网页上的所有内容并重新开始（例如重新加载），但要传递用户定义的参数。我希望它将以这种方式工作...

换句话说，我想每次都删除稍后添加到网页的所有元素（以及从内存中删除关联的对象），然后在下拉列表中传入一些参数菜单。

function dispatcher(x){
    console.log('you clicked '+ x)
    cfg = config()
    run(cfg)
}

function config(){
    var ini = [

        {name: 'dataset-1', data:'some data 1'},
        {name: 'dataset-2', data:'some data 2'},

    ];
    var out = d3.map(ini, function (d) {return d.name;});
    return out
}

function run(config) {
    renderChart(config)
}


function renderChart(config) {
    console.log('Doing map')
    var mapStage = staging(config);
    var map = mapStage.map;
    console.log("doing some stuff with map and config")
}

function staging(){
    try {
        mapStage.map.off;
        mapStage.map.remove();
        console.log("map removed")
    }
    catch(error)
    {
        //do nothing
    }

    var map = L.map('mymap').setView([51.508530, -0.055], 12);
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

    mapStage = []
    mapStage.map = map

    return mapStage
}

<!DOCTYPE html>
<html>
<head>
    <title>Simple Leaflet Map</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"/>
</head>
<!--jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- d3 -->
<script src='https://d3js.org/d3.v4.min.js'></script>

<!-- leaflet -->
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"> </script>

<script src="./example.js"> </script>

<body>
<input id="refresh" type="button" value="Refresh" onclick="renderChart();" />

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Title</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown" id="myDropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Select Data <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#" id = "dataset-1" onclick='dispatcher("dataset-1")'>Dataset 1</a></li>
                            <li><a href="#" id = "dataset-2" onclick='dispatcher("dataset-2")'>Dataset 2</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->

    </div>
</div>
<div id="mymap" style="width: 600px; height: 400px"></div>


</body>
</html>

更新网页上的数据（带有沉重的leaflet.js图表）

0 个答案:

更新网页上的数据（带有沉重的leaflet.js图表​​）

0 个答案:

更新网页上的数据（带有沉重的leaflet.js图表）