HTML5/SVG使用D3.js构建的随机球形（球幕）照片墙

本作品来自于一个最受欢迎音乐艺术家展览列表页面，以随机布局照片墙的形式展示流行音乐人。欢迎度（热度）越高的歌手位置越居中，并且头像也越大。有一个弹性收缩的入场动效。注：因国外数据访问不稳定，其中图片被替换为本站数据。

d3, list, template, gallery

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 9030
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

//可用于构造球形照片墙
var format = d3.format(",d");

var bubble = d3.layout.pack()
    .sort(null)
    .size([960, 960])
    .value(function(d) {
        return d.trackers;
    })
    .padding(10);

var svg = d3.select('body')
    .append('svg')
    .attr("width", 960)
    .attr("height", 960)
    .attr("class", "bubble")

d3.json("/uploads/161001/popular.json", function(error, data) {

data = data.map(function(d) {
        d.trackers = +d.trackers;
        return d;
    });

var nodes = bubble.nodes({
        children: data
    }).filter(function(d) {
        return !d.children;
    });

var force = d3.layout.force()
        .nodes(nodes)
        .links([])
        .charge(-400)
        .gravity(0.2)
        .friction(0.8)
        .size([960, 960])
        .on("tick", tick);

force.start()

var node = svg.selectAll(".node")
        .data(nodes)
        .enter().append("g")
        .attr("class", "node")
        .attr("transform", function(d) {
            return "translate(" + d.x + "," + d.y + ")";
        })
        .call(force.drag);

node.append("svg:image")
        .attr('width', function(d) {
            return d.r * 2;
        })
        .attr('height', function(d) {
            return d.r * 2;
        })
        // .attr('width', 20)
        // .attr('height', 20)
        .attr('x', function(d) {
            return -d.r;
        })
        .attr('y', function(d) {
            return -d.r;
        })
        .attr('xlink:href', function(d) {
            return "/uploads/160101/fashion/thumbs/" + Math.floor(d.rank / 20) + ".jpg";
        })

node.append("circle")
        .attr('r', function(d) {
            return d.r;
        })
        .attr("cx", function(d) {
            return d.cx;
        })
        .attr("cy", function(d) {
            return d.cy;
        });

function tick(e) {
        var k = .1 * e.alpha;

nodes.forEach(function(o, i) {
            o.y += (480 - o.y) * k;
            o.x += (480 - o.x) * k;
        });

node.attr("transform", function(d) {
            return "translate(" + d.x + "," + d.y + ")";
        });
    }

});

编译

CSS

HTML

d3, list, template, gallery

编辑器支持Emmet

快捷键

d3, list, template, gallery

HTML5 Rx.js使用随机几何图形元素构建网页全屏动画背景

HTML5 D3.js 树形结构动画示范（可绘制脑图）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：