We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
在之前数据库表的基础上做了一个模拟数据,到1000张左右的时候 会比较卡,请问如何处理数据量大的问题呢? `$(function () {
var dataObj = { nodes: [], edges: [], }; for (var i = 0; i < 1500; i++) { var nodesObj = { "shape": "table", "x": Math.floor(Math.random() * 9999), "y": Math.floor(Math.random() * 9999), "id": "d62q1519", "title": "Division", "type": "B", "fields": [ { "name": "Employee number", "type": "Numberic(5)", "key": "<pk>" }, { "name": "Emp_Employee number", "type": "Numberic(5)", "key": "<fk1>" }, { "name": "Division", "type": "Numberic(5)", "key": "<fk2>" }, { "name": "FirstName", "type": "Chart(30)", "key": "" } ] }; var edgesObj = { "shape": "arrow", "source": "d62d1569", "id": "d6cb23c5", "target": "d62d1519", "controlPoints": [ { "x": Math.floor(Math.random() * 9999), "y": Math.floor(Math.random() * 9999) }, { "x": Math.floor(Math.random() * 9999), "y": Math.floor(Math.random() * 9999) }, { "x": Math.floor(Math.random() * 9999), "y": Math.floor(Math.random() * 9999) } ], "relation": "service", "sourceAnchor": 2 }; edgesObj.source = edgesObj.target = nodesObj.id = Math.random().toString(36).substr(2); edgesObj.id = Math.random().toString(36).substr(2); dataObj.nodes.push(nodesObj); dataObj.edges.push(edgesObj); } var Util = G6.Util; G6.registNode('table', { draw: function (cfg, group) { var x = cfg.x; var y = cfg.y; var origin = cfg.origin; var fields = origin.fields; var backRect = group.addShape('rect', { attrs: { stroke: 'blue', fill: cfg.color } }); var nameGroup = group.addGroup(); var typeGroup = group.addGroup(); var keyGroup = group.addGroup(); var lineHeight = 20; var marginRight = 10; var padding = 6; var l = fields.length; var fontHeight; var anchorPoints = []; var title; var titleBox; var nameBox; var typeBox; var keyBox; var width; var height; var splitLine; title = group.addShape('text', { attrs: { x: x, y: y, text: origin.title, fill: '#333', textBaseline: 'top', textAlign: 'center' } }); splitLine = group.addShape('line', { attrs: { stroke: '#fff' } }); Util.each(fields, function (field, i) { nameGroup.addShape('text', { attrs: { x: x, y: y + 20 * i, text: field.name, fill: '#333', textBaseline: 'top' } }); typeGroup.addShape('text', { attrs: { x: x, y: y + 20 * i, text: field.type, fill: '#333', textBaseline: 'top' } }); keyGroup.addShape('text', { attrs: { x: x, y: y + 20 * i, text: field.key, fill: '#333', textBaseline: 'top' } }); }); titleBox = title.getBBox(); nameBox = nameGroup.getBBox(); typeBox = typeGroup.getBBox(); keyBox = keyGroup.getBBox(); width = nameBox.width + typeBox.width + keyBox.width + 3 * marginRight + 2 * padding; height = Math.max(nameBox.height, typeBox.height, keyBox.height) + 4 * padding + titleBox.height; fontHeight = nameGroup.get('children')[0].getBBox().height; title.translate(0, -height / 2 + padding); nameGroup.translate(-width / 2 + padding, -height / 2 + titleBox.height + 3 * padding); typeGroup.translate(-width / 2 + nameBox.width + marginRight + padding, -height / 2 + titleBox.height + 3 * padding); keyGroup.translate(-width / 2 + nameBox.width + typeBox.width + 2 * marginRight + padding, -height / 2 + titleBox.height + 3 * padding); splitLine.attr({ x1: cfg.x - width / 2, y1: cfg.y - height / 2 + 2 * padding + titleBox.height, x2: cfg.x + width / 2, y2: cfg.y - height / 2 + 2 * padding + titleBox.height }); backRect.attr({ x: x - width / 2, y: y - height / 2, width: width, height: height, stroke: 'blue', fill: cfg.color }); Util.each(fields, function (field, i) { var r = ( titleBox.height + i * (nameBox.height + lineHeight - fontHeight) / l + fontHeight / 2 + 3 * padding) / height; anchorPoints.push([0, r]); anchorPoints.push([1, r]); }); group.set('anchorPoints', anchorPoints); return backRect; }, getAnchorPoints: function (cfg, group) { var anchorPoints = group.get('anchorPoints'); anchorPoints.unshift([0.5, 0]); // 上中 anchorPoints.push([0.5, 1]); // 下中 return anchorPoints; } }); var net = new G6.Net({ id: 'c1', // 容器ID height: 900, // 画布高 fitView: 'autoZoom', // 自动缩放 grid: { cell: 10 // 网格大小 } }); net.source(dataObj.nodes, dataObj.edges); net.node().color('type', function (val) { if (val === "B") { return G6.Global.colors[0]; } if (val === "C") { return G6.Global.colors[1]; } }); net.edge().label('relation'); net.render(); });`
The text was updated successfully, but these errors were encountered:
对于数据比较大的情况,应进行一下优化:
complicated
Sorry, something went wrong.
参考代码
var data = { nodes: [], edges: [] }; var net = new G6.Net({ id: 'c1', // 容器ID mode: 'complicated', // 复杂模式下,缩放和拖动会隐藏边 width: 500, height: 300 }); net.tooltip(true); net.source(data.nodes, data.edges); net.node().tooltip('id'); net.render();
fix: remove father build config (antvis#16)
4c94dec
* fix: remove father build config * fix: update package version
No branches or pull requests
在之前数据库表的基础上做了一个模拟数据,到1000张左右的时候 会比较卡,请问如何处理数据量大的问题呢?
`$(function () {
The text was updated successfully, but these errors were encountered: