javascript - d3.js v4，我如何在鼠标悬停时有一条线跟随鼠标，但也有一个圆圈跟随路径？

Question

这是我的 js fiddle :https://jsfiddle.net/DerNalia/3wzLv9yg/1/

我一直在尝试从这里解释代码:Multiseries line chart with mouseover tooltip ，但我似乎无法让它工作。

这就是我目前所拥有的——它几乎是一个复制粘贴。

// append a g for all the mouse over nonsense
var mouseG = svg.append("g")
  .attr("class", "mouse-over-effects");

// this is the vertical line
mouseG.append("path")
  .attr("class", "mouse-line")
  .style("stroke", "black")
  .style("stroke-width", "1px")
  .style("opacity", "0");

// keep a reference to all our lines
var lines = document.getElementsByClassName('line');

// here's a g for each circle and text on the line
var mousePerLine = mouseG.selectAll('.mouse-per-line')
  .data(data)
  .enter()
  .append("g")
  .attr("class", "mouse-per-line");

// the circle
mousePerLine.append("circle")
  .attr("r", 7)
  .style("stroke", function(d) {
    return 'red';
  })
  .style("fill", "none")
  .style("stroke-width", "1px")
  .style("opacity", "0");

// the text
mousePerLine.append("text")
  .attr("transform", "translate(10,3)");

// rect to capture mouse movements
mouseG.append('svg:rect')
  .attr('width', width)
  .attr('height', height)
  .attr('fill', 'none')
  .attr('pointer-events', 'all')
  .on('mouseout', function() { // on mouse out hide line, circles and text
    d3.select(".mouse-line")
      .style("opacity", "0");
    d3.selectAll(".mouse-per-line circle")
      .style("opacity", "0");
    d3.selectAll(".mouse-per-line text")
      .style("opacity", "0");
  })
  .on('mouseover', function() { // on mouse in show line, circles and text
    d3.select(".mouse-line")
      .style("opacity", "1");
    d3.selectAll(".mouse-per-line circle")
      .style("opacity", "1");
    d3.selectAll(".mouse-per-line text")
      .style("opacity", "1");
  })
  .on('mousemove', function() { // mouse moving over canvas
    var mouse = d3.mouse(this);

    // move the vertical line
    d3.select(".mouse-line")
      .attr("d", function() {
        var d = "M" + mouse[0] + "," + height;
        d += " " + mouse[0] + "," + 0;
        return d;
      });

    // position the circle and text
    d3.selectAll(".mouse-per-line")
      .attr("transform", function(d, i) {

        console.log(width/mouse[0])
        console.log(mouse[1]);
        var xDate = x.invert(mouse[0]),
            bisect = d3.bisector(function(d) { return d.x; }).right;
            idx = bisect(d.values, xDate);

        // since we are use curve fitting we can't relay on finding the points like I had done in my last answer
        // this conducts a search using some SVG path functions
        // to find the correct position on the line
        // from http://bl.ocks.org/duopixel/3824661
        var beginning = 0,
            end = lines[i].getTotalLength(),
            target = null;

        while (true){
          target = Math.floor((beginning + end) / 2);
          pos = lines[i].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
        }

        // update the text with y value
        //d3.select(this).select('text')
        //  .text(y.invert(pos.y).toFixed(2));

              d3.select(this).select('circle')
              .attr('cy', pos.x)
              .attr('cx', pos.y);

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

万一 fiddle 出了问题，这是我目前拥有的:

这是我希望它出现的样子(请原谅糟糕的绘画技巧):

我的问题也可能与我的错误有关。无法读取未定义的属性“长度”。

Answer 1

更新 fiddle :https://jsfiddle.net/3wzLv9yg/2/ .有几件事出错了:

线圈

var mousePerLine = mouseG.selectAll('.mouse-per-line')
  .data(data)
  .enter()
  .append("g")
  .attr("class", "mouse-per-line");

此语句为每个数据点 添加一个新的g 元素，而不是为每一行。将其替换为具有行数长度的数组，以获取每行的元素。例如，将 .data(data) 替换为 .data(d3.range(lines.length))。

Circle Location定位的多种技巧

看起来您结合了两种不同的技术来计算圆的 y 位置，一种涉及从数据值计算，另一种涉及从 svg 元素计算。

根据数据值计算的代码有这些行:

var xDate = x.invert(mouse[0]),
    bisect = d3.bisector(function(d) { return d.x; }).right;
    idx = bisect(d.values, xDate);

bisect(d.values, xDate); 中存在错误，因为 d.values 未分配到任何地方。它应该是 bisect(data, xDate);，但它可能无关紧要，因为它没有在其他任何地方使用，因为函数的其余部分根据 svg 路径计算 y 位置。如果您使用这种方法，您可以去掉 bisect 和 idx:

var xDate = x.invert(mouse[0]);

设置位置

这应该会减少控制台错误，但鼠标圈仍然无法正确跟踪。那是因为圆的位置设置了两次:

d3.select(this).select('circle')
  .attr('cy', pos.x)
  .attr('cx', pos.y);

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

这些语句将 g 元素设置到正确的位置，但它也将 circle 设置为等量的偏移量。你只需要一个。由于当前的实现设置了 g 元素的 transform，因此保留该元素并摆脱圆偏移可能更容易。

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

所有更改都在这里:https://jsfiddle.net/3wzLv9yg/2/