v5版本如何实现折线图和线图上的点的联动elementHeight效果

[defghy]

类似echarts的这个效果

g2移动到点上时，无法触发线的elementHeight

想使用自定义interaction，但是文档里面没看到应该怎么写

[defghy]

配置如下

      chart.options({
        encode: {
          x: d => new Date(d.time),
          y: 'difficulty',
          color: 'category',
        },
        axis: {
          x: {
            labelFormatter(d) {
              return moment(d).format('MM-DD HH')
            },
          },
          y: { title: '难度' },
        },
        children: [
          {
            type: 'line',
            legend: {
              color: { itemMarker: 'circle' },
            },
            encode: {
              shape: 'smooth',
            },
            interaction: {
              tooltip: {
                mount: 'body',
                position: 'right',
                bounding: {
                  x: 0 - chartRect.left,
                  y: 48 - chartRect.top,
                  width: document.body.clientWidth,
                  height: document.body.clientHeight - 48,
                },
              },
              elementHighlight: true,
            },
            state: {
              active: { lineWidth: 5 },
            },
          },
          {
            type: 'point',
            style: { fill: 'white', isTestPoint: 1 },
            tooltip: false,
          },
        ],
      })

思路是对每一个point进行事件监听，然后对线进行事件触发，但是没找到怎么关联点和线

const points = chart
          .getContext()
          .canvas.document.getElementsByClassName('element')
          .filter(item => item.markType === 'point' && item.attributes.isTestPoint)

        points.forEach(point => {
          point.addEventListener('mouseenter', function (evt) {
            chart.emit('element:highlight', {
              data: { data: { 
                   difficulty: point.__data__.key // 这里不知道怎么关联 
              } },
            });
          })
        })