Изменение цвета eventDrops (d3.js) по значению работает неправильно

Question

Я пытаюсь изменить цвет eventDrops по значению данных. Сначала он работает идеально, но цвет точек не отображается правильно, когда я увеличивал график.

    <link href="https://unpkg.com/event-drops/dist/style.css" rel="stylesheet" />
    <script src="https://unpkg.com/d3"></script>
    <script src="https://unpkg.com/event-drops"></script>

    const chartData = [{
          name: "admin-on-rest",
            data: [
              { date: new Date('03/02/2018 6:55:11 PM'),
                value: 500
              },
              { date: new Date('03/03/2018 6:55:11 PM'),
                value: 400
              },
              { date: new Date('03/04/2018 6:55:11 PM'),
                value: 800
              },
            ]
        }];




    drop: {
            color: (d, index) => d.value > 500 ? 'green' : 'red',
            date: d => new Date(d.date),
            onMouseOver: data => {
                tooltip
                    .transition()
                    .duration(200)
                    .style('opacity', 1)
                    .style('pointer-events', 'auto');

                tooltip
                    .html(
                        `
                        <div class="d-flex">
                          <p>Price</p><p>${data.value}</p>
                        </div>
                    `
                    )
                    .style('left', `${d3.event.pageX - 30}px`)
                    .style('top', `${d3.event.pageY + 20}px`);
            },
            onMouseOut: () => {
                tooltip
                    .transition()
                    .duration(500)
                    .style('opacity', 0)
                    .style('pointer-events', 'none');
            },
          },

Согласно моему коду, есть три точки (1-я точка - красная, 2-я точка - красная, 3-я)точка - зеленая). Да Сначала он отображался правильно, но цвет 3-й точки изменился на красный при уменьшении.