在哪里放置 .remove() 来清除以前的数据点？答案

【问题标题】：Where to put .remove() to clear previous data points?在哪里放置 .remove() 来清除以前的数据点？
【发布时间】：2014-09-21 11:20:30
【问题描述】：

通过放大或缩小切换时间间隔后，我无法更新时间线。旧数据点保留在我的图表（时间轴）上。我曾尝试在 .filter() 之后添加 .remove() 但它没有用。将不胜感激任何善意的建议。谢谢。

    function update() {
        // re-position individual elements
        svg.selectAll('.element')
        //.remove()

        .filter(function(d) { 
            if (interval == 'hours') {
                return d.Interval == 'hour'; 
            }
            else if (interval == 'days') {
                return d.Interval == 'day'; 
            }
            else if (interval == 'weeks') {
                return d.Interval == 'week'; 
            }
            else if (interval == 'months') {
                return d.Interval == 'month'; 
            }
        })

        .attr('transform', function (d) {
            //return 'translate(' + xScale(d.date) + ', ' + yScale(d.Ranking) + ')';

            if (interval == 'hours') {
                return 'translate(' + xHoursScale(d.date) + ', ' + yScale(d.Ranking) + ')';
            }
            if (interval == 'days') {
                return 'translate(' + xDaysScale(d.date) + ', ' + yScale(d.Ranking) + ')';
            }
            if (interval == 'weeks') {
                return 'translate(' + xWeeksScale(d.date) + ', ' + yScale(d.Ranking) + ')';
            }
            if (interval == 'months') {
                return 'translate(' + xMonthsScale(d.date) + ', ' + yScale(d.Ranking) + ')';
            }
        });

【问题讨论】：

您没有将任何新数据绑定到您的点，因此不会计算退出选择。您如何确定要删除哪些点？
如何将数据绑定到一个点？你能给我一个简单的例子吗？谢谢。
参见例如this tutorial.
有没有办法在不绑定的情况下删除旧数据点？
嗯，是的，您可以选择任何元素，然后在它们上调用.remove()。

标签： d3.js

【解决方案1】：

        svg.selectAll('.element')
        .filter(function(d) { 
            if (interval != 'hours') {
                return d.Interval == 'hour'; 
            }
        })
        .attr('visibility', 'hidden');

        svg.selectAll('.element')
        .filter(function(d) { 
            if (interval != 'days') {
                return d.Interval == 'day'; 
            }
        })
        .attr('visibility', 'hidden');

        svg.selectAll('.element')
        .filter(function(d) { 
            if (interval != 'weeks') {
                return d.Interval == 'week'; 
            }
        })
        .attr('visibility', 'hidden');

        svg.selectAll('.element')
        .filter(function(d) { 
            if (interval != 'months') {
                return d.Interval == 'month'; 
            }
        })
        .attr('visibility', 'hidden');

        svg.selectAll('.element')
        .filter(function(d) { 
            if (interval == 'hours') {
                return d.Interval == 'hour'; 
            }
        })
        .attr('visibility', 'visible');

        svg.selectAll('.element')
        .filter(function(d) { 
            if (interval == 'days') {
                return d.Interval == 'day'; 
            }
        })
        .attr('visibility', 'visible');

        svg.selectAll('.element')
        .filter(function(d) { 
            if (interval == 'weeks') {
                return d.Interval == 'week'; 
            }
        })
        .attr('visibility', 'visible');

        svg.selectAll('.element')
        .filter(function(d) { 
            if (interval == 'months') {
                return d.Interval == 'month'; 
            }
        })
        .attr('visibility', 'visible');

【讨论】：