按值更改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');
            },
          },

根据我的代码，有三个点（第一个点-红色，第二个点-红色，第三个点-绿色）。是最初显示正确，但缩小后第3点颜色变为红色。