marmelab/EventDrops

Drop colors shift after zoom or scroll

DonClaveau3 opened this issue · 2 comments

What you were expecting:
When a drop's color is overridden such that drops in the same row have multiple colors, the drop colors should persist regardless of zooming or dragging.

What happened instead:
Zooming or dragging some drops out of view seems to shift the colors to the wrong drops.

Steps to reproduce:
Give drops in a row multiple colors
Zoom or scroll the right most drop out of view
Note that the colors shift left

Related code:

<script type="text/javascript">
    var global;
    $(document).ready(function () {
        console.log("ready!");
       
        const chart = eventDrops({
            drop: {
                date: d => new Date(d.date),
                color: d => d.color                    
            }
            });
        const repositoriesData = [
            {
                name: 'System1',
                data: [{ date: new Date('2020/03/15 14:21:31'), color: 'red' }
                    , { date: new Date('2020/02/15 14:21:31'), color: 'grey' }
                    , { date: new Date('2020/01/15 14:21:31'), color: 'grey' }
                    , { date: new Date('2019/05/15 14:21:31'), color: 'grey' }
                    , { date: new Date('2018/03/15 14:21:31'), color: 'grey' }
                    ],
            }
        ];

        if (global === undefined) { global = window; } //Unpkg workaround

        d3
            .select('#eventdrops-demo')
            .data([repositoriesData])
            .call(chart);
    });
</script>

Other information:
With the default scale:
image

After dragging the right most drop out of range:
image

Environment

  • D3 version 5.15.0
  • EventDrops version 1.3.0
  • Browser: Any (verified in Chrome, Edge)

Realized after submitting that this duplicates #267. I can try using master as suggested there. Are there plans to release a new version soon?

@DonClaveau3 I have asked the maintainers to release a new version, but so far I don't think there is.