动画从最后一个已知点到新添加点(d3)的路径(线) [英] Animate path (line) from last known point to new added point (d3)

问题描述

我仍在学习编程，目前正在尝试d3库.

I'm still learning to program and I'm currently trying out the d3 library.

到目前为止，我对结果非常满意. 小提琴

So far I'm pretty happy with the result. fiddle

问::如果您检查了链接(或该问题下的部分代码)，则应尝试绘制一个点.这仅在x轴刻度上是可能的.您会看到它动画，但这并不是我想要的.我只希望它为新添加的行设置动画.我已经签出了.enter()和.append()，但是我遇到了错误.我可能做错了事.

Q: If you check out the link (or part of the code under this question) you should try to plot a point. This is only possible on the x-axis ticks. You'll see it animates but it's not exactly what I want. I just want it to animate the newly added line. I have checked out .enter() and .append() but I was getting errors. I might be doing something wrong.

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; }
}

不好意思，我正在学习，并将最终对其进行清理.

Excuse my bad code, I'm learning and will clean it up eventually.

Q2:要制作一个跟随鼠标的y位置并在接近时在刻度线上移动的圆有多难?

Q2: How hard would it be to make a circle that follows the mouse's y-position and moves on the ticks when you get near one?

问题3:如果我们解决了我的第一个问题，那么在做问题2时，是否容易获得自动动画/更新的线条?

Q3: If we solve my first question, would it be easy to get the lines to animate/update automatically when we do question 2?

谢谢.

推荐答案

我已经在这里包括您要的要点.

I've updated your jsfiddle here to include the points that you're asking for.

关于问题1，我更改了绘制线条的方式，以便可以在过渡中从上一个点到当前点进行插值.相关的代码是这个.

Regarding question 1, I've changed the way the line is drawn such that it can be interpolated from the previous to the current point in a transition. The relevant code is this.

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)}]));
        };
   }

请注意，新数据点仅在转换完成后才添加到点数组中.

Note that the new data point is only added to the array of points once the transition finishes.

关于您的第二个问题，可以通过将处理程序附加到所有刻度线并在鼠标悬停时附加一个标记来解决此问题:

Regarding your second question, this is taken care of by attaching handlers to all tick marks and append a marker on mouse over:

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();
}

这篇关于动画从最后一个已知点到新添加点(d3)的路径(线)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！