我试图根据数据中的某个属性(例如“组”)强制将节点强制布局到不同的集群中。我正在改编 Mike Bostock 的多焦点力布局示例( code 、 example )中的代码，并且我已经成功添加了自己的数据，但我无法指定有多少个集群，并且如何将节点分配给集群。
我对 d3 和 JavaScript 比较陌生，而且我还没有找到很多多焦点应用程序的示例。这是我的 d3 代码，感谢任何帮助或输入:
var width = 960,
height = 500;
var fill = d3.scale.category10();
d3.json("test.json" , function(error, json){
var root = json.nodes[0];
root.radius = 0;
root.fixed = true;
var force = d3.layout.force()
.nodes(json.nodes)
.size([width, height])
.gravity(0.06)
.charge(function(d, i) { return i ? 0 : -2000; })
.on("tick", tick)
.start();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var elem = svg.selectAll(".elem")
.data(json.nodes)
.enter()
.append("g")
.attr("class", "elem");
elem.append("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 40)
.style("fill", function(d, i) { return fill(i & 3); })
.style("stroke", function(d, i) { return d3.rgb(fill(i & 3)).darker(2); })
.call(force.drag)
.on("mousedown", function() { d3.event.stopPropagation(); });
elem.append("text")
.text(function(d){ return d.name; });
svg.style("opacity", 1e-6)
.transition()
.duration(1000)
.style("opacity", 1);
d3.select("body")
.on("mousedown", mousedown);
我一直在专门尝试弄清楚这个刻度函数是如何工作的。我做了一些研究，发现“&”是一个按位运算符，我注意到更改它后面的数字会改变集群的数量以及每个集群中的节点。但最好我希望能够在这里指向 d.group 之类的东西来指定集群。
function tick(e) {
// Push different nodes in different directions for clustering.
var k = 6 * e.alpha;
json.nodes.forEach(function(o, i) {
o.y += i & 3 ? k : -k;
o.x += i & 2 ? k : -k;
});
var q = d3.geom.quadtree(json.nodes),
i = 0,
n = json.nodes.length;
while (++i < n) q.visit(collide(json.nodes[i]));
svg.selectAll("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
svg.selectAll("text")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; });
}
function collide(node) {
var r = node.radius + 16,
nx1 = node.x - r,
nx2 = node.x + r,
ny1 = node.y - r,
ny2 = node.y + r;
return function(quad, x1, y1, x2, y2) {
if (quad.point && (quad.point !== node)) {
var x = node.x - quad.point.x,
y = node.y - quad.point.y,
l = Math.sqrt(x * x + y * y),
r = node.radius + quad.point.radius;
if (l < r) {
l = (l - r) / l * .5;
node.x -= x *= l;
node.y -= y *= l;
quad.point.x += x;
quad.point.y += y;
}
}
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
};
}
svg.on("mousemove", function() {
var p1 = d3.mouse(this);
root.px = p1[0];
root.py = p1[1];
force.resume();
});
function mousedown() {
json.nodes.forEach(function(o, i) {
o.x += (Math.random() - .5) * 40;
o.y += (Math.random() - .5) * 40;
});
force.resume();
}
});
*请注意，我还实现了碰撞检测来排斥节点，但我认为这目前不会影响集群。
我的数据当前存储在名为 test.json 的 json 文件中:
{
"nodes":[
{
"name": "Null",
"radius": 40,
"color": "#ff0000",
"gravity": 0.05,
"group": 1
},
{
"name": "One",
"radius": 40,
"color": "#ffff00",
"gravity": 0.05,
"group": 1
},
{
"name": "Two",
"radius": 40,
"color": "#33cc33",
"gravity": 0.2,
"group": 1
},
{
"name": "Three",
"radius": 40,
"color": "#3399ff",
"gravity": 0.9,
"group": 1
},
{
"name": "Four",
"radius": 40,
"color": "#ffff00",
"gravity": 0.05,
"group": 6
},
{
"name": "Five",
"radius": 40,
"color": "#33cc33",
"gravity": 0.2,
"group": 6
},
{
"name": "Six",
"radius": 40,
"color": "#3399ff",
"gravity": 0.9,
"group": 6
}
]
}
最佳答案
所有的聚类工作都在这里进行:
// Push different nodes in different directions for clustering.
var k = 6 * e.alpha;
json.nodes.forEach(function(o, i) {
o.y += i & 3 ? k : -k;
o.x += i & 2 ? k : -k;
});
诚然，我不明白它在这个特定示例中是如何工作的。这似乎是间接且难以理解的。更一般地说，这就是您想要进行集群的操作:
force.on("tick", function(e) {
var k = e.alpha * .1;
nodes.forEach(function(node) {
var center = ...; // here you want to set center to the appropriate [x,y] coords
node.x += (center.x - node.x) * k;
node.y += (center.y - node.y) * k;
});
它直接取自this example，您可以查看源代码以查看代码。
在此代码中，更容易理解如何在滴答声中将节点推近所需的焦点。因此，现在您需要想出一种方法，根据其 group 参数将节点映射到焦点，以便您填写 var center = ...;线。
首先，您需要获取 json.nodes 中所有组的 list 。 d3.nest() 对此很有用:
var groups = d3.nest()
.key(function(d) { return d.group; })
.map(json.nodes)
这将为您提供组到节点的映射。由于您的示例 json 中只有 2 个组("1" 和 "6")，因此它看起来像这样:
{
"1": [
{
"name": "Null",
"radius": 40,
"color": "#ff0000",
"gravity": 0.05,
"group": 1
},
{
"name": "One",
"radius": 40,
"color": "#ffff00",
"gravity": 0.05,
"group": 1
},
{
"name": "Two",
"radius": 40,
"color": "#33cc33",
"gravity": 0.2,
"group": 1
},
{
"name": "Three",
"radius": 40,
"color": "#3399ff",
"gravity": 0.9,
"group": 1
}
],
"6": [
{
"name": "Four",
"radius": 40,
"color": "#ffff00",
"gravity": 0.05,
"group": 6
},
{
"name": "Five",
"radius": 40,
"color": "#33cc33",
"gravity": 0.2,
"group": 6
},
{
"name": "Six",
"radius": 40,
"color": "#3399ff",
"gravity": 0.9,
"group": 6
}
]
}
然后您可以循环组并根据需要为每个组分配一个中心点。如何做到这一点取决于您想要实现的目标。也许您希望将焦点分布在屏幕中心周围的圆圈中。这取决于你......但目标是最终得到 groups["1"].center 等于 {x:123, y:456}，因为这样您就可以从上面将其插回到刻度处理程序中:
force.on("tick", function(e) {
var k = e.alpha * .1;
nodes.forEach(function(node) {
var center = groups[node.group].center;
node.x += (center.x - node.x) * k;
node.y += (center.y - node.y) * k;
});
(希望如此)瞧!
关于d3.js - 通过d3中的数据属性创建节点集群的焦点？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23022429/