Question

我在Angular 2应用程序中使用d3绘制图表。现在我有一个多系列折线图，所以当我将鼠标悬停在其上时，我试图在每一行添加工具提示。垂直位置。

this.querySelector is not a function

console.log(this.yScale.invert(pos.y).toFixed(2));

现在它显示了每行有圆圈的垂直线，但它没有显示值（工具提示）。控制台日志中显示以下错误。

{SPACE}

控制台日志上方在鼠标悬停事件中正确打印Y轴值。

任何建议。

谢谢！

Answer 1

我根据您的要求在多系列折线图上创建了工具提示，但它运行良好。

您需要对代码进行一些更改，以便从下面的示例链接中设置工具提示的位置

参见示例

Multi Series Line Chart with Tooltip

Answer 2

你可以这样做

d3.selectAll(".mouse-per-line")
      .attr("transform", (d, i, f) => {
        console.log(i);
        let beginning = 0,
          end = d3.select(lines[i]).node().getTotalLength(),
          target,
          pos;

        while (true) {
          target = Math.floor((beginning + end) / 2);
          pos = d3.select(lines[i]).node().getPointAtLength(target);
          if ((target === end || target === beginning) && pos.x !== mouse[0]) {
            break;
          }
          if (pos.x > mouse[0])      end = target;
          else if (pos.x < mouse[0]) beginning = target;
          else break; //position found
        }
        console.log(this.yScale.invert(pos.y).toFixed(2));

        // update the text with y value
        d3.select(f[i]).select('text') // **Error this.querySelector is not a function
          .text(this.yScale.invert(pos.y).toFixed(2));

        // return position
        return "translate(" + mouse[0] + "," + pos.y + ")";
      });

d3：鼠标悬停事件时每行的多系列折线图上的工具提示

2 个答案: