十字线组件抛出错误，特定于数据集？

Question

我制作了多个带有十字线成分的图形。我通常在this block之后建模。除非您非常熟悉它的复杂性，否则不容易进行修补。这是一个简化版本，仅用于说明我的困境。唯一复杂的是，我使用的是linear标度，而不是传统的time标度。您可以在Crosshair / x value tooltip for linear scale中进一步了解。

事不宜迟，这是我的硬编码数据段。无论出于何种原因，此数据集始终无法与我的十字准线组件一起使用（无论是该错误还是我的用户错误都是系统性的）。

var margins = {left:50, right:0, top:30, bottom:40};
var padding = 80;
var graphOne = {width:500, height:500};

var svg = d3.select('body').append('svg')
    .attr('width', graphOne.width+margins.left+margins.right+padding)
    .attr('height', graphOne.height);

var rawData =    [
     {'fpr': '1', 'tpr': '1'},
     {'fpr': '0.97', 'tpr': '1'},
     {'fpr': '0.94', 'tpr': '1'},
     {'fpr': '0.85', 'tpr': '1'},
     {'fpr': '0.79', 'tpr': '1'},
     {'fpr': '0.76', 'tpr': '1'},
     {'fpr': '0.61', 'tpr': '1'},
     {'fpr': '0.5', 'tpr': '1'},
     {'fpr': '0.3824', 'tpr': '1'},
     {'fpr': '0.3529', 'tpr': '1'},
     {'fpr': '0.3529', 'tpr': '1'},
     {'fpr': '0.2941', 'tpr': '1'},
     {'fpr': '0.2941', 'tpr': '1'},
     {'fpr': '0.2941', 'tpr': '1'},
     {'fpr': '0.2647', 'tpr': '1'},
     {'fpr': '0.2647', 'tpr': '1'},
     {'fpr': '0.2647', 'tpr': '1'},
     {'fpr': '0.2647', 'tpr': '1'},
     {'fpr': '0.2647', 'tpr': '1'},
     {'fpr': '0.2647', 'tpr': '1'},
     {'fpr': '0.2647', 'tpr': '1'},
     {'fpr': '0.2353', 'tpr': '1'},
     {'fpr': '0.2353', 'tpr': '1'},
     {'fpr': '0.2059', 'tpr': '1'},
     {'fpr': '0.2059', 'tpr': '1'},
     {'fpr': '0.1765', 'tpr': '1'},
     {'fpr': '0.1471', 'tpr': '1'},
     {'fpr': '0.1471', 'tpr': '0.9655'},
     {'fpr': '0.0882', 'tpr': '0.9655'},
     {'fpr': '0.0882', 'tpr': '0.9655'},
     {'fpr': '0.0882', 'tpr': '0.9655'},
     {'fpr': '0.0882', 'tpr': '0.9655'},
     {'fpr': '0.0882', 'tpr': '0.9655'},
     {'fpr': '0.0588', 'tpr': '0.9655'},
     {'fpr': '0.0588', 'tpr': '0.9655'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.8966'},
     {'fpr': '0.0588', 'tpr': '0.8966'},
     {'fpr': '0.0588', 'tpr': '0.8966'},
     {'fpr': '0.0588', 'tpr': '0.8966'},
     {'fpr': '0.0588', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8621'},
     {'fpr': '0.0294', 'tpr': '0.8621'},
     {'fpr': '0.0294', 'tpr': '0.8621'},
     {'fpr': '0.0294', 'tpr': '0.8621'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.7931'},
     {'fpr': '0.0294', 'tpr': '0.7931'},
     {'fpr': '0.0294', 'tpr': '0.7931'},
     {'fpr': '0', 'tpr': '0.7931'},
     {'fpr': '0', 'tpr': '0.7931'},
     {'fpr': '0', 'tpr': '0.7931'},
     {'fpr': '0', 'tpr': '0.7931'},
     {'fpr': '0', 'tpr': '0.7931'},
     {'fpr': '0', 'tpr': '0.7931'},
     {'fpr': '0', 'tpr': '0.7586'},
     {'fpr': '0', 'tpr': '0.5862'},
     {'fpr': '0', 'tpr': '0.5517'},
     {'fpr': '0', 'tpr': '0.4828'},
     {'fpr': '0', 'tpr': '0.3448'},
     {'fpr': '0', 'tpr': '0.3103'},
     {'fpr': '0', 'tpr': '0.1379'},
     {'fpr': '0', 'tpr': '0.1034'},
     {'fpr': '0', 'tpr': '0.07'},
     {'fpr': '0', 'tpr': '0'}
   ];

   var data = rawData.map(function(d) {
     return { X: +d.fpr, Y: +d.tpr,}
   });

  var xScaleOne = d3.scale.linear()
    .domain(d3.extent(data, function(d) { return d.X; }))
    .range([0, graphOne.width]);

  var yScaleOne = d3.scale.linear()
    .domain(d3.extent(data, function(d) {return d.Y; }))
    .range([graphOne.height-margins.bottom-margins.top, 0]);

  var xAxisOne = d3.svg.axis().scale(xScaleOne).orient('bottom');
  var yAxisOne = d3.svg.axis().scale(yScaleOne).orient('left');

  var xAxisOneNodes = svg.append('g')
    .attr('transform', 'translate(' + (margins.left) + ',' + (graphOne.height - margins.bottom) + ')')
    .attr('class', 'x axis')
    .call(xAxisOne);

  var yAxisOneNodes = svg.append('g')
    .attr('transform', 'translate(' + (margins.left) + ',' + (margins.top) + ')')
    .attr('class', 'y axis')
    .call(yAxisOne);

  var graphOneGroup = svg.append('g')
    .attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')');

  var lineOne = d3.svg.line()
      .x(function(d) { return xScaleOne(d.X); })
      .y(function(d) { return yScaleOne(d.Y); });

  var diagonal = graphOneGroup.append('line')
    .attr({x1:xScaleOne(0), x2:xScaleOne(1), y1:yScaleOne(0), y2:yScaleOne(1)})
    .attr('stroke', 'black')
    .attr('stroke-dasharray', '4,4')
    .attr('stroke-width',3);

    graphOneGroup.append('path')
      .datum(data)
      .attr('d',lineOne)
      .attr('fill','none')
      .attr('stroke', '#000')
      .attr('stroke-width', '3px');
//focus start
    var focus = graphOneGroup.append('g').style('display', 'none');
    var xDomain = d3.extent(data, function(d) {return d[0]; });
    var yDomain = d3.extent(data, function(d) {return d[1]; });
    focus.append("line")
        .attr("id", "verticalFocus")
        .style("stroke", "gray")
        .style("stroke-width", "3px")
        .style("stroke-dasharray", "5,5")
        .style("opacity", 1)
        .attr("y1", 0)
        .attr("y2", graphOne.height-margins.top-margins.bottom);

    focus.append("line")
        .attr("id", "horizontalFocus")
        .style("stroke", "gray")
        .style("stroke-width", "3px")
        .style("stroke-dasharray", "5,5")
        .style("opacity", 1)
        .attr("x1", graphOne.width)
        .attr("x2",  graphOne.width);

    focus.append("circle")
        .attr("id", "circleFocus")
        .style("fill", "#376c9b")
        .style("stroke", "white")
        .style("stroke-width", "3px")
        .attr("r", 5);

    var bisect = d3.bisector(function(d) { return +d[0]; }).left;

    graphOneGroup.append("rect")
        .attr("width", graphOne.width)
        .attr("height",graphOne.height-margins.top-margins.bottom)
        .style("fill", "none")
        .style("pointer-events", "all")
        .on("mouseover", function() { focus.style("display", null); })
        .on("mouseout", function() { focus.style("display", "none"); })
        .on("mousemove", mousemove);

    function mousemove() {
      var mouse = d3.mouse(this);
      var mouseValue = xScaleOne.invert(mouse[0]);
      var i = bisect(data, mouseValue);

      var d0 = data[i-1];
      var d1 = data[i];
      console.log(d0)
      console.log(d1)
      var d = mouseValue - d0[0] > d1[0] - mouseDate ? d1 : d0;

      var x = xScaleOne(d[0]);
      var y = yScaleOne(d[1]);

      focus.select('#horizontalFocus')
        .attr('x1', x).attr('y1', yScaleOne(yDomain[0]))
        .attr('x2', x).attr('y2', yScaleOne(yDomain[1]));

      focus.select('#verticalFocus')
          .attr('x1', xScaleOne(xDomain[0])).attr('y1', y)
          .attr('x2', xScaleOne(xDomain[1])).attr('y2', y);

      focus.select('#circleFocus')
          .attr('cx',x)
          .attr('cy',y);
        }

g.x.axis, g.y.axis {
  font-size: 10px;
  font-family: Play;
}

.tick line {
  fill:none;
  stroke:#000;
  stroke-width:1px;
}

.domain {
  fill:none;
  stroke:#000;
  stroke-width:.25em;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>

我试图用评论指出焦点/十字线部分。您还将在控制台日志中注意到一些奇怪的结果。 d0被读取为未定义。每次鼠标移动时，这似乎都使计算中断。我很确定我的事件监听器rect的位置正确；因为未定义的值可能会出现在空白处，就像在类似十字准线问题Cannot read property "0" of undefined中提到的那样。该故事的另一个寓意是不要在对分函数的return之后重新换行，

问题：为什么我的d0未定义？我的十字准线组件几乎与我发布的示例块相同，除了使用linear刻度之外，仅有一点例外。我小心地调整了代码的必要部分以解决此问题。在此系统之前，我使用了线性标度。我的直觉是，该数据集会导致代码中的错误，或者具有我的代码无法强健使用的其他属性-无论如何，我找不到罪魁祸首。

Answer 1

回答您的问题：为什么d0未定义？是bisect函数的错误用法。

以下是d3.bisect的 docs ：https://github.com/d3/d3-array#bisect

如果您查看用法并将其用于数据，则将是：var bisect = d3.bisector(function(d) { return +d.X; }).left;

还有一件主要的事情（文档中甚至提到过）是，这个d3.bisect假设数组是一个排序数组，而在您的情况下不是。当我用控制台记录数据时，我发现它们的顺序相反，因此仅使用data.reverse()将其传递给d3 bisector。

其余的是一些小的更改，我认为您可能已经从所引用的示例块中复制了这些更改。

例如：在您的情况下，行.attr('x1', x).attr('y1', yScaleOne(yDomain[0]))，yDomain丢失。接下来的几行中使用的xDomain也是如此。

添加以上内容并修复错误，以下是其中的一小段内容：

var margins = {left:50, right:0, top:30, bottom:40};
var padding = 80;
var graphOne = {width:500, height:500};

var svg = d3.select('body').append('svg')
    .attr('width', graphOne.width+margins.left+margins.right+padding)
    .attr('height', graphOne.height);

var rawData =    [
     {'fpr': '1', 'tpr': '1'},
     {'fpr': '0.97', 'tpr': '1'},
     {'fpr': '0.94', 'tpr': '1'},
     {'fpr': '0.85', 'tpr': '1'},
     {'fpr': '0.79', 'tpr': '1'},
     {'fpr': '0.76', 'tpr': '1'},
     {'fpr': '0.61', 'tpr': '1'},
     {'fpr': '0.5', 'tpr': '1'},
     {'fpr': '0.3824', 'tpr': '1'},
     {'fpr': '0.3529', 'tpr': '1'},
     {'fpr': '0.3529', 'tpr': '1'},
     {'fpr': '0.2941', 'tpr': '1'},
     {'fpr': '0.2941', 'tpr': '1'},
     {'fpr': '0.2941', 'tpr': '1'},
     {'fpr': '0.2647', 'tpr': '1'},
     {'fpr': '0.2647', 'tpr': '1'},
     {'fpr': '0.2647', 'tpr': '1'},
     {'fpr': '0.2647', 'tpr': '1'},
     {'fpr': '0.2647', 'tpr': '1'},
     {'fpr': '0.2647', 'tpr': '1'},
     {'fpr': '0.2647', 'tpr': '1'},
     {'fpr': '0.2353', 'tpr': '1'},
     {'fpr': '0.2353', 'tpr': '1'},
     {'fpr': '0.2059', 'tpr': '1'},
     {'fpr': '0.2059', 'tpr': '1'},
     {'fpr': '0.1765', 'tpr': '1'},
     {'fpr': '0.1471', 'tpr': '1'},
     {'fpr': '0.1471', 'tpr': '0.9655'},
     {'fpr': '0.0882', 'tpr': '0.9655'},
     {'fpr': '0.0882', 'tpr': '0.9655'},
     {'fpr': '0.0882', 'tpr': '0.9655'},
     {'fpr': '0.0882', 'tpr': '0.9655'},
     {'fpr': '0.0882', 'tpr': '0.9655'},
     {'fpr': '0.0588', 'tpr': '0.9655'},
     {'fpr': '0.0588', 'tpr': '0.9655'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.931'},
     {'fpr': '0.0588', 'tpr': '0.8966'},
     {'fpr': '0.0588', 'tpr': '0.8966'},
     {'fpr': '0.0588', 'tpr': '0.8966'},
     {'fpr': '0.0588', 'tpr': '0.8966'},
     {'fpr': '0.0588', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8966'},
     {'fpr': '0.0294', 'tpr': '0.8621'},
     {'fpr': '0.0294', 'tpr': '0.8621'},
     {'fpr': '0.0294', 'tpr': '0.8621'},
     {'fpr': '0.0294', 'tpr': '0.8621'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.8276'},
     {'fpr': '0.0294', 'tpr': '0.7931'},
     {'fpr': '0.0294', 'tpr': '0.7931'},
     {'fpr': '0.0294', 'tpr': '0.7931'},
     {'fpr': '0', 'tpr': '0.7931'},
     {'fpr': '0', 'tpr': '0.7931'},
     {'fpr': '0', 'tpr': '0.7931'},
     {'fpr': '0', 'tpr': '0.7931'},
     {'fpr': '0', 'tpr': '0.7931'},
     {'fpr': '0', 'tpr': '0.7931'},
     {'fpr': '0', 'tpr': '0.7586'},
     {'fpr': '0', 'tpr': '0.5862'},
     {'fpr': '0', 'tpr': '0.5517'},
     {'fpr': '0', 'tpr': '0.4828'},
     {'fpr': '0', 'tpr': '0.3448'},
     {'fpr': '0', 'tpr': '0.3103'},
     {'fpr': '0', 'tpr': '0.1379'},
     {'fpr': '0', 'tpr': '0.1034'},
     {'fpr': '0', 'tpr': '0.07'},
     {'fpr': '0', 'tpr': '0'}
   ];

   var data = rawData.map(function(d) {
     return { X: +d.fpr, Y: +d.tpr,}
   });

	data = data.reverse(); // sorted the data
  var xScaleOne = d3.scale.linear()
    .domain(d3.extent(data, function(d) { return d.X; }))
    .range([0, graphOne.width]);

  var yScaleOne = d3.scale.linear()
    .domain(d3.extent(data, function(d) {return d.Y; }))
    .range([graphOne.height-margins.bottom-margins.top, 0]);

  var xAxisOne = d3.svg.axis().scale(xScaleOne).orient('bottom');
  var yAxisOne = d3.svg.axis().scale(yScaleOne).orient('left');

  var xAxisOneNodes = svg.append('g')
    .attr('transform', 'translate(' + (margins.left) + ',' + (graphOne.height - margins.bottom) + ')')
    .attr('class', 'x axis')
    .call(xAxisOne);

  var yAxisOneNodes = svg.append('g')
    .attr('transform', 'translate(' + (margins.left) + ',' + (margins.top) + ')')
    .attr('class', 'y axis')
    .call(yAxisOne);

  var graphOneGroup = svg.append('g')
    .attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')');

  var lineOne = d3.svg.line()
      .x(function(d) { return xScaleOne(d.X); })
      .y(function(d) { return yScaleOne(d.Y); });

  var diagonal = graphOneGroup.append('line')
    .attr({x1:xScaleOne(0), x2:xScaleOne(1), y1:yScaleOne(0), y2:yScaleOne(1)})
    .attr('stroke', 'black')
    .attr('stroke-dasharray', '4,4')
    .attr('stroke-width',3);

    graphOneGroup.append('path')
      .datum(data)
      .attr('d',lineOne)
      .attr('fill','none')
      .attr('stroke', '#000')
      .attr('stroke-width', '3px');
//focus start
    var focus = graphOneGroup.append('g').style('display', 'none');
    var xDomain = d3.extent(data, function(d) {return d[0]; });
    var yDomain = d3.extent(data, function(d) {return d[1]; });
    focus.append("line")
        .attr("id", "verticalFocus")
        .style("stroke", "gray")
        .style("stroke-width", "3px")
        .style("stroke-dasharray", "5,5")
        .style("opacity", 1)
        .attr("y1", 0)
        .attr("y2", graphOne.height-margins.top-margins.bottom);

    focus.append("line")
        .attr("id", "horizontalFocus")
        .style("stroke", "gray")
        .style("stroke-width", "3px")
        .style("stroke-dasharray", "5,5")
        .style("opacity", 1)
        .attr("x1", graphOne.width)
        .attr("x2",  graphOne.width);

    focus.append("circle")
        .attr("id", "circleFocus")
        .style("fill", "#376c9b")
        .style("stroke", "white")
        .style("stroke-width", "3px")
        .attr("r", 5);

    var bisect = d3.bisector(function(d) { return +d.X; }).left;

    graphOneGroup.append("rect")
        .attr("width", graphOne.width)
        .attr("height",graphOne.height-margins.top-margins.bottom)
        .style("fill", "none")
        .style("pointer-events", "all")
        .on("mouseover", function() { focus.style("display", null); })
        .on("mouseout", function() { focus.style("display", "none"); })
        .on("mousemove", mousemove);

    function mousemove() {
      var mouse = d3.mouse(this);
      var mouseValue = xScaleOne.invert(mouse[0]);
      var i = bisect(data, mouseValue);

      var d0 = data[i-1];
      var d1 = data[i];
     // console.log(d0)
     // console.log(d1)
      var d = mouseValue - d0.X > d1.X - mouseValue ? d1 : d0;

      var x = xScaleOne(d.X);
      var y = yScaleOne(d.Y);

      focus.select('#horizontalFocus')
        .attr('x1', x).attr('y1', yScaleOne(yScaleOne.domain()[0]))
        .attr('x2', x).attr('y2', yScaleOne(yScaleOne.domain()[1]));

      focus.select('#verticalFocus')
          .attr('x1', xScaleOne(xScaleOne.domain()[0])).attr('y1', y)
          .attr('x2', xScaleOne(xScaleOne.domain()[1])).attr('y2', y);

      focus.select('#circleFocus')
          .attr('cx',x)
          .attr('cy',y);
        }

g.x.axis, g.y.axis {
  font-size: 10px;
  font-family: Play;
}

.tick line {
  fill:none;
  stroke:#000;
  stroke-width:1px;
}

.domain {
  fill:none;
  stroke:#000;
  stroke-width:.25em;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>

相关更改：

data = data.reverse(); // sorted the data
...
...
...  
function mousemove() {
 ...
 focus.select('#horizontalFocus')
    .attr('x1', x).attr('y1', yScaleOne(yScaleOne.domain()[0]))
    .attr('x2', x).attr('y2', yScaleOne(yScaleOne.domain()[1]));

 focus.select('#verticalFocus')
      .attr('x1', xScaleOne(xScaleOne.domain()[0])).attr('y1', y)
      .attr('x2', xScaleOne(xScaleOne.domain()[1])).attr('y2', y);

希望这会有所帮助。如果您有任何问题，请告诉我。