我可以让 go.js 强制导向布局排除组吗?
Can I have go.js force-directed layout exclude groups?
我正在使用 go.js 制作带有节点的概念图,在某些情况下是组内的节点 - 链接始终位于节点之间,而不是直接指向组容器,但内部节点和节点之间存在链接组外。
当没有组时,力导向布局可以很好地正确 space 出节点。但是,如果组中有节点,则力导向布局似乎将组布局为就好像它是单个节点一样,这对于节点连接而言可能不是最佳选择。有没有办法让布局只与节点有关,即使这意味着组可能重叠、比需要的更大或以其他方式混乱?对我来说,这些组只是背景类别云,它实际上是我想要优化排列的节点。
要阻止群组参与布局,在您的群组模板中,您可以在 Group
上设置 isLayoutPositioned: false
。
但是如果您希望所有节点都受到相同布局的影响,而不仅仅是顶级节点(不在组中的节点),那么您将不得不这样做:
var layout = $(go.ForceDirectedLayout);
layout.doLayout(myDiagram.nodes);
而不是设置图表的布局。这样布局将使用整组节点,而不仅仅是顶级节点。
这是一个简单的例子:
function init() {
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram = $(go.Diagram, "myDiagram", // create a Diagram for the DIV HTML element
{
initialContentAlignment: go.Spot.Center, // center the content
"undoManager.isEnabled": true // enable undo & redo
});
// define a simple Node template
myDiagram.nodeTemplate =
$(go.Node, "Auto", // the Shape will go around the TextBlock
$(go.Shape, "RoundedRectangle",
// Shape.fill is bound to Node.data.color
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 3 }, // some room around the text
// TextBlock.text is bound to Node.data.key
new go.Binding("text", "key"))
);
myDiagram.groupTemplate =
$(go.Group, "Vertical",
{ isLayoutPositioned: false,
selectionObjectName: "PANEL", // selection handle goes around shape, not label
ungroupable: true }, // enable Ctrl-Shift-G to ungroup a selected Group
$(go.TextBlock,
{
font: "bold 19px sans-serif",
isMultiline: false, // don't allow newlines in text
editable: true // allow in-place editing by user
},
new go.Binding("text", "text").makeTwoWay(),
new go.Binding("stroke", "color")),
$(go.Panel, "Auto",
{ name: "PANEL" },
$(go.Shape, "Rectangle", // the rectangular shape around the members
{ fill: "rgba(128,128,128,0.2)", stroke: "gray", strokeWidth: 3 }),
$(go.Placeholder, { padding: 10 }) // represents where the members are
)
);
// create the model data that will be represented by Nodes and Links
myDiagram.model = new go.GraphLinksModel(
[
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "orange" },
{ key: "Gamma", group: "G", color: "lightgreen" },
{ key: "Delta", group: "G", color: "pink" },
{ key: "G", isGroup: true, color: "pink" },
],
[
]);
var layout = $(go.ForceDirectedLayout);
layout.doLayout(myDiagram.nodes);
}
init();
<script src="http://gojs.net/latest/release/go.js"></script>
<body>
<div id="myDiagram" style="border: solid 3px red; width:400px; height:400px"></div>
</body>
我正在使用 go.js 制作带有节点的概念图,在某些情况下是组内的节点 - 链接始终位于节点之间,而不是直接指向组容器,但内部节点和节点之间存在链接组外。
当没有组时,力导向布局可以很好地正确 space 出节点。但是,如果组中有节点,则力导向布局似乎将组布局为就好像它是单个节点一样,这对于节点连接而言可能不是最佳选择。有没有办法让布局只与节点有关,即使这意味着组可能重叠、比需要的更大或以其他方式混乱?对我来说,这些组只是背景类别云,它实际上是我想要优化排列的节点。
要阻止群组参与布局,在您的群组模板中,您可以在 Group
上设置 isLayoutPositioned: false
。
但是如果您希望所有节点都受到相同布局的影响,而不仅仅是顶级节点(不在组中的节点),那么您将不得不这样做:
var layout = $(go.ForceDirectedLayout);
layout.doLayout(myDiagram.nodes);
而不是设置图表的布局。这样布局将使用整组节点,而不仅仅是顶级节点。
这是一个简单的例子:
function init() {
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram = $(go.Diagram, "myDiagram", // create a Diagram for the DIV HTML element
{
initialContentAlignment: go.Spot.Center, // center the content
"undoManager.isEnabled": true // enable undo & redo
});
// define a simple Node template
myDiagram.nodeTemplate =
$(go.Node, "Auto", // the Shape will go around the TextBlock
$(go.Shape, "RoundedRectangle",
// Shape.fill is bound to Node.data.color
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 3 }, // some room around the text
// TextBlock.text is bound to Node.data.key
new go.Binding("text", "key"))
);
myDiagram.groupTemplate =
$(go.Group, "Vertical",
{ isLayoutPositioned: false,
selectionObjectName: "PANEL", // selection handle goes around shape, not label
ungroupable: true }, // enable Ctrl-Shift-G to ungroup a selected Group
$(go.TextBlock,
{
font: "bold 19px sans-serif",
isMultiline: false, // don't allow newlines in text
editable: true // allow in-place editing by user
},
new go.Binding("text", "text").makeTwoWay(),
new go.Binding("stroke", "color")),
$(go.Panel, "Auto",
{ name: "PANEL" },
$(go.Shape, "Rectangle", // the rectangular shape around the members
{ fill: "rgba(128,128,128,0.2)", stroke: "gray", strokeWidth: 3 }),
$(go.Placeholder, { padding: 10 }) // represents where the members are
)
);
// create the model data that will be represented by Nodes and Links
myDiagram.model = new go.GraphLinksModel(
[
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "orange" },
{ key: "Gamma", group: "G", color: "lightgreen" },
{ key: "Delta", group: "G", color: "pink" },
{ key: "G", isGroup: true, color: "pink" },
],
[
]);
var layout = $(go.ForceDirectedLayout);
layout.doLayout(myDiagram.nodes);
}
init();
<script src="http://gojs.net/latest/release/go.js"></script>
<body>
<div id="myDiagram" style="border: solid 3px red; width:400px; height:400px"></div>
</body>