Question

请找到要生成的代码

 <style>
text.shadow {
stroke: #fff;
stroke-width: 2.5px;
opacity: 0.9;
}

我附上了应该显示的代码

Answer 1

您需要使用正确的数据。你有这个功能：

 function mousemove() {
         var x0 = x.invert(d3.mouse(this)[0]),
           i = bisectDate(data, x0, 1),
           d0 = newDataArray[i - 1],
           d1 = newDataArray[i],
           d = x0 - d0.i > d1.i - x0 ? d1 : d0;
         focus.attr("transform", "translate(" + x(d.i) + "," + y(d.fit) + ")");
         focus.select("text").text(Math.floor(d.fit));
       }

在第3行，您使用的是data。 data在哪里？它应该是newDataArray对吗？

此外，这应该出现在控制台日志中，您在开发时是否阅读了控制台日志？

是的，你有这个功能：

function mousemove() {
            var x0 = x.invert(d3.mouse(this)[0]),
                i = bisectDate(data, x0, 1),
                d0 = newDataArray[i-1],
                d1 = newDataArray[i],   
                d = x0 - d0.i > d1.i - x0 ? d1 : d0;
            focus.attr("transform", "translate(" + x(d.i) + "," + y(d.fit) + ")");
            focus.select("text").text(Math.floor(d.fit));
        }

这根本不会发生。您已将d.i和d.fit传递给x和y轴。什么是d.i？它并不存在于您的数据中。

我把这个小提琴放在一起：https://jsfiddle.net/reko91/o5kwgb7x/3/

您的mousemove功能无法正常工作，因为您没有正确转换焦点（圆圈）。身份d.i是多少？你需要做的就是把它作为y轴传递给你，所以在这种情况下，d.fit就是这样：

d = x0 - d0.fit > d1.fit - x0 ? d1 : d0;

然后你翻译它，x中的d.upr和y中的d.fit。完全鼠标移动功能：

function mousemove() {
   var x0 = x.invert(d3.mouse(this)[0]), 
     i = bisectDate(newDataArray, x0, 1), 
     d0 = newDataArray[i - 1], 
     d1 = newDataArray[i], 
     d = x0 - d0.fit > d1.fit - x0 ? d1 : d0; 

   focus.attr("transform", "translate(" + x(d.upr) + "," + y(d.fit) + ")"); 
   focus.select("text").text(Math.floor(d.fit));
 }

更新了小提琴：https://jsfiddle.net/reko91/o5kwgb7x/5/

我认为你从这里得到了例子：http://bl.ocks.org/mbostock/3902569

以下是其工作原理的细分。在为您的观点做更多事情之前，请阅读并理解它的作用。最好全部了解它，否则你会陷入困境。提示：使用控制台日志！

代码不起作用

1 个答案: