制作从上一个已知点到新添加点(d3)的路径(线)的动画

Question

我仍在学习编程，目前正在试用d3库。

到目前为止，我对结果很满意。小提琴

Q:如果你查看了链接（或这个问题下的部分代码），你应该试着画一个点。这仅在x轴刻度上可行。你会看到它的动画，但这并不是我想要的。我只想让它为新添加的行设置动画。我已经签出了.enter（）和.append（），但出现了错误。我可能做错了什么。

function lines(x, y) {
  this.x = x;
  this.y = y+h;
}
var lineArray = [{x: 0, y: h}, {x: 1, y: h}];
var lineArrayPrevious = lineArray[lineArray.length -1].x;
var d3line = d3.svg.line()
                  .x(function(d) { return d.x; })
                  .y(function(d) { return d.y; })
                  .interpolate("monotone");

var path = svg.append("path").attr("d", d3line(lineArray)).attr("class", "line");
canPlot = true;
function plot() {
 var m = d3.mouse(this);
 if (m[0]-20 > lineArray[lineArray.length - 1].x)  {
   var lineX = lineArray.push(new lines(m[0], m[1]));
   svg.selectAll("path")
      .data(lineArray)
      .attr("d", d3line(lineArray));
   var point = svg.append("circle")
                  .attr("cx", function(d, i) { return m[0]; })
                  .attr("cy", function(d, i) { return m[1]+h; })
                  .attr("r", 0).transition().delay(150).attr("r", 6);

   var totalLength = path.node().getTotalLength();
   console.log();
   path.attr("stroke-dasharray", totalLength + " " + totalLength)
       .attr("stroke-dashoffset", totalLength)
       .transition().duration(700).ease("linear").attr("stroke-dashoffset", 0).delay(200);
   canPlot = true;
 } else { console.log("error"); canPlot = false; }
}

对不起，我的代码不好，我正在学习，最终会清理掉的。

Q2:当你靠近鼠标的y位置并在刻度上移动时，绕一个圆圈有多难？

Q3:如果我们解决了我的第一个问题，当我们做问题2时，让线条自动动画/更新会很容易吗？

提前谢谢。

Answer 1

我已经在这里更新了您的jsfiddle，以包含您所要求的要点。

关于问题1，我已经改变了绘制线的方式，以便可以在过渡中从上一个点插值到当前点。相关代码是这样的。

svg.select("path.line")
      .attr("d", d3line(lineArray))
      .transition().duration(700)
      .attrTween('d', pathTween)
      .each("end", function() {
           var lineX = lineArray.push(new lines(m[0], m[1]));
      });
   var last = lineArray[lineArray.length-1];
   function pathTween() {
        var xi = d3.interpolate(last.x, m[0]),
            yi = d3.interpolate(last.y, m[1] + h);
        return function(t) {
            return d3line(lineArray.concat([{x: xi(t), y: yi(t)}]));
        };
   }

请注意，只有在转换完成后，新的数据点才会添加到点阵列中。

关于您的第二个问题，这是通过将处理程序附加到所有勾号并在鼠标上附加一个标记来解决的：

d3.selectAll(".xaxis > .tick").on("mouseenter", mousein)
 .on("mousemove", mousemove)
 .on("mouseleave", mouseout);
function mousein() {
  svg.append("circle").attr("class", "marker").attr("r", 3)
   .attr("pointer-events", "none");
}
function mousemove() {
  d3.select("circle.marker")
    .attr("transform", d3.select(this).attr("transform"))
    .attr("cy", d3.mouse(this)[1] + h);
}
function mouseout() {
  d3.select("circle.marker").remove();
}