FMa*_*008 11 d3.js force-layout
当我点击一个节点时,我的节点变大了,而现在它变得更大了,我希望他能够更多地排斥其他节点.如何更改节点的费用?
代码摘录:
[...]
//draw new graph
d3.json(file, function(error, graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var nodeCircle = node.append("circle")
.attr("id", function(d) { return "node"+d.id })
.attr("class", function(d) {return "node "+d.nodeclass; })
.attr("r", 8) // R = Radius of node
.style("fill", function(d) { return d.color; }) // Will overwrite CSS style
.on("click",function(d) {
//When CTRL key is pressed ....
if (d3.event.ctrlKey) {
if(d3.select(this).attr('r')==8){
d3.select(this).attr('r', 12);
//ToDo: node Charge = -1000
}else{
d3.select(this).attr('r', 8);
//ToDo: node Charge = -500
}
}
}).call(force.drag);
[...]
Run Code Online (Sandbox Code Playgroud)
小智 8
function click(d1,i){
force.charge(
function(d2,i){
if(d2!=d1)
return ...;//calculate your charge for other nodes
else
return ...;//calculate your charge for the clicked node
});
force.start();
}
Run Code Online (Sandbox Code Playgroud)
这对我来说很好!! 如我错了请纠正我..!
从文档:
force.charge([电荷])
如果指定了电荷,则将充电强度设置为指定值.如果未指定充电,则返回当前充电强度,默认为-30.如果电荷是常数,则所有节点具有相同的电荷.否则,如果charge是一个函数,则为每个节点(按顺序)计算函数,传递节点及其索引,并将此上下文作为强制布局; 然后,函数的返回值用于设置每个节点的费用.无论何时布局开始,都会评估该函数.
所以你需要做的是指定一个函数,charge()为相关节点提供不同的费用并再次启动布局.
| 归档时间: |
|
| 查看次数: |
4728 次 |
| 最近记录: |