Question

我尝试实现此目的：选择文件后，在选择下拉列表中显示它们。

Per this thread，我创建了listAvailableCSV1（）。但是，它仅适用于第一次选择操作。对于其他选择，旧数据不会被替换。我的观察是，一旦一个职位被使用，它就不会发生变化。例如：

选择1：FileA - ＆gt;显示：FileA

选择2：FileB - ＆gt;显示：FileA

或

选择1：FileA - ＆gt;显示：FileA

选择2：FileB和文件C - ＆gt;显示：FileA和File C

<!DOCTYPE html>
<html>
<head>
    <script src="src/d3/d3.min.js"></script>
</head>


<body>

<input type="file" id="csvSelect" multiple>
<select id = "csvToAnalyze"></select>

<script>
    function listAvailableCSV1 (dropDown, csvFiles) {

        var options = dropDown.selectAll("option").data(csvFiles);
        options.exit().remove();
        options.enter().append("option").text(function(d) { return d; });

    }


    var csvSelect = document.getElementById("csvSelect");
    csvSelect.addEventListener('change', function(event) {  
        files = event.target.files;

        csvFiles = [];      
        for(var i = 0; i < files.length; i++) {
            csvFiles.push(files[i].name);
        }

        listAvailableCSV(d3.select("#csvToAnalyze"), csvFiles);
    });
</script>
</body>
</html>

我可以通过listAvailableCSV2（）实现我的目标。但我不明白listAvailableCSV1（）的错误。为什么exit（）。remove（）无效？ listAvailableCSV2（）是D3的有效方式吗？谢谢！

function listAvailableCSV2 (dropDown, csvFiles) {

    dropDown.selectAll("option").remove();
    var options = dropDown.selectAll("option").data(csvFiles);
    options.enter().append("option").text(function(d) { return d; });       

}

我找到了document和此discussion的其他解决方案。

function listAvailableCSV3 (dropDown, csvFiles) {
    var options = dropDown.selectAll("div").data(csvFiles);     
    options.enter().append("div").merge(options).text(function(d) { return d; });
    options.exit().remove();
}

以下问题是我们需要采取额外措施来完成更新+退出+输入。

D3 - exit（）和remove（）不删除旧数据

0 个答案: