早上好!
我在D3.js的气泡图上工作,我非常接近我所需要的, 但是在更新数据(更改集)时我遇到了行为问题。 我希望气泡保持原位,更新尺寸和位置,而不会因为切割而产生弹性效应:(
function convertData(m){
var nodes = m;
nodes.forEach(function(d) {
clusters[d.cluster] = d;
d.radius = Math.ceil(Math.sqrt(d.pop/Math.PI))*10;
});
return nodes;
}
function updateAnnee(annee){
nodes = convertData(annee);
var svg = d3.select("svg")
var node = svg.selectAll("circle")
.data(nodes)
node.transition()
.duration(0)
.attr('r', function(d){ return d.radius});
node
.enter().append("circle")
node
.exit().remove();
var force = d3.layout.force()
.nodes(nodes)
.size([width, height])
.gravity(.02)
.charge(0)
.on("tick", tick)
.start();
function tick(e) {
node
.each(cluster(10 * e.alpha * e.alpha))
.each(collide(.5))
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y-50; })
}
// Move d to be adjacent to the cluster node.
function cluster(alpha) {
return function(d) {
var cluster = clusters[d.cluster];
if (cluster === d) return;
var x = d.x - cluster.x,
y = d.y - cluster.y,
l = Math.sqrt(x * x + y * y),
r = d.radius + cluster.radius;
if (l != r) {
l = (l - r) / l * alpha;
d.x -= x *= l;
d.y -= y *= l;
cluster.x += x;
cluster.y += y;
}
};
}
// Resolves collisions between d and all other circles.
function collide(alpha) {
var quadtree = d3.geom.quadtree(nodes);
return function(d) {
var r = d.radius + maxRadius + Math.max(padding, clusterPadding),
nx1 = d.x - r,
nx2 = d.x + r,
ny1 = d.y - r,
ny2 = d.y + r;
quadtree.visit(function(quad, x1, y1, x2, y2) {
if (quad.point && (quad.point !== d)) {
var x = d.x - quad.point.x,
y = d.y - quad.point.y,
l = Math.sqrt(x * x + y * y),
r = d.radius + quad.point.radius + (d.cluster === quad.point.cluster ? padding : clusterPadding);
if (l < r) {
l = (l - r) / l * alpha;
d.x -= x *= l;
d.y -= y *= l;
quad.point.x += x;
quad.point.y += y;
}
}
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
});
};
}
}
到目前为止我可以在这里查看:https://jsfiddle.net/hf998do7/1/
这是基于博斯托克先生http://bl.ocks.org/mbostock/7881887
的工作由于