d3 Liniendiagramm Animationen von links nach rechts

Question

Ich bin daran interessiert, ein Liniendiagramm zu erstellen - die sich zieht von links nach rechts - im wesentlichen Punkte, die in der x-Achse zu verbinden.

http://bl.ocks.org/markmarkoh/8700606 http://bl.ocks.org/duopixel/4063326

Dies ist die jsfiddle, die ich gemacht habe Erstellung dieser Grafik zu starten. http://jsfiddle.net/NYEaX/1512/

//__invoke line 
$('[data-role="line"]').each(function(index) { 
    createLine(this); 
}); 



function createLine(el){ 
    var w = $(el).data("width"); 
    var h = $(el).data("height"); 

    var svg = d3.select($(el)[0]) 
     .append("svg") 
     .attr("width", w) 
     .attr("height", h); 

    var data = d3.range(11).map(function(){return Math.random()*10}) 
    var x = d3.scale.linear().domain([0, 10]).range([0, 700]); 
    var y = d3.scale.linear().domain([0, 10]).range([10, 290]); 
    var line = d3.svg.line() 
     .interpolate("cardinal") 
     .x(function(d,i) {return x(i);}) 
     .y(function(d) {return y(d);}) 

    var path = svg.append("path") 
     .attr("d", line(data)) 
     .attr("stroke", "steelblue") 
     .attr("stroke-width", "2") 
     .attr("fill", "none"); 

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

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

    svg.on("click", function(){ 
     path  
     .transition() 
     .duration(2000) 
     .ease("linear") 
     .attr("stroke-dashoffset", totalLength); 
    }); 



    /* plot axis */ 
    var padding = 100; // space around the chart, not including labels 

    // define the x axis 
    var xAxis = d3.svg.axis() 
     .orient("bottom") 
     .scale(x); 
     //.tickFormat(date_format); 

    // draw x axis with labels and move to the bottom of the chart area 
     svg.append("g") 
      .attr("class", "xaxis axis") // two classes, one for css formatting, one for selection below 
      .attr("transform", "translate(0," + (h - padding) + ")") 
      .call(xAxis); 

    /* plot axis */ 
} 

Answer 1

Eine Lösung, die Sie tun können, ist svg Kreise anzuhängen, die mit dem Pfad entsprechen, bevor Sie den Pfad zu ziehen. Beispiel Fiddle: http://jsfiddle.net/stancheta/ystymLm4/6/

var circles = svg.selectAll("dot") 
     .data(data) 
     .enter().append("svg:circle") 
     .attr('class', 'circ') 
     .attr("r", 3) 
     .attr("cx", function(d, i) { return x(i); }) 
     .attr("cy", function(d, i) { return y(d); }) 
     .style('fill', 'lightsteelblue');