我正在将d3从v3.5.5转换为v5。我将浏览可用的旧功能,然后显示在新版本中遇到的问题。
这是起作用的旧功能
circle
.each(collide(.5))
.style("fill", function(d) { return d.color; })
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
// Resolve collisions between nodes.
function collide(alpha) {
var quadtree = d3.geom.quadtree(nodes);
return function(d) {
var r = d.radius + maxRadius + padding,
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.act !== quad.point.act) * padding;
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;
});
};
}
对象圆定义为
var circle = svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
this是一个节点的例子。
这是我的v5新版本
除了将d3.geom.quadtree(nodes)
替换为d3.quadtree(nodes)
之外,我的新版本相同。我无法在quadtree.visit
内部使用该函数。
所有需要的值(x1,x2,y1,y2)都存在于节点对象中。
quadtree.visit是否有不同的语法?