I use a fishbone diagram layout. When I have too many nodes, there will be the effect of node overlap. How can I avoid this situation? Using layerSpacing cannot solve this problem at all.
This is the demo link https://jshare.com.cn/scholar/h9G0zc
Please help me, thanks!
Wow, that site is excruciatingly slow to load…
Still waiting…
I’m giving up.
I think increasing the TreeLayout.rowSpacing might help.
Yes, using TreeLayout.rowSpacing can temporarily solve this problem, but when I go to add a lot of nodes, there will still be overlaps. This is a demo I wrote, you can see it.
Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.1.18/go.js"></script>
</head>
<body>
<div id="myDiagramDiv" style="width: 100%;height: 100vh;"></div>
<script src="./data.js"></script>
<script src="./FishboneLayout.js"></script>
<script>
const MAKE = go.GraphObject.make;
const linkGeo = 'M440.236 635.766c-13.31 0-26.616-5.076-36.77-15.23-95.134-95.136-95.134-249.934 0-345.070l192-192c46.088-46.086 107.36-71.466 172.534-71.466s126.448 25.38 172.536 71.464c95.132 95.136 95.132 249.934 0 345.070l-87.766 87.766c-20.308 20.308-53.23 20.308-73.54 0-20.306-20.306-20.306-53.232 0-73.54l87.766-87.766c54.584-54.586 54.584-143.404 0-197.99-26.442-26.442-61.6-41.004-98.996-41.004s-72.552 14.562-98.996 41.006l-192 191.998c-54.586 54.586-54.586 143.406 0 197.992 20.308 20.306 20.306 53.232 0 73.54-10.15 10.152-23.462 15.23-36.768 15.23z", "M256 1012c-65.176 0-126.45-25.38-172.534-71.464-95.134-95.136-95.134-249.934 0-345.070l87.764-87.764c20.308-20.306 53.234-20.306 73.54 0 20.308 20.306 20.308 53.232 0 73.54l-87.764 87.764c-54.586 54.586-54.586 143.406 0 197.992 26.44 26.44 61.598 41.002 98.994 41.002s72.552-14.562 98.998-41.006l192-191.998c54.584-54.586 54.584-143.406 0-197.992-20.308-20.308-20.306-53.232 0-73.54 20.306-20.306 53.232-20.306 73.54 0.002 95.132 95.134 95.132 249.932 0.002 345.068l-192.002 192c-46.090 46.088-107.364 71.466-172.538 71.466z'
const fileGeo = 'M27.879 5.879l-3.757-3.757c-1.167-1.167-3.471-2.121-5.121-2.121h-14c-1.65 0-3 1.35-3 3v26c0 1.65 1.35 3 3 3h22c1.65 0 3-1.35 3-3v-18c0-1.65-0.955-3.955-2.121-5.121zM20 4.236c0.069 0.025 0.139 0.053 0.211 0.082 0.564 0.234 0.956 0.505 1.082 0.631l3.757 3.757c0.126 0.126 0.397 0.517 0.631 1.082 0.030 0.072 0.057 0.143 0.082 0.211h-5.764v-5.764zM26 28h-20v-24h12v8h8v16zM8 16h16v2h-16zM8 20h16v2h-16zM8 24h16v2h-16z'
// console.log(json)
function initDiagram() {
myDiagram = MAKE(go.Diagram, "myDiagramDiv", {
allowMove: false,
"allowCopy": false,
"commandHandler.deletesTree": true,
"commandHandler.copiesTree": true,
"commandHandler.copiesParentKey": true,
"draggingTool.dragsTree": true,
"animationManager.isEnabled": false,
"undoManager.isEnabled": true,
"toolManager.hoverDelay": 100
})
myDiagram.linkTemplateMap.add("fishbone", MAKE(FishboneLink, MAKE(go.Shape)))
myDiagram.nodeTemplateMap.add('',
MAKE(go.Node, "Horizontal",
{ selectionObjectName: "BODY" },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
nodeStyle(),
MAKE("TreeExpanderButton", { alignment: go.Spot.Left })
)
)
myDiagram.nodeTemplate.contextMenu = MAKE("ContextMenu",
MAKE("ContextMenuButton",
MAKE(go.TextBlock, "Add Children"),
{
click: function (e, obj) {
var node = obj.part.adornedPart;
if (node !== null) {
let lev = node.findTreeLevel()
let newdata
if (lev == 0) {
newdata = [{
text: "子主题",
parent: node.data.key,
fishHead: false,
fontFamily: '微软雅黑',
fontSize: '14px',
fontBold: '',
fontTilt: '',
font: '14px 微软雅黑',
fontColor: '#000000',
underline: false,
strikethrough: false,
textAlign: 'left',
borderWidth: 1,
borderStyle: 1,
borderColor: '#898989',
borderAngle: 1,
nodeBgColor: '#ffffff',
figure: 'RoundedRectangle',
strokeDashArray: [0, 0],
strokeCap: 'butt',
remarks: '',
items: [],
link: '',
linkTitle: ''
}]
} else {
newdata = [{
text: "子主题",
parent: node.data.key,
fishHead: false,
fontFamily: '微软雅黑',
fontSize: '12px',
fontBold: '',
fontTilt: '',
font: '12px 微软雅黑',
fontColor: '#000000',
underline: false,
strikethrough: false,
textAlign: 'left',
borderWidth: 0,
borderStyle: 0,
borderColor: '#898989',
borderAngle: 0,
nodeBgColor: 'transparent',
figure: 'Rectangle',
strokeDashArray: [0, 0],
strokeCap: 'butt',
remarks: '',
items: [],
link: '',
linkTitle: ''
}]
}
myDiagram.model.addNodeDataCollection(newdata)
}
}
}
)
)
myDiagram.model = new go.TreeModel(json);
layoutFishbone(true)
}
function nodeStyle() {
return [
MAKE(go.Panel, "Auto",
{ name: "BODY" },
MAKE(go.Shape,
new go.Binding("figure", "figure"),
{
fill: "#eafcf5",
stroke: '#ff6700',
strokeWidth: 1,
minSize: new go.Size(50, 20),
cursor: "pointer",
strokeCap: "square",
},
new go.Binding("fill", "nodeBgColor"),
new go.Binding("strokeWidth", "borderWidth"),
new go.Binding("strokeDashArray", "strokeDashArray"),
new go.Binding("strokeCap", "strokeCap"),
new go.Binding("stroke", "borderColor"),
),
MAKE(go.Panel, "Vertical",
MAKE(go.Panel, "Horizontal",
new go.Binding("alignment", "textAlign", (v) => {
if (v == 'left') return go.Spot.Left
if (v == 'center') return go.Spot.Center
if (v == 'right') return go.Spot.Right
}),
MAKE(go.TextBlock,
{
verticalAlignment: go.Spot.Center,
stroke: '#000000',
minSize: new go.Size(20, 10),
maxSize: new go.Size(500, NaN),
margin: new go.Margin(4, 5, 2, 5),
isMultiline: true, // 文本中允许换行
editable: true, //允许用户就地编辑
name: "TEXT"
},
new go.Binding("isStrikethrough", "strikethrough"),
new go.Binding("isUnderline", "underline"),
// new go.Binding("textAlign", "textAlign"),
new go.Binding("font", "font"),
new go.Binding("stroke", "fontColor"),
new go.Binding("text", "text").makeTwoWay()
),
MAKE(go.Shape,
{
fill: '#666666',
margin: 4,
desiredSize: new go.Size(12, 14),
cursor: "pointer",
geometry: go.Geometry.parse(fileGeo, true),
strokeWidth: 0,
mouseEnter: (e, port) => {
port.fill = "#eac449";
},
mouseLeave: function (e, port) {
port.fill = "#666666";
},
click: (e, node) => {
// console.log(node.part.data)
},
toolTip: MAKE("ToolTip",
MAKE(go.TextBlock,
{
margin: 4,
maxSize: new go.Size(100, NaN)
},
new go.Binding("text", "remarks")
)
),
},
new go.Binding("visible", "remarks", (v) => !!v)
),
MAKE(go.Shape,
{
fill: '#0072fc',
margin: 4,
desiredSize: new go.Size(12, 14),
cursor: "pointer",
geometry: go.Geometry.parse(linkGeo, true),
strokeWidth: 0,
mouseEnter: (e, port) => {
port.fill = "#63abf7";
},
mouseLeave: function (e, port) {
port.fill = "#0072fc";
},
click: (e, node) => {
window.open(node.part.data.link)
},
toolTip: MAKE("ToolTip",
new go.Binding("visible", "linkTitle", (v) => !!v),
MAKE(go.TextBlock,
{
margin: 4,
maxSize: new go.Size(100, NaN)
},
new go.Binding("text", "linkTitle")
)
),
},
new go.Binding("visible", "link", (v) => !!v)
), // 链接
),
MAKE(go.Panel, "Horizontal",
{
itemTemplate: MAKE(go.Panel, "Horizontal",
MAKE(go.Panel, 'Auto',
{
margin: new go.Margin(0, 2),
click: (e, node) => {
if (e.control) return
this.myDiagram.select(node.part)
this.selectData = node.part.data
this.visible = true
this.$refs.nodeEdit.activeNum = 2
this.mask = false
this.isSingle = true
},
},
MAKE(go.Shape, 'RoundedRectangle',
{
fill: '#0072fc',
strokeWidth: 0,
minSize: new go.Size(12, 12),
},
new go.Binding("fill", "bgColor"),
),
MAKE(go.TextBlock,
{
stroke: "#ffffff",
font: "12px sans-serif",
margin: 0
},
new go.Binding("text", "name"),
new go.Binding("stroke", "fontColor"),
)
),
)
},
new go.Binding("alignment", "textAlign", (v) => {
if (v == 'left') return go.Spot.Left
if (v == 'center') return go.Spot.Center
if (v == 'right') return go.Spot.Right
}),
new go.Binding("visible", "items", (v) => v.length > 0),
new go.Binding("itemArray", "items"),
),
)
)
]
}
function layoutFishbone(bool) {
if (bool) {
myDiagram.model.commit((m) => {
m.set(m, 'nodeDataArray', JSON.parse(myDiagram.model.toJson()).nodeDataArray)
}, 'flash')
}
myDiagram.startTransaction("fishbone layout");
myDiagram.linkTemplate = myDiagram.linkTemplateMap.get("fishbone");
myDiagram.layout = go.GraphObject.make(FishboneLayout, {
angle: 180,
// layerSpacing: 30,
nodeSpacing: 30,
rowSpacing: 20,
});
myDiagram.commitTransaction("fishbone layout");
}
initDiagram()
</script>
</body>
</html>
Too much data can’t fit.What performance can be optimized in the code, I hope you can point out, thank you.
I’m unable to reproduce the problem in the original sample, even after trying all kinds of combinations of very long text and very short text replacing the “sales staff” and “knowledge” strings.
I’m unable to really try your code, since I do not have those fonts.
If you artificially increase the space around the TextBlock by adding a margin, does that help?
myDiagram.nodeTemplate =
$(go.Node,
$(go.TextBlock, { margin: 4 },
new go.Binding("text"),
new go.Binding("font", "", convertFont))
);
I tried using margins to increase the spacing but it didn’t solve it at all. I reduced the data and uploaded it now. You can try to reproduce my problem again.
[
{
"key":0,
"parent":"",
"text":"未命名文件",
"loc":"2203.297017478004 546.834372967904",
"nodeBgColor":"#50c28b",
"borderWidth":0,
"borderAngle":1,
"borderStyle":0,
"borderColor":"#898989",
"font":" 16px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"RoundedRectangle",
"fontColor":"#ffffff",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"16px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":true,
"group":"0",
"isGroup":"true",
"category":"",
"items":[
]
},
{
"key":2,
"parent":0,
"text":"测试添加",
"loc":"2065.697877050431 517.451953125",
"nodeBgColor":"#ffffff",
"borderWidth":1,
"borderAngle":1,
"borderStyle":1,
"borderColor":"#898989",
"font":" 14px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"RoundedRectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"14px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"0",
"isGroup":"true",
"category":"",
"items":[
]
},
{
"key":10,
"parent":0,
"text":"子主题",
"loc":"2079.697877050431 577.7571248420579",
"nodeBgColor":"#ffffff",
"borderWidth":1,
"borderAngle":1,
"borderStyle":1,
"borderColor":"#898989",
"font":" 14px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"RoundedRectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"14px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"0",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":12,
"parent":0,
"text":"哈哈",
"loc":"1719.449052989623 0",
"nodeBgColor":"#ffffff",
"borderWidth":1,
"borderAngle":1,
"borderStyle":1,
"borderColor":"#898989",
"font":" 14px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"RoundedRectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"14px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"0",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":14,
"parent":0,
"text":"EEEEE",
"loc":"2004.6887014271233 577.7571248420579",
"nodeBgColor":"#ffffff",
"borderWidth":1,
"borderAngle":1,
"borderStyle":1,
"borderColor":"#898989",
"font":" 14px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"RoundedRectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"14px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"0",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":16,
"parent":0,
"text":"测试添加",
"loc":"608.9101165952173 141.24199218750005",
"nodeBgColor":"#ffffff",
"borderWidth":1,
"borderAngle":1,
"borderStyle":1,
"borderColor":"#898989",
"font":" 14px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"RoundedRectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"14px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"0",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-19,
"parent":12,
"text":"QQ群",
"loc":"683.0321045210976 75.9261678108079",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-20,
"parent":-19,
"text":"QQ群",
"loc":"1661.0972677149164 50.30517171705789",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-22,
"parent":-19,
"text":"QQ群",
"loc":"1318.8290120924544 476.5151326545579",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-43,
"parent":-42,
"text":"QQ群",
"loc":"1199.9465922495503 241.5471639045579",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-44,
"parent":-42,
"text":"QQ群",
"loc":"1257.711431935358 435.27314046705794",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-42,
"parent":-22,
"text":"QQ群",
"loc":"632.6919637381552 409.6521443733079",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-46,
"parent":-45,
"text":"QQ群",
"loc":"1579.5744202166084 151.54716390455786",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-47,
"parent":-45,
"text":"QQ群",
"loc":"1549.5744202166081 202.78915609205788",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-45,
"parent":-22,
"text":"QQ群",
"loc":"1636.7639221697332 177.16815999830789",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-49,
"parent":-48,
"text":"QQ群",
"loc":"1138.8290120924544 282.78915609205785",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-50,
"parent":-48,
"text":"QQ群",
"loc":"1168.8290120924544 334.0311482795579",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-48,
"parent":-43,
"text":"QQ群",
"loc":"1065.1166626410209 308.4101521858079",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-52,
"parent":-51,
"text":"QQ群",
"loc":"206.5354838222029 191.54716390455798",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-53,
"parent":-51,
"text":"QQ群",
"loc":"708.1827433509147 476.515132654558",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-51,
"parent":16,
"text":"QQ群",
"loc":"81.424698902866 450.89413656080796",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-55,
"parent":-54,
"text":"QQ群",
"loc":"191.03889975885684 324.0311482795579",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-56,
"parent":-54,
"text":"QQ群",
"loc":"221.03889975885687 375.27314046705794",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-54,
"parent":-52,
"text":"QQ群",
"loc":"117.32655030742393 349.6521443733079",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-59,
"parent":-57,
"text":"QQ群",
"loc":"321.0388997588569 232.78915609205796",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-58,
"parent":-57,
"text":"目前在上面",
"loc":"351.03889975885687 284.031148279558",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-57,
"parent":-52,
"text":"QQ群",
"loc":"578.2284017119819 258.410152185808",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-61,
"parent":-60,
"text":"QQ群",
"loc":"711.404313189588 334.03114827955795",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-62,
"parent":-60,
"text":"QQ群",
"loc":"989.2148112364624 329.6521443733079",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-60,
"parent":-42,
"text":"QQ群",
"loc":"651.9008972529341 151.54716390455792",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-64,
"parent":-63,
"text":"QQ群",
"loc":"847.0253092833382 254.03114827955793",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-65,
"parent":-63,
"text":"QQ群",
"loc":"927.0253092833382 254.03114827955793",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-63,
"parent":-62,
"text":"QQ群",
"loc":"899.3848816279342 212.78915609205796",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-66,
"parent":-60,
"text":"子主题",
"loc":"690.7833170958382 292.78915609205796",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-67,
"parent":-57,
"text":"子主题",
"loc":"391.0388997588569 232.78915609205796",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-69,
"parent":-68,
"text":"QQ群",
"loc":"466.03889975885687 334.031148279558",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-70,
"parent":-68,
"text":"QQ群",
"loc":"546.0388997588568 334.031148279558",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
},
{
"key":-68,
"parent":-57,
"text":"QQ群",
"loc":"518.3984721034528 375.273140467058",
"nodeBgColor":"transparent",
"borderWidth":0,
"borderAngle":0,
"borderStyle":0,
"borderColor":"#898989",
"font":"12px 微软雅黑",
"underline":false,
"strikethrough":false,
"figure":"Rectangle",
"fontColor":"#000000",
"fontTilt":"",
"strokeDashArray":[
0,
0
],
"strokeCap":"butt",
"fontBold":"",
"fontSize":"12px",
"fontFamily":"微软雅黑",
"textAlign":"left",
"link":"",
"linkTitle":"",
"remarks":"",
"fishHead":false,
"group":"",
"isGroup":"",
"category":"",
"items":[
]
}
]
Thanks – I can reproduce the problem now. We’ll look at it tomorrow.
In the meantime, you could try this work-around modification of FishboneLayout in the extensions/FishboneLayout.js file. Add this override:
FishboneLayout.prototype.layoutTree = function(v) {
go.TreeLayout.prototype.layoutTree.call(this, v);
v.subtreeSize.width *= 1.16;
}
You may need to adjust that constant to be slightly smaller or slightly larger, depending on the tree-structures you might show.