在多折线D3图表上添加工具提示

Question

我正在尝试在多折线d3折线图上添加工具提示，但我想知道如何将data添加到工具提示中。我正在努力实现类似http://bl.ocks.org/wdickerson/64535aff478e8a9fd9d9facccfef8929的目标。这是代码

var data = coordsIntellectual.map(function (d) {
    return {
        date: parseDate(d[0]),
        value: d[1],
    };
})

var svg = d3
    .select('#minigraphs')
    .append('svg')
    .attr('width', '60vw')
    .attr('height', '300')

svg
    .append('path')
    .datum(data)
    .attr('d', line)
    .attr('stroke', '#FFB545')

tipBox = svg
    .append('rect')
    .attr('width', 200)
    .attr('height', 300)
    .attr('opacity', 0)
    .on('mousemove', drawTooltip)
    .on('mouseout', removeTooltip);

const tooltip = d3.select('#tooltip');
const tooltipLine = svg.append('line');

function removeTooltip() {
    if (tooltip) tooltip.style('display', 'none');
    if (tooltipLine) tooltipLine.attr('stroke', 'none');
}

function drawTooltip() {

    tooltipLine.attr('stroke', 'black').attr('x1', x(d[0])).attr('x2', x(d[0])).attr('y1', 0).attr('y2', 100);

    tooltip
        .html(d[1])
        .style('display', 'block')
        .style('left', d3.event.pageX + 20)
        .style('top', d3.event.pageY - 20)
        .selectAll()
        .data(data)
        .enter()
        .append('div');
}

和我的HTML拥有

<div id="tooltip" style="position: absolute; background-color: lightgray; padding: 5px;"></div>