d3工具提示栏，用于在Y轴上的鼠标悬停时提供多个折线图(提供的代码) [英] d3 tooltip bar for multi line chart on mouseover on Y Axis (code supplied)

问题描述

我正在尝试为多条折线图实现鼠标悬停时的工具提示. 我遵循了此示例中的代码，并尝试对其进行更改，以便看到X给定的Y值悬停线的值，但我无法使其正常工作.

I'm trying to implement a tooltip on mouseover for a multi line chart. I've followed the code from this example and tried to change it so that I see the X values of the lines for a given hovered Y value, but I'm not able to get it to work.

我的尝试可以在下面找到.

My attempt can be found below.

在我的实际实现中，我正在用Typescript编写，函数"getTotalLength()"和"getPointAtLength()"表示它们在属性Element上不存在.
另外，如果您可以在具有悬停的Y值的行上添加一个文本框，这对我有很大帮助！

In my actual implementation I'm writing in Typescript and the functions 'getTotalLength()' and 'getPointAtLength()' are saying they don't exist on property Element.
Also if you can add a text box at on the line that has the hovered Y value that'd help me a lot!

https://codesandbox.io/s/modest-minsky-hvsms?fontsize = 14&hidenavigation = 1& theme = dark

谢谢

推荐答案

因此，在仔细检查之后，我纠正了一些错误.

So after careful review there were several errors which I have corrected.

1. 您未为数据线的路径分配类别，因此，像这样添加它们时，需要为它们分配dataLine类别:

    svg
      .selectAll(".dataLine")
      .data(nestedData)
      .enter()
      .append("path")
      .attr("fill", "none")
      .attr("class", "dataLine")
      .attr("stroke", d => itemMap(d.key).color)
      .attr("stroke-width", d => itemMap(d.key).lineWeight)
      .attr("d", d =>
        d3
          .line()
          .x(d => x(d.xvalue))
          .y(d => y(d.yvalue))(d.values)
      );

1. 如上面的注释中所指出的，如果您打算使用箭头功能，请停止使用它.完成后，您的d3.mouse(this)开始工作.

您遵循的示例的路径是从左到右，而您的路径是从上到下.这需要对坐标进行几处更改才能使鼠标悬停线和圆与它们附近的文本值对齐，以正确对齐.正确的代码如下:

The example you followed had the paths from left to right, while yours is from top to bottom. This required several changes in terms of coordinates to get the alignment of the mouseover line and the circles with the text values near them to align properly. The correct code is as follows:

      .on("mousemove", function() {
        //@ts-ignore
        var mouse = d3.mouse(this);
        d3.select(".mouse-line").attr("d", () => {
          var d = "M" + plotWidth + "," + mouse[1];
          d += " " + 0 + "," + mouse[1];
          return d;
        });

        d3.selectAll(".mouse-per-line").attr("transform", function(d, i) {
          var yDepth = y.invert(mouse[1]);
          var bisect = d3.bisector(d => d.depth).right;
          var idy = bisect(d.values, yDepth);

          var beginning = 0;
          var end = lines[i].getTotalLength();
          var target = null;

          while (true) {
            target = Math.floor((beginning + end) / 2);
            var pos = lines[i].getPointAtLength(target);
            if (
              (target === end || target === beginning) &&
              pos.y !== mouse[1]
            ) {
              break;
            }
            if (pos.y > mouse[1]) {
              end = target;
            } else if (pos.y < mouse[1]) {
              beginning = target;
            } else {
              break;
            }
          }
          d3.select(this)
            .select("text")
            .text(x.invert(pos.x).toFixed(2));

          return "translate(" + pos.x + "," + mouse[1] + ")";
        });
      });

此处完全可用的代码和框.

这篇关于d3工具提示栏，用于在Y轴上的鼠标悬停时提供多个折线图(提供的代码)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！