SOURCE

console 命令行工具 X clear

                    
>
console
var feelings = [':grinning:', ':grimacing:', ':grin:', ':joy:', ':smiley:', ':smile:', ':sweat_smile:', ':laughing:', ':innocent:', ':wink:', ':blush:', ':slight_smile:', ':upside_down:', ':relaxed:', ':yum:', ':relieved:', ':heart_eyes:', ':kissing_heart:', ':kissing:', ':kissing_smiling_eyes:', ':kissing_closed_eyes:', ':stuck_out_tongue_winking_eye:', ':stuck_out_tongue_closed_eyes:', ':stuck_out_tongue:', ':money_mouth:', ':nerd:', ':sunglasses:', ':hugging:', ':smirk:', ':no_mouth:', ':neutral_face:', ':expressionless:', ':unamused:', ':rolling_eyes:', ':thinking:', ':flushed:', ':disappointed:', ':worried:', ':angry:', ':rage:', ':pensive:', ':confused:', ':slight_frown:', ':frowning2:', ':persevere:', ':confounded:', ':tired_face:', ':weary:', ':triumph:', ':open_mouth:', ':scream:', ':fearful:', ':cold_sweat:', ':hushed:', ':frowning:', ':anguished:', ':cry:', ':disappointed_relieved:', ':sleepy:', ':sweat:', ':sob:', ':dizzy_face:', ':astonished:', ':zipper_mouth:', ':mask:', ':thermometer_face:', ':head_bandage:', ':sleeping:'];
feelings.reverse();

feelings = feelings.map(function(feeling) {
    return {
        feeling: feeling,
        imageUrl: emojione.shortnameToImage(feeling).match(/src="(.*)"/)[1]
    };
});


var width = 500;
var height = 500;

var nodes = [];
var links = [];

var svg = d3.select("svg")
    .attr("width", width)
    .attr("height", height);

var node = svg.selectAll(".node");

var force = d3.layout.force()
    .nodes(nodes)
    .links(links)
    .size([width, height])
    .on("tick", tick)
    .linkStrength(0.1)
    .friction(0.9)
    .linkDistance(40)
    .charge(-60)
    .gravity(0.1)
    .theta(0.8)
    .alpha(0.1);


function start() {
    node = node.data(force.nodes(), function(d) {
        return d.index;
    });
    node.enter()
        .append("svg:image")
        .attr("xlink:href", function(d) {
            return d.imageUrl;
        })
        .attr("class", function(d) {
            return "node";
        })
        .attr("width", 36)
        .attr("height", 36)

    node.exit().remove();

    node.call(force.drag)
        .on("mousedown", function() {
            d3.event.stopPropagation();
        });

    force.start();
}

function tick() {
    node.attr("x", function(d) {
            return d.x;
        })
        .attr("y", function(d) {
            return d.y;
        });
}

function getInitialPosition() {
    var position = {};
    var dir = Math.floor(Math.random() * 4);
    if (dir === 1) {
        position.x = Math.random() * width;
        position.y = 0;
    } else if (dir === 2) {
        position.x = Math.random() * width;
        position.y = height;
    } else if (dir === 3) {
        position.x = 0;
        position.y = Math.random() * height;
    } else if (dir === 4) {
        position.x = width;
        position.y = Math.random() * height;
    }
    return position;
}

var delay = 1000;

function addPerson() {
    var feeling = feelings.pop();

    var position = getInitialPosition();
    feeling.x = position.x;
    feeling.y = position.y;

    nodes.push(feeling);

    start();

    if (feelings.length > 0) {
        setTimeout(function() {
            addPerson();
        }, delay);
        if (delay > 100) {
            delay -= 100;
        }
    }
}

addPerson();
<script src="http://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
<svg>
</svg>

<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js'></script>
<script src='//cdn.jsdelivr.net/emojione/2.1.4/lib/js/emojione.min.js'></script>
svg {
    margin: 0 auto;
    display: block;
    max-width: 100%;
}