在模式关闭时重置/清除获取的数据答案

【问题标题】：Reset/clear fetched data on modal close在模式关闭时重置/清除获取的数据
【发布时间】：2019-08-22 02:42:30
【问题描述】：

我有一个模式，它在文章获得的视图上显示 d3 折线图。当您查看第一个图表时没关系。但是，当查看另一篇文章的数据时，之前的数据仍然存在，然后与新数据重叠。每次查看不同的文章时，如何重置模式上的数据？

HTML：

       <tr>
         {% get_statistics "article_loads" article as load_stats %}
         {% get_statistics "clicks" article as click_stats %}
             <td>{{ article.title }}</td>
             <td data-toggle="modal" data-target="#loadHits" data-id="{{ load_stats.hash_key }}">{{ load_stats.total_hits }} hits</td>
             <td>{{ click_stats.total_hits }} hits</td>
             </tr>
         {% endfor %}

    {% for article in articles %}
    {% get_statistics "article_loads" article as load_stats %}
    <div id="loadHits" data-id="{{load_stats.hash_key}}" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
         aria-labelledby="myLargeModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <svg class="line" id="line">
                <svg class="lc"></svg>
            </svg>
        </div>
      </div>
    </div>
    {% endfor %}

Javascript：

$("#loadHits").on('shown.bs.modal', function(e){
const baseUrl = 'http://localhost:7000/search/api/content_date_aggs/?hash_key=';
let queryStr = $(e.relatedTarget).data('id'),
    fetchUrl = baseUrl + queryStr;
console.log(queryStr);
//Retrieve data from API
fetch(fetchUrl)
    .then(function (response) {
        return response.json();
    })
    .then(function (data) {
        var parsedData = formatData(data);
        createLineGraph(parsedData);

    })
    .catch((err) => {
        console.log(err);
    })
    .finally();
});

我尝试过其他解决方案来重置模态表单数据，但这些是在 HTML 上找到的数据，我的数据仅在 Javascript 中传递。

我希望模态仅显示当前文章的数据，而不是重叠查看的所有文章的所有数据。

【问题讨论】：

标签： javascript jquery d3.js bootstrap-modal

【解决方案1】：

原来问题出在我的 createLineGraph 函数上，因为它每次都会生成并附加一个新图形。通过添加这行代码在生成新图之前删除之前的图来解决它：

const lc = d3.select('.line')
    .attr("width", svgWidth)
    .attr("height", svgHeight)
    .style("margin-left", '6%');

d3.selectAll(".line > *").remove();

【讨论】：