如何在 D3.js力定向图中设置焦点节点
How do I set the focal node in a D3.js Force Directed Graph?
我有一个数据集,它定义了要在力定向图中使用的节点数量。 看起来...
var nodeSet = [
{id: "N1", name: "Node 1", type: "Type 1", hlink: "http://www.if4it.com"},
{id: "N2", name: "Node 2", type: "Type 3", hlink: "http://www.if4it.com/glossary.html"},
{id: "N3", name: "Node 3", type: "Type 4", hlink: "http://www.if4it.com/resources.html"},
{id: "N4", name: "Node 4", type: "Type 5", hlink: "http://www.if4it.com/taxonomy.html"},
{id: "N5", name: "Node 5", type: "Type 1", hlink: "http://www.if4it.com/disciplines.html"}
];
如何具体告诉 d3.js 库中的 force.layout 使用 id = "N1" 的"节点 1"作为主根节点或焦点节点?
如果您只需要一个根节点,则可以在对象中拥有一个根属性并将其设置为 true,而不是单独处理该节点。您还可以将此根设置为居中。以下是我们的做法(d3 + 原型 - 当时 - 现在切换到 d3+jQuery+underscore):
getCenter: function() {
var center = {
x : this.width / 2,
y : this.height / 2
};
return center;
}
//later do something like this in your init method:
var first = {
id : id,
name : name,
x : this.getCenter().x,
y : this.getCenter().y,
root : true,
//other properties
};
//later in your redraw() or other methods you might employ...
//try to find the root node later in the code using something like:
var rootNode = this.nodes.detect(function(node) {
return node.root;
});
//do something to the root node after you have detected it...
if (rootNode) {
rootNode.x = rootNode.px = this.getCenter().x;
rootNode.y = rootNode.py = this.getCenter().y;
//some other stuff...
}
我们就是这样做的。但是我不清楚您的示例中的链接是什么......有点不解。正如你会注意到的,对于力导向的布局或更复杂的动画,你几乎总是需要使用D3+其他东西(原型,jQuery,下划线)来用于简单的方法,如检测或包含或其他类似的Ruby风格方法。
我不确定你所说的焦点节点或根节点是什么意思。如果要在特定位置(例如中心)修复某个节点,则可以将其"fixed"属性设置为 true。有关详细信息,请参阅在 D3 强制导向布局中固定节点位置,以及移动 D3 中的固定节点。
我不认为您的力定向径向图示例确实表明 d3 隐式使用节点列表中的第一个节点作为"根"节点。由于网络结构,示例中的节点 1 始终向中心倾斜。如果将节点 1 放在节点数组的后面,则其行为是相同的。
相关文章:
- 在jAlert之后设置焦点
- 设置焦点动态创建的文本区域
- 渲染后如何在输入字段上设置焦点
- 如何在动态树标题中的输入字段上设置焦点
- react:如何通过点击处理程序设置焦点
- 在ADF弹出窗口中设置焦点组件
- 如何在隐藏的文本框上设置焦点
- EmberJS中的全局keyDown/keyPress事件,而无需设置焦点
- 弹出窗口设置焦点
- 尝试以编程方式设置焦点不适用于 Firefox
- 如何在 D3.js力定向图中设置焦点节点
- 无法在 Firefox/Opera 中设置焦点
- 无法使用 JavaScript 在文本框上设置焦点
- 在文本区域字段中设置焦点和突出显示
- 在jquery/javascript的输入框中的特定项目之后设置焦点
- 通过单击元素设置焦点,但不包括某些子项
- 客户端按键处理事件、设置焦点功能、__doPostBack ASP.NET
- 使用 jQuery 的 .focus() 在 Mac 上的 Firefox 中设置焦点
- 使用主镜头设置焦点
- 如何在aspx页面中的用户控件文本框上设置焦点