小编Jam*_*Lim的帖子

我对 D3 很陌生，只是将以下工具提示合并到我的应用程序中。我有一个单折线图和一个多折线图。

单行：https : //bl.ocks.org/alandunning/cfb7dcd7951826b9eacd54f0647f48d3

Multi Line：带有鼠标悬停工具提示的多系列折线图

如您所见，这两个工具提示的功能是不同的。Single Line 工具提示从每个数据点跳出，而 Multi Line 则继续跟随图表路径。我想更改多行功能以模仿单行工具提示的工作方式。

任何帮助将不胜感激。如果我需要提供更多信息，请告诉我。另请注意，我正在处理的数据是一组数组

下面是我的代码：

单线图：

let g = svg.append('g');
    g.append("path")
    .datum(this.dataObj)
    .attr("class",`line-${this.yAxisData} line`)
    .attr('d', line)
    .attr("stroke",`${this.color(this.dataObj.label)}`)
    .attr("fill",'none')
    .attr("transform",       `translate(${this.margin.left},${this.margin.top})`);

var focus = g.append("g")
    .attr("class", "focus")
    .style("display", "none");

    focus.append("line")
    .datum(this.dataObj)
    .attr("class", "x-hover-line hover-line")
    .attr("transform",`translate(${this.margin.left},${this.margin.top})`)
    .attr("stroke",`${this.color(this.dataObj.label)}`)
    .attr("y1", 0)
    .attr("y2", height);

    focus.append("circle")
    .datum(this.dataObj)
    .attr("transform",`translate(${this.margin.left},${this.margin.top})`)
    .attr("stroke",`${this.color(this.dataObj.label)}`)
    .attr("r", 7.5);

    focus.append("text")
    .attr("class","linetip")
    .attr("x", 40)
    .attr("dy", "0.5em");

    svg.append("rect")
    .attr("transform", `translate(${this.margin.left},${this.margin.top})`)
    .attr("class", "overlay")
    .attr("width", width)
    .attr("height", height)
    .on("mouseover", function() { focus.style("display", null); })
    .on("mouseout", …