Question

我目前正致力于卫星的可视化工作。路径。我在D3JS上工作，我希望一旦卫星走出窗外，它就会回到对面并继续它的路径。每个卫星都有代表通过一个圆圈，其路径由其近地点，远地点和周期计算。我做了一个JSFiddle。 https://jsfiddle.net/xrhets3d/ `

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');
});

`

有人有想法吗？感谢

Answer 1

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

D3JS - 如果在窗外，将元素留在左侧

1 个答案: