1

I am having trouble updating my timeline after I switch time interval by zooming in or out. The old data points remain on my chart (timeline). I have tried adding .remove() after .filter() but it didn't work. Would appreciate any kind advice. Thanks.

    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) + ')';
            }
        });
Nik Ng
  • 31
  • 5
  • You're not binding any new data to your points, so no exit selection is computed. How do you determine which points to remove? – Lars Kotthoff Sep 21 '14 at 11:38
  • how do i bind data to a point? could you give me a simple example? thanks. – Nik Ng Sep 21 '14 at 11:41
  • See e.g. [this tutorial](http://bost.ocks.org/mike/circles/). – Lars Kotthoff Sep 21 '14 at 11:42
  • is there a way to remove old data points without binding? – Nik Ng Sep 21 '14 at 11:43
  • Well yes, you can select any element(s) and just call `.remove()` on them. – Lars Kotthoff Sep 21 '14 at 11:46
  • thanks lars. but when i did that svg.selectAll('.element').remove(), there isn't any data point on my timeline. where can i put it so that before the new elements get created, i can clear off the old ones? – Nik Ng Sep 21 '14 at 11:51
  • This is what you would usually do with data binding. If you want to remove everything before adding new points, just call the code before you add the new ponts. – Lars Kotthoff Sep 21 '14 at 11:53
  • // create the elements based on the data provided var elem = svg.selectAll() .data(data) .enter() .append('g') .attr('class', 'element') .attr('transform', function (d) { return 'translate(' + xScale(d.date) + ', ' + yScale(d.Ranking) + ')'; }); – Nik Ng Sep 21 '14 at 11:55
  • I have added this at the top. Does that mean I can run elem.remove() to clear the old data points? – Nik Ng Sep 21 '14 at 11:56
  • can i use filter() and remove() together? – Nik Ng Sep 21 '14 at 12:02
  • You should be able to use `elem.exit().remove()`. – Lars Kotthoff Sep 21 '14 at 12:05
  • lars, thanks so much. you have been a great help. i found one of your older replies - http://stackoverflow.com/questions/22252174/show-hide-layers-in-d3-js - really helpful and have taken your suggestion there. – Nik Ng Sep 21 '14 at 13:15
  • basically i implemented if...else... conditions to check if the time interval is hours/days/weeks/months, if not set the visibility to hidden. i understand that this will involve a lot of redundant codes but as i am in a rush to submit a prototype to my supervisor, it's my way out. :) – Nik Ng Sep 21 '14 at 13:18

1 Answers1

0
        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');
Nik Ng
  • 31
  • 5