Анимационный путь (линия) от последней известной точки до новой добавленной точки (d3)

Question

Я все еще участвую в программе, и в настоящее время я тестирую библиотеку d3.

До сих пор я доволен результатом. fiddle

Вопрос: Если вы отметите ссылку (или часть кода по этому вопросу), вы должны попытаться построить точку. Это возможно только для тиков x-axis. Вы увидите, что он оживляет, но это не совсем то, что я хочу. Я просто хочу, чтобы он оживил новую добавленную строку. Я проверил .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 here, чтобы включить те моменты, о которых вы просите.

Что касается вопроса 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(); 
}