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

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

//可用于构造球形照片墙

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 + ")";

});

}

});