So fügen Sie separate Linien zur Karte hinzu

Auf einem d3 v4-Diagramm habe ich Bögen für mehrere Koordinaten gezeichnet. Alles ist gut dort. Jetzt möchte ich die Zeilen von einer json Anfrage zeichnen. Alle neuen Linien würden gezeichnet, während bestehende Linien bleiben würden. Wie ich verstehe, würde jede Zeile einen eigenen Übergang erfordern ....So fügen Sie separate Linien zur Karte hinzu

Wenn ich richtig verstehe, beginnt die Iteration von Koordinaten bei

line.attr("d", function(c) {...}

, die über jeden Satz von Koordinaten iteriert, und intern Gruppen sie dann so dass sie alle gleichzeitig als das eine Ereignis "ausgelöst" werden. Irgendeine Erklärung auf diese dankbar erhalten.

Plunker: https://plnkr.co/edit/Ax4Tby47lFlryzVWCHi2?p=preview

Kev

Quelle

2016-10-18 Kevin Waterson

Ich bin nicht sicher, was Sie fordern. Sie möchten, dass jede Linienanimation gestaffelt ist? – Mark

Nicht nur gestaffelt, sondern wenn neue Daten (Coords) über eine Ajax-Anfrage verfügbar werden, sollte die Linie gezeichnet werden. –

Nicht genug Details. Wie werden Sie wissen, wann Sie die Ajax-Anfrage stellen müssen (wann sind neue Daten verfügbar)? Wollen Sie nur Ihren Endpunkt abfragen? – Mark

Nicht sicher, ich bin Ihre Frage richtig zu lesen, aber es klingt wie Sie Ihre Animationen wollen nacheinander starten. Dies kann mit einem .delay erreicht werden:

.attr("stroke-dasharray", "0, 1000") //<-- hide the line 
    .transition() 
    .delay(function(d, i) { 
    return 5000 * i; //<-- i is the index of the line, so stagger the animation start by index * duration 
    }) 
    .duration(5000) 
    .attrTween("stroke-dasharray", function() { 
    var len = this.getTotalLength(); 
    return function(t) { 
     return (d3.interpolateString("0," + len, len + ",0"))(t) 
    }; 
    })

Voll Code:

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <style> 
 

 
.stroke { 
 
\t fill: none; 
 
\t stroke: #000; 
 
\t stroke-width: 3px; 
 
} 
 
    
 
.fill{ 
 
\t fill: #fff; 
 
} 
 

 

 
    .graticule { 
 
    fill: none; 
 
    stroke: #777; 
 
    stroke-width: 0.5px; 
 
    stroke-opacity: 0.5; 
 
    } 
 
    
 
/* the color of land in countries */ 
 
.land { 
 
\t fill: #222; 
 
} 
 

 
/* the color of borders */ 
 
.boundary { 
 
\t fill: none; 
 
\t stroke: #fff; 
 
\t stroke-width: 0.5px; 
 
} 
 
</style> 
 

 

 
<svg width="800" height="600"></svg> 
 

 

 
<script src="//d3js.org/d3.v4.js"></script> 
 
<script src="//d3js.org/topojson.v1.min.js"></script> 
 
<script> 
 
    var svg = d3.select("svg"), 
 
    width = +svg.attr("width"), 
 
    height = +svg.attr("height"); 
 

 
    var projection = d3.geoMercator() 
 
    .scale((width - 3)/(2 * Math.PI)) 
 
    .translate([width/2, height/2]); 
 

 
    var path = d3.geoPath() 
 
    .projection(projection); 
 

 
    var graticule = d3.geoGraticule(); 
 

 
    svg.append("defs").append("path") 
 
    .datum({ 
 
     type: "Sphere" 
 
    }) 
 
    .attr("id", "sphere") 
 
    .attr("d", path); 
 

 
    svg.append("use") 
 
    .attr("class", "stroke") 
 
    .attr("xlink:href", "#sphere"); 
 

 
    svg.append("use") 
 
    .attr("class", "fill") 
 
    .attr("xlink:href", "#sphere"); 
 

 
    svg.append("path") 
 
    .datum(graticule) 
 
    .attr("class", "graticule") 
 
    .attr("d", path); 
 

 
d3.json("https://rawgit.com/mbostock/topojson/master/examples/world-50m.json", function(error, world) { 
 
\t if (error) throw error; 
 
\t 
 
\t d3.json("https://jsonblob.com/api/5806b733e4b0bcac9f817223", function(coord){ 
 

 
    svg.insert("path", ".graticule") 
 
     .datum(topojson.feature(world, world.objects.land)) 
 
     .attr("class", "land") 
 
     .attr("d", path); 
 

 
    svg.insert("path", ".graticule") 
 
     .datum(topojson.mesh(world, world.objects.countries, function(a, b) { 
 
     return a !== b; 
 
     })) 
 
     .attr("class", "boundary") 
 
     .attr("d", path); 
 

 
    var line = svg.selectAll(".paths") 
 
     .data(coord) 
 
     .enter() 
 
     .append("path"); 
 
     
 
     line.attr("d", function(c) { 
 
     console.log(c); 
 
     var d = { 
 
      source: projection(c.source), 
 
      target: projection(c.destination) 
 
     }; 
 
     var dx = d.target[0] - d.source[0], 
 
      dy = d.target[1] - d.source[1], 
 
      dr = Math.sqrt(dx * dx + dy * dy); 
 
     return "M" + d.source[0] + "," + d.source[1] + "A" + dr + "," + dr + 
 
      " 0 0,1 " + d.target[0] + "," + d.target[1]; 
 
     }) 
 
     .style("stroke", "red") // color of the arc line 
 
     .style("stroke-width", 5) 
 
     .style("fill", "none") 
 
     .attr("stroke-dasharray", "0, 1000") 
 
     .transition() 
 
     .delay(function(d, i) { 
 
     return 5000 * i; 
 
     }) 
 
     .duration(5000) 
 
     .attrTween("stroke-dasharray", function() { 
 
     var len = this.getTotalLength(); 
 
     return function(t) { 
 
      return (d3.interpolateString("0," + len, len + ",0"))(t) 
 
     }; 
 
     }) 
 
     .on('end', function(d) { 
 
     var c = projection(d.destination); 
 
     svg.append('circle') 
 
      .attr('cx', c[0]) 
 
      .attr('cy', c[1]) 
 
      .attr('r', 0) 
 
      .style('fill', 'white') // color of the cirle 
 
      .style('fill-opacity', '0.5') 
 
      .transition() 
 
      .duration(2000) 
 
      .attr('r', 50) 
 
      .on('end', function(d) { 
 
      d3.select(this) 
 
       .transition() 
 
       .duration(2000) 
 
       .attr('r', 10); 
 
      }); 
 
     }); 
 
\t }); 
 
    }); 
 
</script> 
 
    </body> 
 

 
</html>

Quelle

2016-10-18 23:59:24 Mark

So fügen Sie separate Linien zur Karte hinzu

Antwort

Verwandte Themen