D3JS - 如果外面的窗口回到左边的元素

我目前正在研究卫星路径的可视化。我在D3JS上工作，一旦卫星从窗外飞出，它就会回到相反的一面继续前进。每颗卫星由一个圆圈代表，其路径按其近地点，远地点和周期计算。我做了一个JSFiddle。 https://jsfiddle.net/xrhets3d/ `D3JS - 如果外面的窗口回到左边的元素

var svg = d3.select('#canvas').append('svg') 
    .attr('width', window.innerWidth) 
    .attr('height', window.innerHeight * 3); 

var center = { 
    x: window.innerWidth/2, 
    y: window.innerHeight/2 
}; 

d3.json('https://api.myjson.com/bins/wf2sj', function(error, json) { 
    if(error) console.error(error); 

    var scaleX = d3.scaleLinear() 
     .domain([-180, 180]) 
     .range([0, window.innerWidth]); 

    var scaleY = d3.scaleLinear() 
     .domain([-100, 62000]) 
     .range([0, window.innerHeight * 3]); 

    var scaleSize = d3.scaleLinear() 
     .domain([1, 8000]) 
     .range([3, 30]); 

    var colors = { 
     'Government': 'rgba(52, 152, 219, 0.6)', 
     'Commercial': 'rgba(155, 89, 182, 0.6)', 
     'Military': 'rgba(46, 204, 113, 0.6)', 
     'Civil': 'rgba(231, 76, 60, 0.6)', 
     'Military/Government': 'rgba(241, 196, 15, 0.6)', 
     'Government/Commercial': 'rgba(26, 188, 156, 0.6)', 
     'Military/Commercial': 'rgba(52, 73, 94, 0.6)', 
     'Government/Civil': 'rgba(149, 165, 166, 0.6)', 
    }; 

    var circles = svg.selectAll('circle') 
     .data(json) 
     .enter() 
     .append('circle') 
     .attr('cx', function(d) { return scaleX(d.longitude_geo) }) 
     .attr('cy', function(d) { return scaleY(d.perigee) }) 
     .attr('r', function(d) { return d.launch_mass != "" && d.launch_mass != undefined ? scaleSize(d.launch_mass) : 3 }) 
     .style('fill', function(d) { return colors[d.users] }); 


    circles.transition() 
     .each(animate); 

    function animate(d) { 
     var circle = d3.select(this); 
     if((circle.attr('cx') - circle.attr('r')) > window.innerWidth) { 
      circle.attr('cx', 0); 
     } 
     circle = circle.transition() 
      .duration(d.period * 50) 
      .attr('cy', scaleY(d.apogee)) 
      .attr('cx', function(d) { return parseFloat(circle.attr('cx')) + window.innerWidth/2 }) 
      .transition() 
      .duration(d.period * 50) 
      .attr('cx', function(d) { return parseFloat(circle.attr('cx')) + window.innerWidth/2 }) 
      .attr('cy', scaleY(d.perigee)) 
      .on('end', animate); 
    } 

    var earth = svg.append('circle') 
     .attr('cx', center.x) 
     .attr('cy', - center.y/2) 
     .attr('r', 20) 
     .style('fill', '#0F0'); 
});

是否有人有想法？谢谢

来源

2017-10-28 Treast

最后，我决定在左边开始动画，cx动画等于window.innerWidth。

来源

2017-10-29 07:00:35 Treast

D3JS - 如果外面的窗口回到左边的元素

回答

相关问题