Nicht leisten können Pfade zeichnen Sie wächst langsam, mit D3

Über die d3-Grafik-Bibliothek, ich kann nicht scheinen, um Pfade zu zeichnen langsam, so dass Sie gesehen werden kann, wächst.

Diese Website hat ein perfektes Beispiel in der "Line Chart (Abrollen)" Abschnitt, aber kein code angegeben ist für diesen Abschnitt. Könnte mir bitte jemand helfen mit den Linien der D3 code konnte das passieren?

Wenn ich versuche Anhängen delay() oder die Dauer() wie im folgenden code-snippet, der Weg zieht immer noch sofort, Und alle in der SVG-code nach diesem segment fehl zu erbringen.

    var mpath = svg.append ('path');
        mpath.attr ('d', 'M35 48 L22 48 L22 35 L22 22 L35 22 L35 35 L48 35 L48 48')
             .attr ('fill', 'none')
             .attr ('stroke', 'blue')
             .duration (1000);

InformationsquelleAutor der Frage tgoneil | 2012-11-13

  1. 17

    Glaube ich, dass die "D3-Weg", dies zu tun ist mit einem custom-tween-Funktion. Sie können sehen, eine funktionierende implementation hier: http://jsfiddle.net/nrabinowitz/XytnD/

    Vorausgesetzt, Sie haben einen generator genannt line mit d3.svg.line zur Berechnung der Pfad:

    //add element and transition in
var path = svg.append('path')
    .attr('class', 'line')
    .attr('d', line(data[0]))
  .transition()
    .duration(1000)
    .attrTween('d', pathTween);

function pathTween() {
    var interpolate = d3.scale.quantile()
            .domain([0,1])
            .range(d3.range(1, data.length + 1));
    return function(t) {
        return line(data.slice(0, interpolate(t)));
    };
}​

    Den pathTween Funktion hier gibt ein interpolator, der nimmt eine bestimmte Scheibe von der Linie, definiert durch, wie weit wir sind durch den übergang, und aktualisiert den Pfad entsprechend an.

    Lohnt es sich anzumerken, dass ich vermute, Sie würden eine bessere Leistung und eine flüssigere animation durch, die den einfachen Weg: legen Sie ein weißes Rechteck (wenn Ihr hintergrund ist einfach) oder eine clipPath (wenn Ihr hintergrund ist Komplex) über die Linie, und übergang zu Recht, zeigen die Linie darunter.

    InformationsquelleAutor der Antwort nrabinowitz

  2. 47

    Einem gemeinsamen Muster beim animieren von Linien in svg ist eine Einstellung stroke-dasharray von der Länge des Pfads und dann animieren stroke-dashoffset:

    var totalLength = path.node().getTotalLength();

path
  .attr("stroke-dasharray", totalLength + " " + totalLength)
  .attr("stroke-dashoffset", totalLength)
  .transition()
    .duration(2000)
    .ease("linear")
    .attr("stroke-dashoffset", 0);

    Sehen Sie eine demo hier:
    http://bl.ocks.org/4063326

    InformationsquelleAutor der Antwort Duopixel

  3. 1

    Basiert auf dem post verlinkt, ich kam mit dem folgenden Beispiel:

    var i = 0,
    svg = d3.select("#main");

String.prototype.repeat = function(times) {
   return (new Array(times + 1)).join(this);
}

segments = [{x:35, y: 48}, {x: 22, y: 48}, {x: 22, y: 35}, {x: 34, y:35}, {x: 34, y:60}];
line = "M"+segments[0].x + " " + segments[0].y

new_line = line + (" L" + segments[0].x + " " + segments[0].y).repeat(segments.length);
 var mpath = svg.append ('path').attr ('d',new_line )
             .attr ('fill', 'none')
             .attr ('stroke', 'blue')

for (i=0; i<segments.length; i++)
    {
    new_segment = " " + "L"+segments[i].x + " " + segments[i].y
    new_line = line + new_segment.repeat(segments.length-i)
    mpath.transition().attr('d',new_line).duration(1000).delay(i*1000);
    line = line + new_segment

    }

    Es ist ein bisschen hässlich, aber funktioniert. Man kann es auf jsFiddle

    InformationsquelleAutor der Antwort btel

Schreibe einen Kommentar