diff --git a/CHANGELOG.md b/CHANGELOG.md index 00e5c7cbc0..f45a323fee 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,14 @@ # ChangeLog #### 3.3 - Graph API - - delete removeEvent function, use off; + - refactor: delete removeEvent function, use off; +- refactor: parameters of Shape animate changed, shape.animate(toAttrs, animateCfg) or shape.animate(onFrame, animateCfg); +- feat: descriptionCfg for modelRect to define the style of description by user; +- feat: update a node from without some shapes to with them, such as linkPoints, label, logo icon and state icon for modelRect; +- feat: the callback paramter of event nodeselectchange is changed to { target, selectedItems, ... }; +- feat: support stateStyles in node and edge data; +- feat: calculate pixelRatio by G automatically, user do not need to assign it to graph instance; +- chore: G 4.0 #### 3.1.5 * feat: supports g6 types file diff --git a/demos/2203d0b476906b134775969c2fdfb004.png b/demos/2203d0b476906b134775969c2fdfb004.png index 1c00595086..12e1924ebc 100644 Binary files a/demos/2203d0b476906b134775969c2fdfb004.png and b/demos/2203d0b476906b134775969c2fdfb004.png differ diff --git a/demos/animate-edge-loop.html b/demos/animate-edge-loop.html index 0211e20743..ec0a7d3111 100644 --- a/demos/animate-edge-loop.html +++ b/demos/animate-edge-loop.html @@ -26,21 +26,21 @@ }, 'circle'); G6.registerEdge('loop-growth', { - afterDraw(cfg, group) { - const shape = group.get('children')[0]; - const length = shape.getTotalLength(); - shape.animate({ - onFrame(ratio) { - const startLen = ratio * length; - // 计算线的lineDash - const cfg = { - lineDash: [startLen, length - startLen] - }; - return cfg; - }, - repeat: true - }, 2000); - } + afterDraw(cfg, group) { + const shape = group.get('children')[0]; + const length = shape.getTotalLength(); + shape.animate(ratio => { + const startLen = ratio * length; + // 计算线的lineDash + const cfg = { + lineDash: [startLen, length - startLen] + }; + return cfg; + }, { + repeat: true, + duration: 2000 + }); + } }, 'loop'); const data = { diff --git a/demos/animate-edge.html b/demos/animate-edge.html index e086796172..961b30fcf7 100644 --- a/demos/animate-edge.html +++ b/demos/animate-edge.html @@ -79,18 +79,16 @@ r: 3 } }); - circle.animate({ - onFrame(ratio) { - const tmpPoint = shape.getPoint(ratio); - return { - x: tmpPoint.x, - y: tmpPoint.y - }; - - }, - repeat: true - }, - 3000); + circle.animate(ratio => { + const tmpPoint = shape.getPoint(ratio); + return { + x: tmpPoint.x, + y: tmpPoint.y + }; + }, { + repeat: true, + duration: 3000 + }); } }, 'cubic'); @@ -109,17 +107,16 @@ totalArray = totalArray.concat(lineDash); } let index = 0; - shape.animate({ - onFrame(ratio) { - const cfg = { - lineDash: dashArray[index].concat(totalArray) - }; - index = (index + 1) % interval; - return cfg; - }, - repeat: true - }, - 3000); + shape.animate(ratio => { + const cfg = { + lineDash: dashArray[index].concat(totalArray) + }; + index = (index + 1) % interval; + return cfg; + }, { + repeat: true, + duration: 3000 + }); } }, 'cubic'); @@ -128,18 +125,17 @@ afterDraw(cfg, group) { const shape = group.get('children')[0]; const length = shape.getTotalLength(); // G 增加了 totalLength 的接口 - shape.animate({ - onFrame(ratio) { - const startLen = ratio * length; - const cfg = { - lineDash: [startLen, length - startLen] - }; + shape.animate(ratio => { + const startLen = ratio * length; + const cfg = { + lineDash: [startLen, length - startLen] + }; - return cfg; - }, - repeat: true - }, - 2000); + return cfg; + }, { + repeat: true, + duration: 2000 + }); } }, 'cubic'); diff --git a/demos/animate-hover.html b/demos/animate-hover.html index e5b01e9836..7525740a9e 100644 --- a/demos/animate-hover.html +++ b/demos/animate-hover.html @@ -114,17 +114,16 @@ totalArray = totalArray.concat(lineDash); } let index = 0; - shape.animate({ - onFrame(ratio) { - const cfg = { - lineDash: dashArray[index].concat(totalArray) - }; - index = (index + 1) % interval; - return cfg; - }, - repeat: true - }, - 3000); + shape.animate(ratio => { + const cfg = { + lineDash: dashArray[index].concat(totalArray) + }; + index = (index + 1) % interval; + return cfg; + }, { + repeat: true, + duration: 3000 + }); } else { shape.stopAnimate(); shape.attr('lineDash', null); diff --git a/demos/animate-node-hover.html b/demos/animate-node-hover.html index 49a5c48838..8c42a976c4 100644 --- a/demos/animate-node-hover.html +++ b/demos/animate-node-hover.html @@ -18,16 +18,16 @@ const cfg = item.get('model'); if (name === 'running') { if (value) { - shape.animate({ + shape.animate(ratio => { + const diff = ratio <= 0.5 ? ratio * 10 : (1 - ratio) * 10; + return { + r: cfg.size / 2 + diff + }; + }, { repeat: true, - onFrame: function onFrame(ratio) { - const diff = ratio <= 0.5 ? ratio * 10 : (1 - ratio) * 10; - return { - r: cfg.size / 2 + diff - }; - } - }, - 1000, 'easeCubic'); + duration: 1000, + easing: 'easeCubic' + }); } else { shape.stopAnimate(); shape.attr('lineDash', null); diff --git a/demos/assets/data/background-small.png b/demos/assets/data/background-small.png index 43cfb1bfa6..8a47654d0a 100644 Binary files a/demos/assets/data/background-small.png and b/demos/assets/data/background-small.png differ diff --git a/demos/assets/data/flare.json b/demos/assets/data/flare.json index 6fa54865b2..8c21d9831b 100644 --- a/demos/assets/data/flare.json +++ b/demos/assets/data/flare.json @@ -1 +1 @@ -{"name":"flare","children":[{"name":"analytics","children":[{"name":"cluster","children":[{"name":"AgglomerativeCluster","value":3938},{"name":"CommunityStructure","value":3812},{"name":"HierarchicalCluster","value":6714},{"name":"MergeEdge","value":743}]},{"name":"graph","children":[{"name":"BetweennessCentrality","value":3534},{"name":"LinkDistance","value":5731},{"name":"MaxFlowMinCut","value":7840},{"name":"ShortestPaths","value":5914},{"name":"SpanningTree","value":3416}]},{"name":"optimization","children":[{"name":"AspectRatioBanker","value":7074}]}]},{"name":"animate","children":[{"name":"Easing","value":17010},{"name":"FunctionSequence","value":5842},{"name":"interpolate","children":[{"name":"ArrayInterpolator","value":1983},{"name":"ColorInterpolator","value":2047},{"name":"DateInterpolator","value":1375},{"name":"Interpolator","value":8746},{"name":"MatrixInterpolator","value":2202},{"name":"NumberInterpolator","value":1382},{"name":"ObjectInterpolator","value":1629},{"name":"PointInterpolator","value":1675},{"name":"RectangleInterpolator","value":2042}]},{"name":"ISchedulable","value":1041},{"name":"Parallel","value":5176},{"name":"Pause","value":449},{"name":"Scheduler","value":5593},{"name":"Sequence","value":5534},{"name":"Transition","value":9201},{"name":"Transitioner","value":19975},{"name":"TransitionEvent","value":1116},{"name":"Tween","value":6006}]},{"name":"data","children":[{"name":"converters","children":[{"name":"Converters","value":721},{"name":"DelimitedTextConverter","value":4294},{"name":"GraphMLConverter","value":9800},{"name":"IDataConverter","value":1314},{"name":"JSONConverter","value":2220}]},{"name":"DataField","value":1759},{"name":"DataSchema","value":2165},{"name":"DataSet","value":586},{"name":"DataSource","value":3331},{"name":"DataTable","value":772},{"name":"DataUtil","value":3322}]},{"name":"display","children":[{"name":"DirtySprite","value":8833},{"name":"LineSprite","value":1732},{"name":"RectSprite","value":3623},{"name":"TextSprite","value":10066}]},{"name":"flex","children":[{"name":"FlareVis","value":4116}]},{"name":"physics","children":[{"name":"DragForce","value":1082},{"name":"GravityForce","value":1336},{"name":"IForce","value":319},{"name":"NBodyForce","value":10498},{"name":"Particle","value":2822},{"name":"Simulation","value":9983},{"name":"Spring","value":2213},{"name":"SpringForce","value":1681}]},{"name":"query","children":[{"name":"AggregateExpression","value":1616},{"name":"And","value":1027},{"name":"Arithmetic","value":3891},{"name":"Average","value":891},{"name":"BinaryExpression","value":2893},{"name":"Comparison","value":5103},{"name":"CompositeExpression","value":3677},{"name":"Count","value":781},{"name":"DateUtil","value":4141},{"name":"Distinct","value":933},{"name":"Expression","value":5130},{"name":"ExpressionIterator","value":3617},{"name":"Fn","value":3240},{"name":"If","value":2732},{"name":"IsA","value":2039},{"name":"Literal","value":1214},{"name":"Match","value":3748},{"name":"Maximum","value":843},{"name":"methods","children":[{"name":"add","value":593},{"name":"and","value":330},{"name":"average","value":287},{"name":"count","value":277},{"name":"distinct","value":292},{"name":"div","value":595},{"name":"eq","value":594},{"name":"fn","value":460},{"name":"gt","value":603},{"name":"gte","value":625},{"name":"iff","value":748},{"name":"isa","value":461},{"name":"lt","value":597},{"name":"lte","value":619},{"name":"max","value":283},{"name":"min","value":283},{"name":"mod","value":591},{"name":"mul","value":603},{"name":"neq","value":599},{"name":"not","value":386},{"name":"or","value":323},{"name":"orderby","value":307},{"name":"range","value":772},{"name":"select","value":296},{"name":"stddev","value":363},{"name":"sub","value":600},{"name":"sum","value":280},{"name":"update","value":307},{"name":"variance","value":335},{"name":"where","value":299},{"name":"xor","value":354},{"name":"_","value":264}]},{"name":"Minimum","value":843},{"name":"Not","value":1554},{"name":"Or","value":970},{"name":"Query","value":13896},{"name":"Range","value":1594},{"name":"StringUtil","value":4130},{"name":"Sum","value":791},{"name":"Variable","value":1124},{"name":"Variance","value":1876},{"name":"Xor","value":1101}]},{"name":"scale","children":[{"name":"IScaleMap","value":2105},{"name":"LinearScale","value":1316},{"name":"LogScale","value":3151},{"name":"OrdinalScale","value":3770},{"name":"QuantileScale","value":2435},{"name":"QuantitativeScale","value":4839},{"name":"RootScale","value":1756},{"name":"Scale","value":4268},{"name":"ScaleType","value":1821},{"name":"TimeScale","value":5833}]},{"name":"util","children":[{"name":"Arrays","value":8258},{"name":"Colors","value":10001},{"name":"Dates","value":8217},{"name":"Displays","value":12555},{"name":"Filter","value":2324},{"name":"Geometry","value":10993},{"name":"heap","children":[{"name":"FibonacciHeap","value":9354},{"name":"HeapNode","value":1233}]},{"name":"IEvaluable","value":335},{"name":"IPredicate","value":383},{"name":"IValueProxy","value":874},{"name":"math","children":[{"name":"DenseMatrix","value":3165},{"name":"Matrix","value":2815},{"name":"SparseMatrix","value":3366}]},{"name":"Maths","value":17705},{"name":"Orientation","value":1486},{"name":"palette","children":[{"name":"ColorPalette","value":6367},{"name":"Palette","value":1229},{"name":"ShapePalette","value":2059},{"name":"SizePalette","value":2291}]},{"name":"Property","value":5559},{"name":"Shapes","value":19118},{"name":"Sort","value":6887},{"name":"Stats","value":6557},{"name":"Strings","value":22026}]},{"name":"vis","children":[{"name":"axis","children":[{"name":"Axes","value":1302},{"name":"Axis","value":24593},{"name":"AxisGridLine","value":652},{"name":"AxisLabel","value":636},{"name":"CartesianAxes","value":6703}]},{"name":"controls","children":[{"name":"AnchorControl","value":2138},{"name":"ClickControl","value":3824},{"name":"Control","value":1353},{"name":"ControlList","value":4665},{"name":"DragControl","value":2649},{"name":"ExpandControl","value":2832},{"name":"HoverControl","value":4896},{"name":"IControl","value":763},{"name":"PanZoomControl","value":5222},{"name":"SelectionControl","value":7862},{"name":"TooltipControl","value":8435}]},{"name":"data","children":[{"name":"Data","value":20544},{"name":"DataList","value":19788},{"name":"DataSprite","value":10349},{"name":"EdgeSprite","value":3301},{"name":"NodeSprite","value":19382},{"name":"render","children":[{"name":"ArrowType","value":698},{"name":"EdgeRenderer","value":5569},{"name":"IRenderer","value":353},{"name":"ShapeRenderer","value":2247}]},{"name":"ScaleBinding","value":11275},{"name":"Tree","value":7147},{"name":"TreeBuilder","value":9930}]},{"name":"events","children":[{"name":"DataEvent","value":2313},{"name":"SelectionEvent","value":1880},{"name":"TooltipEvent","value":1701},{"name":"VisualizationEvent","value":1117}]},{"name":"legend","children":[{"name":"Legend","value":20859},{"name":"LegendItem","value":4614},{"name":"LegendRange","value":10530}]},{"name":"operator","children":[{"name":"distortion","children":[{"name":"BifocalDistortion","value":4461},{"name":"Distortion","value":6314},{"name":"FisheyeDistortion","value":3444}]},{"name":"encoder","children":[{"name":"ColorEncoder","value":3179},{"name":"Encoder","value":4060},{"name":"PropertyEncoder","value":4138},{"name":"ShapeEncoder","value":1690},{"name":"SizeEncoder","value":1830}]},{"name":"filter","children":[{"name":"FisheyeTreeFilter","value":5219},{"name":"GraphDistanceFilter","value":3165},{"name":"VisibilityFilter","value":3509}]},{"name":"IOperator","value":1286},{"name":"label","children":[{"name":"Labeler","value":9956},{"name":"RadialLabeler","value":3899},{"name":"StackedAreaLabeler","value":3202}]},{"name":"layout","children":[{"name":"AxisLayout","value":6725},{"name":"BundledEdgeRouter","value":3727},{"name":"CircleLayout","value":9317},{"name":"CirclePackingLayout","value":12003},{"name":"DendrogramLayout","value":4853},{"name":"ForceDirectedLayout","value":8411},{"name":"IcicleTreeLayout","value":4864},{"name":"IndentedTreeLayout","value":3174},{"name":"Layout","value":7881},{"name":"NodeLinkTreeLayout","value":12870},{"name":"PieLayout","value":2728},{"name":"RadialTreeLayout","value":12348},{"name":"RandomLayout","value":870},{"name":"StackedAreaLayout","value":9121},{"name":"TreeMapLayout","value":9191}]},{"name":"Operator","value":2490},{"name":"OperatorList","value":5248},{"name":"OperatorSequence","value":4190},{"name":"OperatorSwitch","value":2581},{"name":"SortOperator","value":2023}]},{"name":"Visualization","value":16540}]}]} +{"name":"flare","children":[{"name":"analytics","children":[{"name":"cluster","children":[{"name":"AgglomerativeCluster","value":3938},{"name":"CommunityStructure","value":3812},{"name":"HierarchicalCluster","value":6714},{"name":"MergeEdge","value":743}]},{"name":"graph","children":[{"name":"BetweennessCentrality","value":3534},{"name":"LinkDistance","value":5731},{"name":"MaxFlowMinCut","value":7840},{"name":"ShortestPaths","value":5914},{"name":"SpanningTree","value":3416}]},{"name":"optimization","children":[{"name":"AspectRatioBanker","value":7074}]}]},{"name":"animate","children":[{"name":"Easing","value":17010},{"name":"FunctionSequence","value":5842},{"name":"interpolate","children":[{"name":"ArrayInterpolator","value":1983},{"name":"ColorInterpolator","value":2047},{"name":"DateInterpolator","value":1375},{"name":"Interpolator","value":8746},{"name":"MatrixInterpolator","value":2202},{"name":"NumberInterpolator","value":1382},{"name":"ObjectInterpolator","value":1629},{"name":"PointInterpolator","value":1675},{"name":"RectangleInterpolator","value":2042}]},{"name":"ISchedulable","value":1041},{"name":"Parallel","value":5176},{"name":"Pause","value":449},{"name":"Scheduler","value":5593},{"name":"Sequence","value":5534},{"name":"Transition","value":9201},{"name":"Transitioner","value":19975},{"name":"TransitionEvent","value":1116},{"name":"Tween","value":6006}]},{"name":"data","children":[{"name":"converters","children":[{"name":"Converters","value":721},{"name":"DelimitedTextConverter","value":4294},{"name":"GraphMLConverter","value":9800},{"name":"IDataConverter","value":1314},{"name":"JSONConverter","value":2220}]},{"name":"DataField","value":1759},{"name":"DataSchema","value":2165},{"name":"DataSet","value":586},{"name":"DataSource","value":3331},{"name":"DataTable","value":772},{"name":"DataUtil","value":3322}]},{"name":"display","children":[{"name":"DirtySprite","value":8833},{"name":"LineSprite","value":1732},{"name":"RectSprite","value":3623},{"name":"TextSprite","value":10066}]},{"name":"flex","children":[{"name":"FlareVis","value":4116}]},{"name":"physics","children":[{"name":"DragForce","value":1082},{"name":"GravityForce","value":1336},{"name":"IForce","value":319},{"name":"NBodyForce","value":10498},{"name":"Particle","value":2822},{"name":"Simulation","value":9983},{"name":"Spring","value":2213},{"name":"SpringForce","value":1681}]},{"name":"query","children":[{"name":"AggregateExpression","value":1616},{"name":"And","value":1027},{"name":"Arithmetic","value":3891},{"name":"Average","value":891},{"name":"BinaryExpression","value":2893},{"name":"Comparison","value":5103},{"name":"CompositeExpression","value":3677},{"name":"Count","value":781},{"name":"DateUtil","value":4141},{"name":"Distinct","value":933},{"name":"Expression","value":5130},{"name":"ExpressionIterator","value":3617},{"name":"Fn","value":3240},{"name":"If","value":2732},{"name":"IsA","value":2039},{"name":"Literal","value":1214},{"name":"Match","value":3748},{"name":"Maximum","value":843},{"name":"methods","children":[{"name":"add","value":593},{"name":"and","value":330},{"name":"average","value":287},{"name":"count","value":277},{"name":"distinct","value":292},{"name":"div","value":595},{"name":"eq","value":594},{"name":"fn","value":460},{"name":"gt","value":603},{"name":"gte","value":625},{"name":"iff","value":748},{"name":"isa","value":461},{"name":"lt","value":597},{"name":"lte","value":619},{"name":"max","value":283},{"name":"min","value":283},{"name":"mod","value":591},{"name":"mul","value":603},{"name":"neq","value":599},{"name":"not","value":386},{"name":"or","value":323},{"name":"orderby","value":307},{"name":"range","value":772},{"name":"select","value":296},{"name":"stddev","value":363},{"name":"sub","value":600},{"name":"sum","value":280},{"name":"update","value":307},{"name":"variance","value":335},{"name":"where","value":299},{"name":"xor","value":354},{"name":"_","value":264}]},{"name":"Minimum","value":843},{"name":"Not","value":1554},{"name":"Or","value":970},{"name":"Query","value":13896},{"name":"Range","value":1594},{"name":"StringUtil","value":4130},{"name":"Sum","value":791},{"name":"Variable","value":1124},{"name":"Variance","value":1876},{"name":"Xor","value":1101}]},{"name":"scale","children":[{"name":"IScaleMap","value":2105},{"name":"LinearScale","value":1316},{"name":"LogScale","value":3151},{"name":"OrdinalScale","value":3770},{"name":"QuantileScale","value":2435},{"name":"QuantitativeScale","value":4839},{"name":"RootScale","value":1756},{"name":"Scale","value":4268},{"name":"ScaleType","value":1821},{"name":"TimeScale","value":5833}]},{"name":"util","children":[{"name":"Arrays","value":8258},{"name":"Colors","value":10001},{"name":"Dates","value":8217},{"name":"Displays","value":12555},{"name":"Filter","value":2324},{"name":"Geometry","value":10993},{"name":"heap","children":[{"name":"FibonacciHeap","value":9354},{"name":"HeapNode","value":1233}]},{"name":"IEvaluable","value":335},{"name":"IPredicate","value":383},{"name":"IValueProxy","value":874},{"name":"math","children":[{"name":"DenseMatrix","value":3165},{"name":"IMatrix","value":2815},{"name":"SparseMatrix","value":3366}]},{"name":"Maths","value":17705},{"name":"Orientation","value":1486},{"name":"palette","children":[{"name":"ColorPalette","value":6367},{"name":"Palette","value":1229},{"name":"ShapePalette","value":2059},{"name":"SizePalette","value":2291}]},{"name":"Property","value":5559},{"name":"Shapes","value":19118},{"name":"Sort","value":6887},{"name":"Stats","value":6557},{"name":"Strings","value":22026}]},{"name":"vis","children":[{"name":"axis","children":[{"name":"Axes","value":1302},{"name":"Axis","value":24593},{"name":"AxisGridLine","value":652},{"name":"AxisLabel","value":636},{"name":"CartesianAxes","value":6703}]},{"name":"controls","children":[{"name":"AnchorControl","value":2138},{"name":"ClickControl","value":3824},{"name":"Control","value":1353},{"name":"ControlList","value":4665},{"name":"DragControl","value":2649},{"name":"ExpandControl","value":2832},{"name":"HoverControl","value":4896},{"name":"IControl","value":763},{"name":"PanZoomControl","value":5222},{"name":"SelectionControl","value":7862},{"name":"TooltipControl","value":8435}]},{"name":"data","children":[{"name":"Data","value":20544},{"name":"DataList","value":19788},{"name":"DataSprite","value":10349},{"name":"EdgeSprite","value":3301},{"name":"NodeSprite","value":19382},{"name":"render","children":[{"name":"ArrowType","value":698},{"name":"EdgeRenderer","value":5569},{"name":"IRenderer","value":353},{"name":"ShapeRenderer","value":2247}]},{"name":"ScaleBinding","value":11275},{"name":"Tree","value":7147},{"name":"TreeBuilder","value":9930}]},{"name":"events","children":[{"name":"DataEvent","value":2313},{"name":"SelectionEvent","value":1880},{"name":"TooltipEvent","value":1701},{"name":"VisualizationEvent","value":1117}]},{"name":"legend","children":[{"name":"Legend","value":20859},{"name":"LegendItem","value":4614},{"name":"LegendRange","value":10530}]},{"name":"operator","children":[{"name":"distortion","children":[{"name":"BifocalDistortion","value":4461},{"name":"Distortion","value":6314},{"name":"FisheyeDistortion","value":3444}]},{"name":"encoder","children":[{"name":"ColorEncoder","value":3179},{"name":"Encoder","value":4060},{"name":"PropertyEncoder","value":4138},{"name":"ShapeEncoder","value":1690},{"name":"SizeEncoder","value":1830}]},{"name":"filter","children":[{"name":"FisheyeTreeFilter","value":5219},{"name":"GraphDistanceFilter","value":3165},{"name":"VisibilityFilter","value":3509}]},{"name":"IOperator","value":1286},{"name":"label","children":[{"name":"Labeler","value":9956},{"name":"RadialLabeler","value":3899},{"name":"StackedAreaLabeler","value":3202}]},{"name":"layout","children":[{"name":"AxisLayout","value":6725},{"name":"BundledEdgeRouter","value":3727},{"name":"CircleLayout","value":9317},{"name":"CirclePackingLayout","value":12003},{"name":"DendrogramLayout","value":4853},{"name":"ForceDirectedLayout","value":8411},{"name":"IcicleTreeLayout","value":4864},{"name":"IndentedTreeLayout","value":3174},{"name":"Layout","value":7881},{"name":"NodeLinkTreeLayout","value":12870},{"name":"PieLayout","value":2728},{"name":"RadialTreeLayout","value":12348},{"name":"RandomLayout","value":870},{"name":"StackedAreaLayout","value":9121},{"name":"TreeMapLayout","value":9191}]},{"name":"Operator","value":2490},{"name":"OperatorList","value":5248},{"name":"OperatorSequence","value":4190},{"name":"OperatorSwitch","value":2581},{"name":"SortOperator","value":2023}]},{"name":"Visualization","value":16540}]}]} diff --git a/demos/assets/data/footer.png b/demos/assets/data/footer.png index a1c60d3325..e00f5f29e3 100644 Binary files a/demos/assets/data/footer.png and b/demos/assets/data/footer.png differ diff --git a/demos/case-beijing-metro-animation.html b/demos/case-beijing-metro-animation.html index 33556e622f..2c290086f5 100644 --- a/demos/case-beijing-metro-animation.html +++ b/demos/case-beijing-metro-animation.html @@ -68,22 +68,31 @@ const delayBase = Math.random() * 2000; back1.animate({ // 逐渐放大，并消失 r: r + 10, - opacity: 0.0, - repeat: true // 循环 - }, - 3000, 'easeCubic', null, delayBase) // 无延迟 + opacity: 0.0 + }, { + repeat: true, // 循环 + duration: 3000, + easing: 'easeCubic', + delay: delayBase // 无延迟 + }); back2.animate({ // 逐渐放大，并消失 r: r + 10, - opacity: 0.0, - repeat: true // 循环 - }, - 3000, 'easeCubic', null, delayBase + 1000) // 1 秒延迟 + opacity: 0.0 + }, { + repeat: true, // 循环 + duration: 3000, + easing: 'easeCubic', + delay: delayBase + 1000 // 1 秒延迟 + }); back3.animate({ // 逐渐放大，并消失 r: r + 10, - opacity: 0.0, - repeat: true // 循环 - }, - 3000, 'easeCubic', null, delayBase + 2000) // 2 秒延迟 + opacity: 0.0 + }, { + repeat: true, // 循环 + duration: 3000, + easing: 'easeCubic', + delay: delayBase + 2000 // 2 秒延迟 + }); } }, 'circle'); @@ -109,21 +118,22 @@ shadowBlur: 30, } }); - circle.animate({ - onFrame(ratio) { - ratio += i / circleCount; - if (ratio > 1) { - ratio %= 1; - } - const tmpPoint = shape.getPoint(ratio); - return { - x: tmpPoint.x, - y: tmpPoint.y - }; - }, - repeat: true - }, - 10 * length, 'easeCubic', null, delay); + circle.animate(ratio => { + ratio += i / circleCount; + if (ratio > 1) { + ratio %= 1; + } + const tmpPoint = shape.getPoint(ratio); + return { + x: tmpPoint.x, + y: tmpPoint.y + }; + }, { + repeat: true, + duration: 10 * length, + easing: 'easeCubic', + delay + }); } } }, diff --git a/demos/custom-node-bar-chart.html b/demos/custom-node-bar-chart.html index 144fc35a28..66ade8d177 100644 --- a/demos/custom-node-bar-chart.html +++ b/demos/custom-node-bar-chart.html @@ -61,15 +61,19 @@ // 加上交互动画 fan.on('mouseenter', function(evt) { fan.animate({ - re: re + 8, - repeat: false - }, 300); + re: re + 8 + }, { + repeat: false, + duration: 300 + }); }); fan.on('mouseleave', function(evt) { fan.animate({ - re:re, - repeat: false - }, 300); + re:re + }, { + repeat: false, + duration: 300 + }); }); // 设置class diff --git a/demos/custom-node-chart.html b/demos/custom-node-chart.html index 47e2170f27..f883122ad6 100644 --- a/demos/custom-node-chart.html +++ b/demos/custom-node-chart.html @@ -73,15 +73,19 @@ // 加上交互动画 fan.on('mouseenter', function(evt) { fan.animate({ - re: re + 8, - repeat: false - }, 300); + re: re + 8 + }, { + repeat: false, + duration: 300 + }); }); fan.on('mouseleave', function(evt) { fan.animate({ - re:re, - repeat: false - }, 300); + re: re + }, { + repeat: false, + duration: 300 + }); }); // 设置class @@ -193,15 +197,19 @@ // 加上交互动画 littleCircle.on('mouseenter', function(evt) { littleCircle.animate({ - r: 5, - repeat: false - }, 200); + r: 5 + }, { + repeat: false, + duration: 200 + }); }); littleCircle.on('mouseleave', function(evt) { littleCircle.animate({ - r: 2, - repeat: false - }, 200); + r: 2 + }, { + repeat: false, + duration: 200 + }); }); // 设置class littleCircle.set("className", 'littleCircle'); diff --git a/demos/custom-node-line-chart.html b/demos/custom-node-line-chart.html index 398e3f8bda..e91bfc5661 100644 --- a/demos/custom-node-line-chart.html +++ b/demos/custom-node-line-chart.html @@ -94,15 +94,19 @@ // 加上交互动画 littleCircle.on('mouseenter', function(evt) { littleCircle.animate({ - r: 5, - repeat: false - }, 200); + r: 5 + }, { + repeat: false, + duration: 200 + }); }); littleCircle.on('mouseleave', function(evt) { littleCircle.animate({ - r: 2, - repeat: false - }, 200); + r: 2 + }, { + repeat: false, + duration: 200 + }); }); // 设置class littleCircle.set("className", 'littleCircle'); diff --git a/demos/interact-dynamic-add-tree.html b/demos/interact-dynamic-add-tree.html index d54e273f02..6b50ddb604 100644 --- a/demos/interact-dynamic-add-tree.html +++ b/demos/interact-dynamic-add-tree.html @@ -14,7 +14,6 @@ container: 'mountNode', width: 500, height: 500, - pixelRatio: 2, renderer: 'svg', modes: { default: ['collapse-expand', 'drag-canvas'] diff --git a/demos/interactive-tree.html b/demos/interactive-tree.html index 26c936701c..bd99abd88b 100644 --- a/demos/interactive-tree.html +++ b/demos/interactive-tree.html @@ -126,7 +126,6 @@ container: 'mountNode', width: 500, height: 500, - pixelRatio: 2, renderer: 'svg', modes: { default: ['drag-canvas'] diff --git a/demos/internal-edge-loop.html b/demos/internal-edge-loop.html new file mode 100644 index 0000000000..d443356fb2 --- /dev/null +++ b/demos/internal-edge-loop.html @@ -0,0 +1,153 @@ + + + + + + + 默认的图片节点 + + +
+
+ + + + \ No newline at end of file diff --git a/demos/internal-node-rect.html b/demos/internal-node-rect.html index f82b63a68e..a9c5195a90 100644 --- a/demos/internal-node-rect.html +++ b/demos/internal-node-rect.html @@ -12,41 +12,232 @@ + + + + \ No newline at end of file diff --git a/demos/layout-preset-change-data.html b/demos/layout-preset-change-data.html new file mode 100644 index 0000000000..196993e461 --- /dev/null +++ b/demos/layout-preset-change-data.html @@ -0,0 +1,123 @@ + + + + + + Circular Layout + + + +
+ + + + + + \ No newline at end of file diff --git a/demos/layout-radial-adddata.html b/demos/layout-radial-adddata.html new file mode 100644 index 0000000000..b5d95574ad --- /dev/null +++ b/demos/layout-radial-adddata.html @@ -0,0 +1,496 @@ + + + + + + Radial Layout + + + +
click canvas to add data
+
+ + + + + + \ No newline at end of file diff --git a/demos/layout-radial-sort-by-attr.html b/demos/layout-radial-sort-by-attr.html new file mode 100644 index 0000000000..92883abecd --- /dev/null +++ b/demos/layout-radial-sort-by-attr.html @@ -0,0 +1,526 @@ + + + + + + Radial Layout + + + +
+ + + + + + \ No newline at end of file diff --git a/demos/layout-radial-sort.html b/demos/layout-radial-sort.html new file mode 100644 index 0000000000..10c211b748 --- /dev/null +++ b/demos/layout-radial-sort.html @@ -0,0 +1,541 @@ + + + + + + Radial Layout + + + +
+ + + + + + \ No newline at end of file diff --git a/demos/layout-radial-tree.html b/demos/layout-radial-tree.html index c8d7b3c09c..bbecf3680f 100644 --- a/demos/layout-radial-tree.html +++ b/demos/layout-radial-tree.html @@ -59,7 +59,6 @@ container: 'mountNode', width: 500, height: 500, - pixelRatio: 2, plugins: [minimap], modes: { default: [{ diff --git a/demos/layout-random.html b/demos/layout-random.html new file mode 100644 index 0000000000..7f1493db05 --- /dev/null +++ b/demos/layout-random.html @@ -0,0 +1,419 @@ + + + + + + MDS Layout + + + +
+ + + + + \ No newline at end of file diff --git a/demos/others-file-system.html b/demos/others-file-system.html index 8744df4e10..1334535d1c 100644 --- a/demos/others-file-system.html +++ b/demos/others-file-system.html @@ -76,7 +76,6 @@ container: 'mountNode', width: 500, height: 500, - pixelRatio: 2, linkCenter: true, modes: { default: [{ diff --git a/demos/tree-cloudatlas.html b/demos/tree-cloudatlas.html index 44796b389b..65ead38388 100644 --- a/demos/tree-cloudatlas.html +++ b/demos/tree-cloudatlas.html @@ -669,7 +669,6 @@ onWheel: ev => { if (ev.ctrlKey) { const canvas = graph.get("canvas"); - const pixelRatio = canvas.get("pixelRatio"); const point = canvas.getPointByClient(ev.clientX, ev.clientY); let ratio = graph.getZoom(); if (ev.wheelDelta > 0) { @@ -678,8 +677,8 @@ ratio = ratio - ratio * 0.05; } graph.zoomTo(ratio, { - x: point.x / pixelRatio, - y: point.y / pixelRatio + x: point.x, + y: point.y }); } else { const x = ev.deltaX || ev.movementX; diff --git a/demos/tree-graph.html b/demos/tree-graph.html index 3d9b353e49..083bcab615 100644 --- a/demos/tree-graph.html +++ b/demos/tree-graph.html @@ -62,7 +62,6 @@ container: 'mountNode', width: 500, height: 500, - pixelRatio: 2, renderer: 'svg', modes: { default: ['collapse-expand', 'drag-canvas'] diff --git a/docs/api/Behavior.en.md b/docs/api/Behavior.en.md index 95897a5ea1..0f8032ae87 100644 --- a/docs/api/Behavior.en.md +++ b/docs/api/Behavior.en.md @@ -5,7 +5,7 @@ order: 5 Behavior is the compound interactions in G6. In general, a Behavior includes one or more event listeners and a set of item operations. -By default, Behavior has three callbacks: `shouldBegin`, `shouldUpdate`, and `shouldEnd`, representing the beginning of the behavior, whether update the items, the ending of the behavior respectively. If they return `false`, the default behavior will be prevented. +By default, Behavior has three callbacks: `shouldBegin`, `shouldUpdate`, and `shouldEnd`, representing the beginning of the behavior, whether to update the items, the ending of the behavior respectively. If they return `false`, the default behavior will be prevented. ## Usage ```javascript @@ -30,9 +30,9 @@ G6.registerBehavior('behaviorName', { ``` ## getEvents() -Define and handle events when user custom a Behavior. +Define and handle events when user customize a Behavior. -The usage of `getEvents()` can be refered to [Event](./Event)。 +The usage of `getEvents()` can be refered to [Event](/en/docs/api/Event)。 **Usage** ```javascript @@ -74,7 +74,7 @@ G6.registerBehavior('behaviorName', { | removed | Boolean | Whether the target is removed / destroyed. | | timeStamp | Number | The time stamp. | | bubbles | Boolean | Whether it is a bubbled event. | -| defaultPrevented | Boolean | Whether prevent the default event. | +| defaultPrevented | Boolean | Whether to prevent the default event. | | cancelable | Boolean | Whether it is cancelable. | @@ -117,7 +117,7 @@ G6.registerBehavior('behaviorName', { ``` ## shouldBegin(evt) -Whether prevent the behavior. Return `true` by default, which means do not prevent the behavior. User should call it by themselves. +Whether to prevent the behavior. Return `true` by default, which means do not prevent the behavior. User should call it by themselves. **Usage** ```javascript @@ -130,7 +130,7 @@ G6.registerBehavior('behaviorName', { ``` ## shouldUpdate(evt) -Whether update the data and the view. Returns `true` by default, which means allow updating. +Whether to update the data and the view. Returns `true` by default, which means allow updating. **Usage** ```javascript @@ -138,7 +138,6 @@ const graph = new G6.Graph({ container: 'mountNode', width: 500, height: 500, - pixelRatio: 2, modes: { default: [ 'drag-canvas', { type: 'self-behavior', @@ -154,4 +153,4 @@ const graph = new G6.Graph({ ``` ## shouldEnd(evt) -Whether end the behavior. Returns `true` by default. +Whether to end the behavior. Returns `true` by default. diff --git a/docs/api/Behavior.zh.md b/docs/api/Behavior.zh.md index a4f8562097..a17a434d93 100644 --- a/docs/api/Behavior.zh.md +++ b/docs/api/Behavior.zh.md @@ -32,7 +32,7 @@ G6.registerBehavior('behaviorName', { ## getEvents() 自定义 Behavior 时，定义事件及处理事件的方法。 -`getEvents()` 方法中可以使用的事件请参考[Event文档](./Event)。 +`getEvents()` 方法中可以使用的事件请参考[Event文档](/zh/docs/api/Event)。 **用法** ```javascript @@ -138,7 +138,6 @@ const graph = new G6.Graph({ container: 'mountNode', width: 500, height: 500, - pixelRatio: 2, modes: { default: [ 'drag-canvas', { type: 'self-behavior', diff --git a/docs/api/Custom.en.md b/docs/api/Custom.en.md index dcad2623b1..885e616224 100644 --- a/docs/api/Custom.en.md +++ b/docs/api/Custom.en.md @@ -9,15 +9,15 @@ This document will introduce custom mechanism in G6, including custom node, cust When the built-in nodes cannot satisfy your requirments, custom a type of node by `G6.registerNode(nodeName, options, extendedNodeName)`. -**Parameters** +### Parameters | Name | Type | Required | Description | -| -------------- | ------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| -------------- | ------ | -------- | ----------------------------------------------------------------- | | nodeName | String | true | The unique name of the custom node. | -| options | Object | true | The configurations of custom node, include functions of complete life cycles. Please refer to [Shape](./Shape)。 | -| extendNodeName | String | false | Specifies the inherited node type of the custom node. Declare this attribute if you want to extend a built-in node. [Built-in Nodes](/en/docs/manual/middle/elements/nodes/defaultNode)。 | +| options | Object | true | The configurations of custom node, include functions of complete life cycles. Please refer to [Shape API](/en/docs/api/Shape). | +| extendNodeName | String | false | Specifies the inherited node type of the custom node. Declare this property if you want to extend a built-in node. [Built-in Nodes](/en/docs/manual/middle/elements/nodes/defaultNode) document. | -**Usage** +### Usage ```javascript G6.registerNode( @@ -51,7 +51,7 @@ G6.registerNode( */ afterUpdate(cfg, node) {}, /** - * After [`graph.setItemState(item, state, value)`] is called, this function will do some responses. + * After graph.setItemState(item, state, value) is called, this function will do some responses. * @param {String} name The name of state * @param {Object} value The value of the state * @param {Node} node The node @@ -72,15 +72,15 @@ G6.registerNode( When the built-in edges cannot satisfy your requirments, custom a type of edge by `G6.registerEdge(edgeName, options, extendedEdgeName)`. -**Parameters** +### Parameters | Name | Type | Required | Description | -| -------------- | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------- | +| -------------- | ------ | -------- | --------------------------------------- | | edgeName | String | true | The unique name of the custom edge. | -| options | Object | true | The configurations of custom edge, include functions of complete life cycles. Please refer to [Shape](/zh/docs/api/Shape)。 | -| extendEdgeName | String | false | Specifies the inherited node type of the custom node. Declare this attribute if you want to extend the a built-in edge. [Built-in Edges](/zh/docs/manual/middle/elements/defaultEdge)。 | +| options | Object | true | The configurations of custom edge, include functions of complete life cycles. Please refer to [Shape API](/en/docs/api/Shape). | +| extendEdgeName | String | false | Specifies the inherited node type of the custom node. Declare this property if you want to extend the a built-in edge. [Built-in Edges](/en/docs/manual/middle/elements/edges/defaultEdge) document. | -**Usage** +### Usage ```javascript G6.registerEdge( @@ -129,14 +129,14 @@ G6.registerEdge( When the built-in Behaviors cannot satisfy your requirments, custom a type of Behavior by `G6.registerBehavior(behaviorName, behavior)`. -**Parameters** +### Parameters | Name | Type | Required | Description | -| ------------ | ------ | -------- | ----------------------------------------------------------------------------------------------------------------------------- | -| behaviorName | String | true | The name of custom Behavior | -| behavior | Object | true | The configurations of custom Behavior. For more information, please refer to [Behavior](/en/docs/api/Behavior)。 | +| ------------ | ------ | -------- | ------------------------------------------------------- | +| behaviorName | String | true | The name of custom Behavior. | +| behavior | Object | true | The configurations of custom Behavior. For more information, please refer to [Behavior API](/en/docs/api/Behavior). | -**Usage** +### Usage ```javascript // Custom a type of Behavior @@ -185,14 +185,14 @@ G6.registerBehavior('behaviorName', { When the built-in Layouts cannot satisfy your requirments, custom a type of Layout by `G6.registerLayout(layoutName, layout)`. -**Parameters** +### Parameters | Name | Type | Required | Description | -| ---------- | ------ | -------- | ------------------------------------------------------------------------------------------------------------- | +| ---------- | ------ | -------- | ----------------------------------------------- | | layoutName | String | true | The name of the custom layout. | -| layout | Object | true | The configurations of the custom layout. For more information, please refer to [Layout](/en/docs/manual/middle/layout)。 | +| layout | Object | true | The configurations of the custom layout. For more information, please refer to [Layout API](/en/docs/manual/middle/layout). | -**Usage** +### Usage ```javascript G6.registerLayout('layoutName', { diff --git a/docs/api/Custom.zh.md b/docs/api/Custom.zh.md index 4bf75e3034..9c9d5891aa 100644 --- a/docs/api/Custom.zh.md +++ b/docs/api/Custom.zh.md @@ -9,15 +9,15 @@ order: 10 当内置节点不满足需求时，可以通过 `G6.registerNode(nodeName, options, extendNodeName)` 方法自定义节点。 -**参数** +### 参数 | 名称 | 类型 | 是否必选 | 描述 | -| -------------- | ------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| -------------- | ------ | -------- | ---------------------------------------- | | nodeName | String | true | 自定义节点名称，需保持唯一性。 | -| options | Object | true | 自定义节点时的配置项，配置项中包括完整的生命周期方法，具体请参考：[Shape 文档](./Shape)。 | -| extendNodeName | String | false | 自定义节点时可基于内置节点进行定义，该字段表示内置节点名称，所有内置节点请参考：[内置节点](/zh/docs/manual/middle/elements/nodes/defaultNode)。 | +| options | Object | true | 自定义节点时的配置项，配置项中包括完整的生命周期方法，具体请参考：[Shape API](/zh/docs/api/Shape)。 | +| extendNodeName | String | false | 自定义节点时可基于内置节点进行定义，该字段表示内置节点名称，所有内置节点请参考：[内置节点](/zh/docs/manual/middle/elements/nodes/defaultNode) 教程。 | -**用法** +### 用法 ```javascript G6.registerNode( @@ -27,7 +27,7 @@ G6.registerNode( * 绘制节点，包含文本 * @param {Object} cfg 节点的配置项 * @param {G.Group} group 节点的容器 - * @return {G.Shape} 绘制的图形，通过node.get('keyShape') 可以获取到 + * @return {G.Shape} 绘制的图形，通过 node.get('keyShape') 可以获取到 */ draw(cfg, group) {}, /** @@ -59,9 +59,9 @@ G6.registerNode( */ setState(name, value, node) {}, /** - * 获取锚点（相关边的连如点） + * 获取锚点（相关边的连入点） * @param {Object} cfg 节点的配置项 - * @return {Array|null} 锚点的数组,如果为 null，则没有控制点 + * @return {Array|null} 锚点（相关边的连入点）的数组,如果为 null，则没有锚点 */ getAnchorPoints(cfg) {}, }, @@ -73,15 +73,15 @@ G6.registerNode( 当内置的边不能满足需求时，可以通过 `registerEdge(edgeName, options, extendEdgeName)` 方法注册自定义的边。 -**参数** +### 参数 | 名称 | 类型 | 是否必选 | 描述 | -| -------------- | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------- | +| -------------- | ------ | -------- | -------------------------------------------------- | | edgeName | String | true | 自定义边的名称 | -| options | Object | true | 自定义边时的配置项，配置项中包括完整的生命周期方法，具体请参考：[Shape 文档](/zh/docs/api/Shape)。 | -| extendEdgeName | String | false | 自定义边时可基于内置边进行定义，该字段表示内置边的名称，所有内置边请参考：[内置边](/zh/docs/manual/middle/elements/defaultEdge)。 | +| options | Object | true | 自定义边时的配置项，配置项中包括完整的生命周期方法，具体请参考：[Shape API](/zh/docs/api/Shape)。 | +| extendEdgeName | String | false | 自定义边时可基于内置边进行定义，该字段表示内置边的名称，所有内置边请参考：[内置边](/zh/docs/manual/middle/elements/edges/defaultEdge) 教程。 | -**用法** +### 用法 ```javascript G6.registerEdge( @@ -91,7 +91,7 @@ G6.registerEdge( * 绘制边，包含文本 * @param {Object} cfg 边的配置项 * @param {G.Group} group 边的容器 - * @return {G.Shape} 绘制的图形，通过node.get('keyShape') 可以获取到 + * @return {G.Shape} 绘制的图形，通过 node.get('keyShape') 可以获取到 */ draw(cfg, group) {}, /** @@ -131,14 +131,14 @@ G6.registerEdge( 当内置的 Behavior 不能满足需求时，使用 `registerBehavior(behaviorName, behavior)` 方法注册自定义的交互行为。 -**参数** +### 参数 | 名称 | 类型 | 是否必选 | 描述 | -| ------------ | ------ | -------- | ----------------------------------------------------------------------------------------------------------------------------- | -| behaviorName | String | true | 自定义 Behavior 的名称 | -| behavior | Object | true | 自定义 behavior 时的配置项，配置项中包括的方法及作用具体请参考：[Behavior 文档](/zh/docs/api/Behavior)。 | +| ------------ | ------ | -------- | ----------------------------------------------------------------- | +| behaviorName | String | true | 自定义 Behavior 的名称。 | +| behavior | Object | true | 自定义 behavior 时的配置项，配置项中包括的方法及作用具体请参考：[Behavior API](/zh/docs/api/Behavior)。 | -**用法** +### 用法 ```javascript // 注册自定义 Behavior @@ -186,14 +186,14 @@ G6.registerBehavior('behaviorName', { 当内置布局不满足需求时，可以通过 `G6.registerLayout(layoutName, layout)` 方法自定义布局。 -**参数** +### 参数 | 名称 | 类型 | 是否必选 | 描述 | -| ---------- | ------ | -------- | ------------------------------------------------------------------------------------------------------------- | -| layoutName | String | true | 自定义布局名称 | -| layout | Object | true | 自定义布局的配置项，配置项中包括的方法及作用具体请参考：[Layout 文档](/zh/docs/manual/middle/layout)。 | +| ---------- | ------ | -------- | --------------------------------------- | +| layoutName | String | true | 自定义布局名称。 | +| layout | Object | true | 自定义布局的配置项，配置项中包括的方法及作用具体请参考：[Layout API](/zh/docs/manual/middle/layout)。 | -**用法** +### 用法 ```javascript G6.registerLayout('layoutName', { diff --git a/docs/api/Event.en.md b/docs/api/Event.en.md index ba964d06bb..a635f65b0a 100644 --- a/docs/api/Event.en.md +++ b/docs/api/Event.en.md @@ -3,7 +3,7 @@ title: Event order: 6 --- -The parameters of callbacks for common events, Node events, and Edge events are described in [Behavior](./Behavior). +The parameters of callbacks for common events, Node events, and Edge events are described in [Behavior API](/en/docs/api/Behavior). ## Common Event @@ -18,7 +18,7 @@ The parameters of callbacks for common events, Node events, and Edge events are | mouseleave | Activated when the mouse leaves an item. **This is not a bubbled event**, which means this event will not be activated when the mouse leaves the descendant items. | | mousedown | Activated when the left or right button is clicked down. It cannot be activated by keyboard. | | mouseup | Activated when the left or right button is released. It cannot be activated by keyboard. | -| contextmenu | Open the context menu when user clicks the right button of mouse. | +| contextmenu | Open the context menu when user clicks the right button of mouse. [Demo](/en/examples/tool/contextMenu). | | dragstart | Activated when user begins to drag. This event is applied on a dragged item. | | drag | Activated during the dragging process. This event is applied on a dragged item. | | dragend | Activated when user stops dragging. This event is applied on a dragged item. | @@ -45,7 +45,7 @@ The parameters of callbacks for common events, Node events, and Edge events are | node:mouseleave | Activated when the mouse leaves the node. | | node:mousedown | Activated when the left or right button is clicked down on the node. It cannot be activated by keyboard. | | node:mouseup | Activated when the left or right button is released on the node. It cannot be activated by keyboard. | -| node:contextmenu | Open the context menu when user clicks the right button of mouse on the node. | +| node:contextmenu | Open the context menu when user clicks the right button of mouse on the node. [Demo](/en/examples/tool/contextMenu). | | node:dragstart | Activated when user begins to drag the node. This event is applied on the dragged node. | | node:drag | Activated during the dragging process on the node. This event is applied on the dragged node. | | node:dragend | Activated when user stops dragging on the node. This event is applied on the dragged node. | @@ -67,7 +67,7 @@ The parameters of callbacks for common events, Node events, and Edge events are | edge:mouseleave | Activated when the mouse leaves the edge. | | edge:mousedown | Activated when the left or right button is clicked down on the edge. It cannot be activated by keyboard. | | edge:mouseup | Activated when the left or right button is released on the edge. It cannot be activated by keyboard. | -| edge:contextmenu | Open the context menu when user clicks the right button of mouse on the edge. | +| edge:contextmenu | Open the context menu when user clicks the right button of mouse on the edge. [Demo](/en/examples/tool/contextMenu). | ## Canvas Event @@ -84,7 +84,7 @@ The parameters of callbacks for common events, Node events, and Edge events are | canvas:mousedown | Activated when the left or right button is clicked down on the canvas. It cannot be activated by keyboard. | | canvas:mouseup | Activated when the left or right button is released on the canvas. It cannot be activated by keyboard. | | canvas:contextmenu | Open the context menu when user clicks the right button of mouse on the canvas. | -| canvas:dragstart | Activated when user begins to drag the canvas. This event is applied on the dragged canvas. | +| canvas:dragstart | Activated when user begins to drag the canvas. This event is applied on the dragged canvas. [Demo](/en/examples/tool/contextMenu). | | canvas:drag | Activated during the dragging process on the canvas. This event is applied on the dragged canvas. | | canvas:dragend | Activated when user stops dragging on the canvas. This event is applied on the dragged canvas. | | canvas:dragenter | Activated when user drags the canvas into a target item. This event is applied on the target item. | diff --git a/docs/api/Event.zh.md b/docs/api/Event.zh.md index 9c67cdc52c..e8c10ab9e7 100644 --- a/docs/api/Event.zh.md +++ b/docs/api/Event.zh.md @@ -3,7 +3,7 @@ title: Event order: 6 --- -通用事件、Node 事件、Edge 事件及 Canvas 事件回调的参数请参考[Behavior 文档](./Behavior)。 +通用事件、Node 事件、Edge 事件及 Canvas 事件回调的参数请参考 [Behavior API](/zh/docs/api/Behavior)。 ## 通用事件 @@ -18,7 +18,7 @@ order: 6 | mouseleave | 鼠标移出元素范围时触发，**该事件不冒泡**，即鼠标移到其后代元素时不会触发 | | mousedown | 鼠标按钮被按下（左键或者右键）时触发，不能通过键盘触发 | | mouseup | 鼠标按钮被释放弹起时触发，不能通过键盘触发 | -| contextmenu | 用户右击鼠标时触发并打开上下文菜单 | +| contextmenu | 用户右击鼠标时触发并打开上下文菜单，见 [Demo](/zh/examples/tool/contextMenu) | | dragstart | 当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上 | | drag | 当拖拽元素在拖动过程中时触发的事件，此事件作用于被拖拽元素上 | | dragend | 当拖拽完成后触发的事件，此事件作用在被拖曳元素上 | @@ -28,7 +28,7 @@ order: 6 | keydown | 按下键盘键触发该事件 | | keyup | 释放键盘键触发该事件 | | touchstart | 当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发 | -| touchmove | 当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用 preventDefault() 事件可以阻止滚动。 | +| touchmove | 当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用 `preventDefault()` 事件可以阻止滚动。 | | touchend | 当手指从屏幕上离开的时候触发 | @@ -45,7 +45,7 @@ order: 6 | node:mouseleave | 鼠标移出节点时触发 | | node:mousedown | 鼠标按钮在节点上按下（左键或者右键）时触发，不能通过键盘触发 | | node:mouseup | 节点上按下的鼠标按钮被释放弹起时触发，不能通过键盘触发 | -| node:contextmenu | 用户在节点上右击鼠标时触发并打开右键菜单 | +| node:contextmenu | 用户在节点上右击鼠标时触发并打开右键菜单，见 [Demo](/zh/examples/tool/contextMenu) | | node:dragstart | 当节点开始被拖拽的时候触发的事件，此事件作用在被拖曳节点上 | | node:drag | 当节点在拖动过程中时触发的事件，此事件作用于被拖拽节点上 | | node:dragend | 当拖拽完成后触发的事件，此事件作用在被拖曳节点上 | @@ -67,7 +67,7 @@ order: 6 | edge:mouseleave | 鼠标移出边时触发 | | edge:mousedown | 鼠标按钮在边上按下（左键或者右键）时触发，不能通过键盘触发 | | edge:mouseup | 边上按下的鼠标按钮被释放弹起时触发，不能通过键盘触发 | -| edge:contextmenu | 用户在边上右击鼠标时触发并打开右键菜单 | +| edge:contextmenu | 用户在边上右击鼠标时触发并打开右键菜单，见 [Demo](/zh/examples/tool/contextMenu) | ## Canvas事件 @@ -83,7 +83,7 @@ order: 6 | canvas:mouseleave | 鼠标移出画布时触发 | | canvas:mousedown | 鼠标按钮在画布上按下（左键或者右键）时触发，不能通过键盘触发 | | canvas:mouseup | 画布上按下的鼠标按钮被释放弹起时触发，不能通过键盘触发 | -| canvas:contextmenu | 用户在画布上右击鼠标时触发并打开右键菜单 | +| canvas:contextmenu | 用户在画布上右击鼠标时触发并打开右键菜单，见 [Demo](/zh/examples/tool/contextMenu) | | canvas:dragstart | 当画布开始被拖拽的时候触发的事件，此事件作用在被拖曳画布上 | | canvas:drag | 当画布在拖动过程中时触发的事件，此事件作用于被拖拽画布上 | | canvas:dragend | 当拖拽完成后触发的事件，此事件作用在被拖曳画布上 | diff --git a/docs/api/Graph.en.md b/docs/api/Graph.en.md index f52f518e12..85fff37d0f 100644 --- a/docs/api/Graph.en.md +++ b/docs/api/Graph.en.md @@ -19,17 +19,17 @@ The life cycle of an instance of Graph is: Initialize -> Load data -> Render -> | container | String|HTMLElement | The DOM container of graph, it can be the id of a DOM element or the an HTML node. | | width | Number | undefined | The width of the canvas for graph with the unit 'px'. | | height | Number | undefined | The height of the canvas for graph with the unit 'px'. | -| renderer | String | canvas | The engine for rendering. Options: 'canvas' or 'svg'. | -| fitView | Boolean | false | Whether fit the canvas to the view port. | +| renderer | String | canvas | The engine for rendering. Options: `'canvas'` or `'svg'`. | +| fitView | Boolean | false | Whether to fit the canvas to the view port. | | fitViewPadding | Array | Number | Takes effect only when `fitView: true`. It is the padding between canvas and the border of view port.
- It can be a value, e.g. `fitViewPadding: 20`, which means the padding to the top, left, right, bottom are the same.
- Or an array, e.g. `fitViewPadding: [ 20, 40, 50, 20 ]`, the four values in the array indicate the padding to the top, right, bottom, left respectively. | -| groupByTypes | Boolean | true | Whether group the nodes and edges separately. When it is false, all the items (including nodes and edges) are in the same group, and the order/zindex of them are determined according to the order of their generation. | -| autoPaint | Boolean | true | Whether paint the graph automatically while item updated or view port changed. In order to enhance the performance, we recommend to turn off `antoPaint` when you are doing bulk operation on nodes or edges. This can be refered to [`setAutoPaint()`](#setautopaintauto). | +| groupByTypes | Boolean | true | Whether to group the nodes and edges separately. When it is false, all the items (including nodes and edges) are in the same group, and the order/zindex of them are determined according to the order of their generation. | +| autoPaint | Boolean | true | Whether to paint the graph automatically while item updated or view port changed. In order to enhance the performance, we recommend to turn off `antoPaint` when you are doing bulk operation on nodes or edges. This can be refered to [`setAutoPaint()`](#setautopaintauto). | | modes | Object | | The interaction modes of this graph. Please refer to [Interaction Mode](/en/docs/manual/middle/states/mode) for detail。 | | nodeStateStyles | Object | {} | The node styles on different states, e.g. hover, selected. It is a new feature of G6 3.1. | | edgeStateStyles | Object | {} | The edge styles on different states, e.g. hover, selected. It is a new feature of G6 3.1. | | defaultNode | Object | {} | Default node configurations in global, including shape, size, color and so on. Its priority is lower than the configurations in data. | | defaultEdge | Object | {} | Default edge configurations in global, including shape, size, color and so on. Its priority is lower than the configurations in data. | -| plugins | Array | [] | Plugins for graph. Please refer to [plugin](/en/docs/manual/tutorial/plugins#插件) for detail.| +| plugins | Array | [] | Plugins for graph. Please refer to [Plugin](/en/docs/manual/tutorial/plugins##plugin) for detail.| | animate | Boolean | false | Wheter activate the global animation. Which will take effect while changing layouts, changing data, and other global operations. | | animateCfg | Object | | The configurations for global animation. Takes effect only when `animate: true`. | | animateCfg.
onFrame | Function | null | The callback function for every frame of animation. The path of custom animation for node can be defined here. The nodes will move linearly when `onFrame` is null. | @@ -37,13 +37,12 @@ The life cycle of an instance of Graph is: Initialize -> Load data -> Render -> | animateCfg.
easing | String | easeLinear | The easing function name of animation. Please refer to ease in d3. | | minZoom | Number | 0.2 | The minimum zoom ratio. | | maxZoom | Number | 10 | The maximum zoom ratio. | -| pixelRatio | Number | 1.0 | Pixel ratio. | -| groupType | String | circle | Group type for nodes. Options: 'circle' or 'rect' | +| groupType | String | circle | Group type for nodes. Options: `'circle'` or `'rect'`. | | groupStyle | Object | | Group style for nodes, please refer to [Node Group](/en/docs/manual/middle/nodeGroup) for detail. | -| layout | Object | | Configurations for layout. The `type` in it is the name of layout method with the options: 'random', 'radial', 'mds', 'circular', 'fruchterman', 'force', 'dagre', 'concentric', 'grid'. For more configurations for different layout methods, please refer to  [Layout API](/en/docs/api/layout/Layout) | +| layout | Object | | Configurations for layout. The `type` in it is the name of layout method with the options: `'random'`, `'radial'`, `'mds'`, `'circular'`, `'fruchterman'`, `'force'`, `'dagre'`, `'concentric'`, `'grid'`. For more configurations for different layout methods, please refer to [Layout API](/en/docs/api/layout/Layout). | -⚠️**Attention:** In G6 3.1, we added two new configurations for graph: `nodeStateStyles` and `edgeStateStyles`. In the same time, we deleted `nodeStyle` and `edgeStyle` . To upgrate, replace `nodeStyle` with `nodeStateStyles`, and replace `edgeStyle` with `edgeStateStyles`, and keep the sub-configuration inside them. +⚠️Attention: In G6 3.1, we added two new configurations for graph: `nodeStateStyles` and `edgeStateStyles`. In the same time, we deleted `nodeStyle` and `edgeStyle` . To upgrate, replace `nodeStyle` with `nodeStateStyles`, and replace `edgeStyle` with `edgeStateStyles`, and keep the sub-configuration inside them. **Usage** @@ -119,7 +118,7 @@ Render a node group according to the data. | Name | Type | Required | Description | | --- | --- | --- | --- | | data | Object | true | The data to be rendered | -| groupType | string | true | Type of node group. Options: 'circle' or 'rect' | +| groupType | String | true | Type of node group. Options: `'circle'` or `'rect'` | **Usage** @@ -271,8 +270,8 @@ Add item(node, edge, or group) to the graph. | Name | Type | Required | Description | | --- | --- | --- | --- | -| type | String | true | The type of the item. Options: 'node', 'edge', and 'group'. | -| model | Object | true | The data model of the item. When type = 'group', refer to [Create Node Group](/en/docs/manual/advanced/create-node-group) | +| type | String | true | The type of the item. Options: `'node'`, `'edge'`, and `'group'`. | +| model | Object | true | The data model of the item. When `type: 'group'`, refer to [Create Node Group](/en/docs/manual/advanced/create-node-group) | **Usage** @@ -416,13 +415,13 @@ graph.setAutoPaint(autoPaint); ``` ### setAutoPaint(auto) -Whether repaint the canvas automatically after updating or deleting items. +Whether to repaint the canvas automatically after updating or deleting items. **Parameters** | Name | Type | Required | Description | | --- | --- | --- | --- | -| auto | Boolean | true | Whether repaint the canvas automatically. | +| auto | Boolean | true | Whether to repaint the canvas automatically. | **Usage** @@ -497,7 +496,7 @@ graph.on('node:dragend', e => { ### updateLayout(cfg) Update the layout configurations. -1. If there is `type` in `cfg`, `type` is a String and it is different from current layout method, `updateLayout(cfg)` will change the layout method and relayout; +1. If there is `type` in `cfg`, `type` is a string and it is different from current layout method, `updateLayout(cfg)` will change the layout method and relayout; 1. If there is no `type` in `cfg`, `updateLayout(cfg)` will relayout with current layout method and new layout configurations. **Parameters** @@ -611,7 +610,7 @@ This function will emit events `beforitemstatechange` and `afteritemstatechange` | --- | --- | --- | --- | | item | String / Object | true | The id or the instance of the item. | | state | String | true | The value of state. State can be comstomized as selected, hover, actived, and so on. | -| enabled | Boolean | true | Whether activate the state. | +| enabled | Boolean | true | Whether to activate the state. | **Usage** @@ -646,7 +645,7 @@ graph.clearItemStates(node); ### node(nodeFn) Set the style and other configurations for each node. -⚠️**Attention:** this funcion must **be called before graph.render()**. It does not take effect otherwise. +⚠️Attention: this funcion must **be called before graph.render()**. It does not take effect otherwise. **Parameters** @@ -674,7 +673,7 @@ graph.render() ### edge(edgeFn) Set the style and other configurations for each edge. -⚠️**Attention:** this funcion must **be called before graph.render()**. It does not take effect otherwise. +⚠️Attention: this funcion must **be called before graph.render()**. It does not take effect otherwise. **Parameters** @@ -770,7 +769,6 @@ const graph = new G6.Graph({ container: div, width: 500, height: 500, - pixelRatio: 2, modes: { default: [...], custom: [...] @@ -820,7 +818,7 @@ Change the zoom ratio. The parameter ratio is the related ratio about the curren | Name | Type | Required | Description | | --- | --- | --- | --- | | ratio | Number | true | Zoom ratio.| -| center | Object | false | Zoom at the center with x and y. If the center is ignored, this operation will zoom the graph with the current graph center. | +| center | Object | false | Zoom at the `center` with `x` and `y`. If the `center` is ignored, this operation will zoom the graph with the current graph center. | **Usage** @@ -840,7 +838,7 @@ Zoom the canvas at the center to a fixed ratio. | Name | Type | Required | Description | | --- | --- | --- | --- | | toRatio | Number | true | Fixed zoom ratio. | -| center | Object | false | Zoom at the center with x and y. If the center is ignored, this operation will zoom the graph with the current graph center. | +| center | Object | false | Zoom at the `center` with `x` and `y`. If the `center` is ignored, this operation will zoom the graph with the current graph center. | **Usage** @@ -954,7 +952,7 @@ Find single item according to a rule. | Name | Type | Required | Description | | --- | --- | --- | --- | -| type | String | true | Type of the item. Options: 'node', 'edge'. | +| type | String | true | Type of the item. Options: `'node'`, `'edge'`. | | fn | Function | true | Rule for searching. | @@ -999,7 +997,7 @@ Find all the items that match the rule. | Name | Type | Required | Description | | --- | --- | --- | --- | -| type | String | true | The type of the item. Options: 'node', 'edge'. | +| type | String | true | The type of the item. Options: `'node'`, `'edge'`. | | fn | Function | true | Rule for searching. | @@ -1023,7 +1021,7 @@ Find all the items whose value of state is true. | Name | Type | Required | Description | | --- | --- | --- | --- | -| type | String | true | The type of the item. Options: 'node', 'edge'. | +| type | String | true | The type of the item. Options: `'node'`, `'edge'`. | | state | String | true | State for searching. | @@ -1065,7 +1063,7 @@ graph.save() ### getNodes() Get all the node items in the graph. -⚠️**Attention:** it returns the items but not data models. +⚠️Attention: it returns the items but not data models. **Return** @@ -1081,11 +1079,7 @@ const nodes = graph.getNodes() ### getEdges() Get all the edge items in the graph. -<<<<<<< HEAD -⚠️**Attention:** it returns the items but not data models. -======= -Attention: it returns the items but not data models. ->>>>>>> feat: english version of API +⚠️Attention: it returns the items but not data models. **Return** @@ -1101,7 +1095,7 @@ const edges = graph.getEdges() ## Coordinate Transformation In this part, we will describe the methods about transformation between view port, canvas, and client coordinates. The relationships between them are shown below: - + ### getPointByClient(clientX, clientY) Transform client/screen coordinates into view port coordinates. @@ -1140,7 +1134,7 @@ Transform view port coordinates into client/screen coordinates. **Return** - Type of the return value: Object; -- Includes x and y. +- Includes `x` and `y`. **Usage** @@ -1197,7 +1191,7 @@ console.log('The x and y coordinates of canvas: ', point.x, point.y) ## Animation ### positionsAnimate() -Update the node positions according to the data model animatively. +Update the node positions according to the data model animatively. The `animateCfg` of the graph will be the animation configurations. ### stopAnimate() Stop the animation on the canvas. @@ -1247,13 +1241,13 @@ graph.removePlugin(miniMap) ``` ### get(key) -Get ant attribute of graph by key. +Get an property of graph by key. **Parameters** | Name | Type | Required | Description | | --- | --- | --- | --- | -| key | String | true | Key of the attribute. | +| key | String | true | Key of the property. | **Usage** @@ -1270,14 +1264,14 @@ const autoPaint = graph.get('autoPaint') ``` ### set(key, val) -Set the value to an attribute. +Set the value to an property. **Parameters** | Name | Type | Required | Description | | --- | --- | --- | --- | -| key | String | true | The key of the attribute. | -| val | String / Object | Array | true | The value of the attribute. | +| key | String | true | The key of the property. | +| val | String / Object / Array | true | The value of the property. | **Usage** diff --git a/docs/api/Graph.zh.md b/docs/api/Graph.zh.md index 1afea848b8..1a0a6dc0fb 100644 --- a/docs/api/Graph.zh.md +++ b/docs/api/Graph.zh.md @@ -28,7 +28,7 @@ Graph 的生命周期为：初始化—>加载数据—>渲染—>更新—>销 | edgeStateStyles | Object | {} | 各个状态下边的样式，例如 `hover`、`selected`，3.1版本新增。 | | defaultNode | Object | {} | 默认状态下节点的配置，比如 `shape`, `size`, `color`。会被写入的 data 覆盖。 | | defaultEdge | Object | {} | 默认状态下边的配置，比如 `shape`, `size`, `color`。会被写入的 data 覆盖。 | -| plugins | Array | [] | 向 graph 注册插件。插件机制请见：[plugin](/zh/docs/manual/tutorial/plugins#插件) | +| plugins | Array | [] | 向 graph 注册插件。插件机制请见：[插件](/zh/docs/manual/tutorial/plugins#插件) | | animate | Boolean | false | 是否启用全局动画。 | | animateCfg | Object | | 动画配置项，仅在 `animate` 为 `true` 时有效。 | | animateCfg.
onFrame | Function | null | 回调函数，用于自定义节点运动路径，为空时线性运动。 | @@ -36,13 +36,12 @@ Graph 的生命周期为：初始化—>加载数据—>渲染—>更新—>销 | animateCfg.
easing | String | easeLinear | 动画动效，可参见 d3 ease。 | | minZoom | Number | 0.2 | 最小缩放比例 | | maxZoom | Number | 10 | 最大缩放比例 | -| pixelRatio | Number | 1.0 | 像素比率 | | groupType | String | circle | 节点分组类型，支持 circle 和 rect | -| groupStyle | Object | | groupStyle 用于指定分组的样式，详情参看[节点分组](/zh/docs/manual/middle/nodeGroup) | +| groupStyle | Object | | groupStyle 用于指定分组的样式，详情参看 [节点分组 Group](/zh/docs/manual/middle/nodeGroup) 教程 | | layout | Object | | 布局配置项，使用 type 字段指定使用的布局方式，type可取以下值：random, radial, mds, circular, fruchterman, force, dagre，各布局详细的配置请参考 [Layout API 文档](/zh/docs/api/layout/Layout) | -**重点说明**: G6 3.1 版本中实例化 Graph 时，新增了 `nodeStateStyles` 及 `edgeStateStyles` 两个配置项，删除了 `nodeStyle` 和 `edgeStyle` ，使用 3.1 以下版本的同学，只需要将 `nodeStyle` 改成 `nodeStateStyles` ，将 `edgeStyle` 改成 `edgeStateStyles` ，配置内容保持不变。 +⚠️注意:6 3.1 版本中实例化 Graph 时，新增了 `nodeStateStyles` 及 `edgeStateStyles` 两个配置项，删除了 `nodeStyle` 和 `edgeStyle` ，使用 3.1 以下版本的同学，只需要将 `nodeStyle` 改成 `nodeStateStyles` ，将 `edgeStyle` 改成 `edgeStateStyles` ，配置内容保持不变。 **用法** @@ -118,7 +117,7 @@ graph.render() | 名称 | 类型 | 是否必选 | 描述 | | --- | --- | --- | --- | | data | Object | true | 渲染图的数据 | -| groupType | string | true | group 类型，支持 circle、rect | +| groupType | string | true | group 类型，支持 `'circle'`、`'rect'` | **用法** @@ -155,7 +154,7 @@ const data = { ] }; -// graph是Graph的实例 +// graph 是 Graph 的实例 graph.renderCustomGroup(data, "circle"); ``` ### @@ -237,7 +236,7 @@ graph.changeData(data) | 名称 | 类型 | 是否必选 | 描述 | | --- | --- | --- | --- | -| groupId | String | true | 分组ID | +| groupId | String | true | 分组 ID | **用法** @@ -253,7 +252,7 @@ graph.collapseGroup('groupId') | 名称 | 类型 | 是否必选 | 描述 | | --- | --- | --- | --- | -| groupId | String | true | 分组ID | +| groupId | String | true | 分组 ID | **用法** @@ -270,8 +269,8 @@ graph.expandGroup('groupId') | 名称 | 类型 | 是否必选 | 描述 | | --- | --- | --- | --- | -| type | String | true | 元素类型，可选值为 node、edge 和group | -| model | Object | true | 元素的数据模型，type = 'group' 时，参看[手动创建节点分组文档](/zh/docs/manual/advanced/create-node-group) | +| type | String | true | 元素类型，可选值为 `'node'`、`'edge'` 和 `'group'` | +| model | Object | true | 元素的数据模型，`type: 'group'` 时，参看 [手动创建节点分组文档](/zh/docs/manual/advanced/create-node-group) | **用法** @@ -446,7 +445,7 @@ graph.setAutoPaint(autoPaint); ## 布局 -G6 3.1 内置了丰富的布局。关于如何使用 G6 中内置的布局，请参考 [Layout API文档](/zh/docs/api/layout/Layout)。 +G6 3.1 内置了丰富的布局。关于如何使用 G6 中内置的布局，请参考 [Layout API](/zh/docs/api/layout/Layout)。 ### layout() 重新以当前配置的属性进行一次布局。 @@ -633,7 +632,7 @@ graph.setItemState('node1', 'selected', true); | 名称 | 类型 | 是否必选 | 描述 | | --- | --- | --- | --- | | item | String / Object | true | 元素 ID 或元素实例 | -| states | String / Array | null  | false | 取值可以是单个状态值，也可以是状态值数组或 null，当为 null 时，清除该元素的**第一个**状态。 | +| states | String / Array | null  | false | 取值可以是单个状态值，也可以是状态值数组或 `null`，当为 `null` 时，清除该元素的**第一个**状态。 | **用法** @@ -776,7 +775,6 @@ const graph = new G6.Graph({ container: div, width: 500, height: 500, - pixelRatio: 2, modes: { default: [...], custom: [...] @@ -793,7 +791,7 @@ graph.setMode('custom') **返回值** -- 返回值类型：string； +- 返回值类型：String； - 返回值表示当前的行为模式。 **用法** @@ -810,8 +808,8 @@ const mode = graph.getCurrentMode() **返回值** -- 返回值类型：number； -- 返回值表示当前视口的缩放比例， 默认值为 1。 +- 返回值类型：Number； +- 返回值表示当前视口的缩放比例， 默认值为 `1`。 **用法** @@ -828,15 +826,15 @@ const zoom = graph.getZoom() | 名称 | 类型 | 是否必选 | 描述 | | --- | --- | --- | --- | | ratio | Number | true | 缩放比例 | -| center | Object | false | 以 center 的 x、y 坐标为中心缩放，如果省略了 center 参数，则以元素当前位置为中心缩放 | +| center | Object | false | 以 `center` 的 `x`、`y` 坐标为中心缩放，如果省略了 `center` 参数，则以元素当前位置为中心缩放 | **用法** ```javascript -// 以(100, 100)为中心点，放大3倍 +// 以 (100, 100) 为中心点，放大3倍 graph.zoom(3, { x: 100, y: 100 }); -// 以当前元素位置为中心，缩小到0.5 +// 以当前元素位置为中心，缩小到 0.5 graph.zoom(0.5) ``` @@ -848,16 +846,16 @@ graph.zoom(0.5) | 名称 | 类型 | 是否必选 | 描述 | | --- | --- | --- | --- | | toRatio | Number | true | 固定比例值 | -| center | Object | false | 以 center 的 x、y 坐标为中心缩放，如果省略了 center 参数，则以元素当前位置为中心缩放 | +| center | Object | false | 以 `center` 的 `x`、`y` 坐标为中心缩放，如果省略了 `center` 参数，则以元素当前位置为中心缩放 | **用法** ```javascript -// 以(100, 100)为中心点，放大3倍 +// 以 (100, 100) 为中心点，放大3倍 graph.zoomTo(3, { x: 100, y: 100 }); -// 以当前元素位置为中心，缩小到0.5 +// 以当前元素位置为中心，缩小到 0.5 graph.zoomTo(0.5) ``` @@ -962,7 +960,7 @@ graph.fitView([20, 10, 20, 15]) | 名称 | 类型 | 是否必选 | 描述 | | --- | --- | --- | --- | -| type | String | true | 元素类型，可选值为 node、edge | +| type | String | true | 元素类型，可选值为 `'node'`、`'edge'` | | fn | Function | true | 查找的规则 | @@ -1007,7 +1005,7 @@ const node = graph.findById('node') | 名称 | 类型 | 是否必选 | 描述 | | --- | --- | --- | --- | -| type | String | true | 元素类型，可选值为 node、edge | +| type | String | true | 元素类型，可选值为 `'node'`、`'edge'` | | fn | Function | true | 查找的规则 | @@ -1031,8 +1029,8 @@ const nodes = graph.findAll('node', node => { | 名称 | 类型 | 是否必选 | 描述 | | --- | --- | --- | --- | -| type | String | true | 元素类型，可选值为 node、edge | -| state | String | true | 状态 | +| type | String | true | 元素类型，可选值为 `'node'`、`'edge'` | +| state | String | true | 状态名称 | **返回值** @@ -1074,7 +1072,7 @@ graph.save() ### getNodes() 获取图中所有节点的实例。 -注意：这里返回的是节点的实例，而不是节点的数据项。 +⚠️注意:这里返回的是节点的实例，而不是节点的数据项。 **返回值** @@ -1090,7 +1088,7 @@ const nodes = graph.getNodes() ### getEdges() 获取图中所有边的实例。 -注意：这里返回的是边的实例，而不是边的数据项。 +⚠️注意:这里返回的是边的实例，而不是边的数据项。 **返回值** @@ -1128,7 +1126,7 @@ const edges = graph.getEdges() ```javascript const point = graph.getPointByClient(e.clientX, e.clientY); -console.log('视口x/y坐标分别为:', point.x, point.y) +console.log('视口 x/y 坐标分别为:', point.x, point.y) ``` ### getClientByPoint(x, y) @@ -1145,7 +1143,7 @@ console.log('视口x/y坐标分别为:', point.x, point.y) **返回值** - 返回值类型：Object； -- 包含的属性：x 和 y 属性，分别表示屏幕/页面的 x、y 坐标。 +- 包含的属性：`x` 和 `y` 属性，分别表示屏幕/页面的 x、y 坐标。 **用法** @@ -1202,7 +1200,7 @@ console.log('Canvas画布的x/y坐标分别为:', point.x, point.y) ## 动画 ### positionsAnimate() -根据 Graph 上的 animateCfg 配置项，处理视口中节点的动画。 +根据当前数据中的节点位置，动画更新节点位置。将会使用 graph 上的 `animateCfg` 配置项作为动画行为的依据。 ### stopAnimate() 停止画布上的所有动画。 @@ -1282,7 +1280,7 @@ const autoPaint = graph.get('autoPaint') | 名称 | 类型 | 是否必选 | 描述 | | --- | --- | --- | --- | | key | String | true | 属性的键 | -| val | String / Object | Array | true | 属性的值 | +| val | String / Object / Array | true | 属性的值 | **用法** diff --git a/docs/api/Group.en.md b/docs/api/Group.en.md index 3b4439aa20..749a668611 100644 --- a/docs/api/Group.en.md +++ b/docs/api/Group.en.md @@ -3,7 +3,7 @@ title: Graphics Group order: 8 --- -Graphics Group (hereinafter referred to as Group) in G6 is similar to [``](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/g) [tag](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/g) in [SVG](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/g): Group a container of a group of graphics. The transformations on a Group such as clipping, rotating, zooming, and translating will be applied to all the children of the Group. The attributes like color and position will also be inherited by its children. Besides, Group can be nested for complicated objects. For more information about Group, please refer to《[Graphics Group](/en/docs/manual/advanced/graphics-group)》. +Graphics Group (hereinafter referred to as Group) in G6 is similar to `` tag in SVG : Group a container of a group of graphics. The transformations on a Group such as clipping, rotating, zooming, and translating will be applied to all the children of the Group. The properties like color and position will also be inherited by its children. Besides, Group can be nested for complicated objects. For more information about Group, please refer to [Graphics Group](/en/docs/manual/advanced/keyconcept/graphics-group) document. ## Instance Declaration @@ -21,10 +21,10 @@ Add a new group to the group. **Parameters** -| Name | Type | Description | -| --- | --- | --- | -| param | Function / Object / undefined | | -| cfg | Object | | +| Name | Type | +| --- | --- | +| param | Function / Object / undefined | +| cfg | Object | @@ -39,14 +39,14 @@ group.addGroup({ ### addShape(type, cfgs) -Add a new shape into the group
⚠️**Attention:** the clip and transform operations will affect all the shapes in the group. The graphics and their attributes are introduced in [Shape](/en/docs/api/Shape)。 +Add a new shape into the group
⚠️Attention: the clip and transform operations will affect all the shapes in the group. The graphics and their properties are introduced in [Shape API](/en/docs/api/Shape)。 **Parameters** | Name | Type | Description | | --- | --- | --- | -| type | String | The type of the shape. Options: `'rect'`, `'circle'`, `'fan'`, `'ellipse'`, `'marker'`, `'image'`, and so on. Please refer to [Shape and Their Attributes](/en/docs/manual/advanced/shape-and-properties) | +| type | String | The type of the shape. Options: `'rect'`, `'circle'`, `'fan'`, `'ellipse'`, `'marker'`, `'image'`, and so on. Please refer to [Graphics Shape Properties](/en/docs/manual/advanced/keyconcept/shape-and-properties) document | | cfg | Object | The configurations of the shape. | diff --git a/docs/api/Group.zh.md b/docs/api/Group.zh.md index 638e9dfd15..1f1627d5f5 100644 --- a/docs/api/Group.zh.md +++ b/docs/api/Group.zh.md @@ -3,7 +3,7 @@ title: Graphics Group order: 8 --- -图形分组 Graphics Group（下文简称 Group） 类似于 [SVG](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/g) 中的 [``](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/g) [标签](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/g)：Group 是用来组合图形对象的容器。在 Group 上添加变换（例如剪裁、旋转、放缩、平移等）会应用到其所有的子元素上。在 Group 上添加属性（例如颜色、位置等）会被其所有的子元素继承。此外， Group 可以多层嵌套使用，因此可以用来定义复杂的对象。关于 Group 更详细的介绍请参考《[图形分组 Group](/zh/docs/manual/advanced/graphics-group)》。 +图形分组 Graphics Group（下文简称 Group） 类似于 SVG 中的 `` 标签：Group 是用来组合图形对象的容器。在 Group 上添加变换（例如剪裁、旋转、放缩、平移等）会应用到其所有的子元素上。在 Group 上添加属性（例如颜色、位置等）会被其所有的子元素继承。此外， Group 可以多层嵌套使用，因此可以用来定义复杂的对象。关于 Group 更详细的介绍请参考 [图形分组 Group](/zh/docs/manual/advanced/keyconcept/graphics-group) 文档。 ## 声明实例 @@ -21,10 +21,10 @@ const group = new Group(cfgs); **参数** -| 名称 | 类型 | 说明 | -| --- | --- | --- | -| param | Function / Object / undefined | | -| cfg | Object | | +| 名称 | 类型 | +| --- | --- | +| param | Function / Object / undefined | +| cfg | Object | @@ -39,14 +39,14 @@ group.addGroup({ ### addShape(type, cfgs) -向分组中添加新的图形。
**注意**：在分组上添加的 clip， transform 等操作会影响到该分组中的所有图形。所有图形及其绘图属性请见 [Shape](/zh/docs/api/Shape)。 +向分组中添加新的图形。
⚠️注意:：在分组上添加的 clip， transform 等操作会影响到该分组中的所有图形。所有图形及其绘图属性请见 [Shape API](/zh/docs/api/Shape)。 **参数** | 名称 | 类型 | 说明 | | --- | --- | --- | -| type | String | 图元素类型，值可以为：`'rect'`、`'circle'`、`'fan'`、`'ellipse'`、`'marker'`、`'image'` 等，具体参考[Shape 的类型及属性](/zh/docs/manual/advanced/shape-and-properties) | +| type | String | 图元素类型，值可以为：`'rect'`、`'circle'`、`'fan'`、`'ellipse'`、`'marker'`、`'image'` 等，具体参考 [Shape 的类型及属性](/zh/docs/manual/advanced/keyconcept/shape-and-properties) 教程 | | cfg | Object | 图元素的属性 | @@ -203,7 +203,7 @@ const child = childrens[childrens.length - 1] ### getChildByIndex(index） -返回第 `index` 个子元素，从`0`开始计数。
返回值: Object +返回第 `index` 个子元素，从 `0` 开始计数。
返回值: Object **参数** @@ -211,7 +211,7 @@ const child = childrens[childrens.length - 1] | 名称 | 类型 | 说明 | | --- | --- | --- | -| index | Number | 子元素的序号，默认为 0 | +| index | Number | 子元素的序号，默认为 `0` | diff --git a/docs/api/Plugins.en.md b/docs/api/Plugins.en.md new file mode 100644 index 0000000000..8457ef6df6 --- /dev/null +++ b/docs/api/Plugins.en.md @@ -0,0 +1,94 @@ +--- +title: Plugins +order: 9 +--- + +There are several plugins in G6 which can be used inside and ouside G6 freely. +- [Grid](#grid) +- [Minimap](#minimap) +- [Edge Bundling](#edge-bundling) + +## Configure to Graph +In G6, Minimap is a plugin, which is packed as independent package. Here, we import Grid and Minimap for example: +```html + + + + + + +``` + +You only need to instantiate it and configure the minimap onto the instance of Graph: + +```javascript +// Instantialize the Grid plugin +const grid = new Grid(); +// Instantialize the Minimap plugin +const minimap = new Minimap(); +const graph = new G6.Graph({ + //... Other configurations + plugins: [ grid, minimap ] // Configure Grid and Minimap to the graph +}); +``` + + +## Grid +Grid draw grids on the canvas. + + + +Grid has no configurations. Just use the code in [Configure to Graph](#configure-to-graph) to use it. + + +## Minimap +Minimap is a tool for quick preview and exploration on large graph. + + + +It can be configured to adjust the styles and functions. + +### Configuration + +| Name | Type | Description | +| --- | --- | --- | +| container | Object | The DOM container of Minimap. The plugin will generate a new one if `container` is not defined | +| className | String | The className of the DOM element of the Minimap | +| viewportClassName | String | The className of the DOM element of the view port on the Minimap | +| type | String | Render type. Options: `'default'`: Render all the graphics shapes on the graph; `'keyShape'`: Only render the keyShape of the items on the graph to reach better performance; `'delegate'`: Only render the delegate of the items on the graph to reach better performance. Performance: `'default'` < `'keyShape'` < `'delegate'`. `'default'` by default | +| size | Array | The size of the Minimap | +| delegateStyle | Object | Takes effect when `type` is `'delegate'`. The style of the delegate of the items on the graph | + + +The `delegateStyle` has the properties: + +| Name | Type | Description | +| --- | --- | --- | --- | +| fill | String | Filling color | +| stroke | String | Stroke color | +| lineWidth | Number | The width of the stroke | +| opacity | Number | Opacity | +| fillOpacity | Number | Filling opacity | + + +## Edge Bundling +In complex graph with large number of edges, edge bundling can help you to improve the visual clutter. + + + +> Edge bundling on American airline graph. Demo Link. Demo Document. + +The edge bundling plugin can be configured to adjust the styles and functions. + +### Configuration + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| K | Number | 0.1 | The strength of the bundling | +| lambda | Number | 0.1 | The initial step length | +| divisions | Number | 1 | The initial number of division on each edge. It will be multipled by `divRate` in each cycle | +| divRate | Number | 2 | The rate of the divisions increasement. Large number means smoother result, but the performance will be worse when the number is too large | +| cycles | Number | 6 | The number of outer interations | +| iterations | Number | 90 | The initial number of inner interations. It will be multiplied by `iterRate` in each cycle | +| iterRate | Number | 0.6666667 | The rate of the iterations decreasement | +| bundleThreshold | Number | 0.6 | The edge similarity threshold for bundling. Large number means the edges in one bundle have smaller similarity, in other words, more edges in one bundle | diff --git a/docs/api/Plugins.zh.md b/docs/api/Plugins.zh.md new file mode 100644 index 0000000000..d5981ad11c --- /dev/null +++ b/docs/api/Plugins.zh.md @@ -0,0 +1,94 @@ +--- +title: 插件 Plugins +order: 9 +--- + +G6 中支持插件提供了一些可插拔的组件，可自用使用在 G6 或其他应用当中。这些插件包括： +- [Grid](#grid) +- [Minimap](#minimap) +- [Edge Bundling](#edge-bundling) + +## 配置方法 +G6 的插件是独立的包，需要单独引入，以 Grid 和 Minimap 插件为例： +```html + + + + + + +``` + +引入后，首先实例化需要使用的某插件对象。然后，在实例化图时将其配置到 `plugins` 中： + +```javascript +// 实例化 Grid 插件 +const grid = new Grid(); +const minimap = new Minimap(); +const graph = new G6.Graph({ + //... 其他配置项 + plugins: [ grid, minimap ] // 配置 Grid 插件和 Minimap 插件 +}); +``` + + +## Grid +Grid 插件在画布上绘制了网格。 + + + +Grid 没有配置项。使用 [配置方法](#配置方法) 中代码实例化即可。 + + +## Minimap +Minimap 是用于快速预览和探索图的工具。 + + + +实例化时可以通过配置项调整 Minimap 的样式和功能。 + +### 配置项 + +| 名称 | 类型 | 描述 | +| --- | --- | --- | --- | +| container | Object | 放置 Minimap 的 DOM 容器。若不指定则自动生成 | +| className | String | 生成的 DOM 元素的 className | +| viewportClassName | String | Minimap 上视窗 DOM 元素的 className | +| type | String | 选项：`'default'`：渲染图上所有图形；`'keyShape'`：只渲染图上元素的 keyShape，以减少渲染成本；`'delegate'`：只渲染图上元素的大致图形，以降低渲染成本。渲染成本 `'default'` > `'keyShape'` > `'delegate'`。默认为 `'default'` | +| size | Array | Minimap 的大小 | +| delegateStyle | Object | 在 `type` 为 `'delegate'` 时生效，代表元素大致图形的样式 | + + +其中，delegateStyle 可以设置如下属性： + +| 名称 | 类型 | 描述 | +| --- | --- | --- | --- | +| fill | String | 填充颜色 | +| stroke | String | 描边颜色 | +| lineWidth | Number | 描边宽度 | +| opacity | Number | 透明度 | +| fillOpacity | Number | 填充透明度 | + + +## Edge Bundling +在关系复杂、繁多的大规模图上，通过边绑定可以降低视觉复杂度。 + + + +> 美国航线图边绑定。Demo 链接。该 Demo 教程。 + + +实例化时可以通过配置项调整边绑定的功能。 + +### 配置项 + +| 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | +| K | Number | 0.1 | 边绑定的强度 | +| lambda | Number | 0.1 | 算法的初始步长 | +| divisions | Number | 1 | 初始的切割点数，即每条边将会被切割成的份数。每次迭代将会被乘以 `divRate` | +| divRate | Number | 2 | 切割增长率，每次迭代都会乘以该数字。数字越大，绑定越平滑，但计算量将增大 | +| cycles | Number | 6 | 迭代次数 | +| iterations | Number | 90 | 初始的内迭代次数，每次外迭代中将会被乘以 `iterRate` | +| iterRate | Number | 0.6666667 | 迭代下降率 | +| bundleThreshold | Number | 0.6 | 判定边是否应该绑定在一起的相似容忍度，数值越大，被绑在一起的边相似度越低，数量越多 | diff --git a/docs/api/Shape.en.md b/docs/api/Shape.en.md index b816dc9ff3..770c5aa9f2 100644 --- a/docs/api/Shape.en.md +++ b/docs/api/Shape.en.md @@ -6,9 +6,12 @@ order: 7 This document shows the functions that should be implemented or rewrited when custom nodes by `G6.registerNode` or custom edges by `G6.registerEdge`. ## Usage -``` +The following code is an example of customizing a type of edge: +```javascript import G6 from '@antv/g6' -G6.registerNode('nodeName', { +G6.registerEdge('edgeName', { + labelPosition: 'center', + labelAutoRotate: true, draw(cfg, group) { // The other functions such as drawShape anddrawLabel can be called in draw(cfg, group) this.drawShape() @@ -25,28 +28,25 @@ G6.registerNode('nodeName', { update(cfg, item) { // Update the item according } -}, 'circle') +}, 'line') ``` -## Attributes - -### itemType -The type of the item. Options: `'node'`, `'edge'`. +## Properties ### labelPosition The relative positions of label to the item. `'center'` by default. -- When `itemType` is `'node'`, options of `labelPosition` includes: `'top'`, `'bottom'`, `'left'`, `'right'` and `'center'`; -- When `itemType` is `'edge'`, options of `labelPosition` includes: `'start'`, `'end'` and `'center'`. +- When registering a type of node by `registerNode`, options of `labelPosition` includes: `'top'`, `'bottom'`, `'left'`, `'right'` and `'center'`; +- When registering a type of edge by `registerEdge`, options of `labelPosition` includes: `'start'`, `'end'` and `'center'`. ### labelAutoRotate -> Takes effect only when registerEdge. +> Takes effect only when `registerEdge`. -Whether rotate the label according to the edge. `false` by default. +Whether to rotate the label according to the edge. `false` by default. -**Tips: this is an unique attribute for edge.** +**Tips: this is an unique property for edge.** -## Draw +## Draw Functions The parameters for the four functions about draw are the same. Please refer to `draw()`. ### draw(cfg, group) @@ -62,7 +62,7 @@ Draw the node or edge, including the label on the it. Return `keyShape` of it. ### afterDraw(cfg, group) This function will be called after the node or edge being drawed. It is appropriate for extending graphics or animations for built-in node or edge. -## Update +## Update Functions ### update(cfg, item) Update the node or edge, including the label on it. @@ -78,7 +78,7 @@ Update the node or edge, including the label on it. This function will be called after the node or edge being updated. ### shouldUpdate(type) -Whether allow the node or edge to be updated. +Whether to allow the node or edge to be updated. **Paramters** diff --git a/docs/api/Shape.zh.md b/docs/api/Shape.zh.md index 211d911b76..d48c4aaa39 100644 --- a/docs/api/Shape.zh.md +++ b/docs/api/Shape.zh.md @@ -5,12 +5,15 @@ order: 7 本文介绍的 Shape 相关方法是在自定义节点（registerNode）或自定义边（registerEdge）的过程中需要部分实现或复写的方法。 -**友情提示：**以下属性和 API 方法，全部用于自定义节点和边时候使用，即作为 `G6.registerNode` / `G6.registerEdge` 的第二个参数中的方法使用。 +**友情提示：**以下属性和 API 方法，全部用于自定义节点和边时候使用，即作为 `G6.registerNode` / `G6.registerEdge` 的第二个参数中的方法。 ## 用法 -``` +下面以注册边为例： +```javascript import G6 from '@antv/g6' -G6.registerNode('nodeName', { +G6.registerEdge('edgeName', { + labelPosition: 'center', + labelAutoRotate: true, draw(cfg, group) { // 定义的其他方法，都可以在draw里面调用， 如 drawShape、drawLabel 等。 this.drawShape() @@ -28,28 +31,25 @@ G6.registerNode('nodeName', { // 更新绘制的元素 } -}, 'circle') +}, 'line') ``` ## 属性 -### itemType -元素类型，目前支持 `'node'`、`'edge'`，后续可能会支持 `'group'`。 - ### labelPosition 文本相对于图形的位置，默认值为 `'center'`。 -- 当 `itemType` 为 `'node'` 时，`labelPosition` 值包括：`'top'`、`'bottom'`、`'left'`、`'right'` 和 `'center'`； -- 当 `itemType` 为 `'edge'` 时，`labelPosition` 值包括：`'start'`、`'end'` 和 `'center'`。 +- 当使用 `registerNode` 注册节点时，`labelPosition` 可选值包括：`'top'`、`'bottom'`、`'left'`、`'right'` 和 `'center'`； +- 当使用 `registerEdge` 注册边时，`labelPosition` 可选值包括：`'start'`、`'end'` 和 `'center'`。 ### labelAutoRotate -> 只有在 registerEdge 时有用。 +> 只有在 `registerEdge` 时有用。 文本是否跟着线自动旋转，默认值为 `false`。 -**提示：edge特有。** +**提示：edge 特有。** -## 绘制 +## 绘制函数 绘制部分四个 API 的参数完全相同，参数说明部分参考 `draw()` 方法。 ### draw(cfg, group) @@ -65,7 +65,7 @@ G6.registerNode('nodeName', { ### afterDraw(cfg, group) 绘制完成以后的操作，用户可继承现有的节点或边，在 `afterDraw()` 方法中扩展图形或添加动画。 -## 更新 +## 更新函数 ### update(cfg, item) 更新节点或边，包括节点或边上的文本。 diff --git a/docs/api/TreeGraph.en.md b/docs/api/TreeGraph.en.md index ee3da42e36..cb88021bc2 100644 --- a/docs/api/TreeGraph.en.md +++ b/docs/api/TreeGraph.en.md @@ -5,7 +5,7 @@ order: 2 If you are going to visualize a tree, TreeGraph of G6 is more appropriate than Graph. The main differences between `G6.TreeGraph` and `G6.Graph` are data structure and built-in layout algorithms: -- Data structure: In G6, the tree data has nested structure. Edges are implicit in it. Each node data has `id` and `children` attributes at least: +- Data structure: In G6, the tree data has nested structure. Edges are implicit in it. Each node data has `id` and `children` properties at least: ```javascript const data = { @@ -24,7 +24,7 @@ const data = { ``` - Tree layout algorithms: - - Tree layout algorithms do not modify the source data. it generates a new data instead. And the source data will be an attribute of the new data. This mechanism will reduce the complexity of transformation from nested data to nodes and edges in graph. + - Tree layout algorithms do not modify the source data. it generates a new data instead. And the source data will be a property of the new data. This mechanism will reduce the complexity of transformation from nested data to nodes and edges in graph. - The layout will be re-calculated after adding / deleting / expanding / collapsing nodes on the tree. @@ -36,8 +36,8 @@ const data = { | Name | Type | Required | Description | | --- | --- | --- | --- | -| layout | Object | null | **V3.0.4 supports configurations for TreeGraph layout**. Before V3.0.4, the layout is formatted as a function. We recommend developers to use configurations now. | -| animate | Boolean | true | Whether activate animation for relayout. | +| layout | Object | null | *V3.0.4 supports configurations for TreeGraph layout*. Before V3.0.4, the layout is formatted as a function. We recommend developers to use configurations now. | +| animate | Boolean | true | Whether to activate animation for relayout. | **Usage** @@ -83,7 +83,7 @@ There are four layout algorithms for tree in G6: dendrogram, compactBox, mindmap | direction | String | LR | The direction of layout. Options: `'LR'` , `'RL'` , `'TB'` , `'BT'` , `'H'` , and `'V'`.
L: Left; R: right; T: top; B: bottom; H: horizontal; V: vertical. | | getChildren | Function | | Return all the children nodes of the current node. | -⚠️**Attention:** When`type='indeted'`, `direction` can only be `'LR'`, `'RL'`, and `'H'`. +⚠️Attention: When`type='indeted'`, `direction` can only be `'LR'`, `'RL'`, and `'H'`. ### dendrogram @@ -109,7 +109,7 @@ Different results with different `direction` values. | rankSep | Number | 200 | The separation between nodes in adjacent levels. | | nodeSize | Number | 20 | The node size. | | subTreeSep | Number | 10 | The separation between sub trees. | -| isHorizontal | Boolean | true | Whether layout the tree in horizontal. | +| isHorizontal | Boolean | true | Whether to layout the tree in horizontal. | ### compactBox @@ -137,7 +137,7 @@ Different effects for different `direction` values. | getVGap | Function | 18 | Set the vertical separations between nodes. | | getHGap | Function | 18 | Set the horizontal separations between nodes. | -⚠️**Attention:** `getWidth`, `getHeight`, `getVGap`, and `getHGap` will not change the node size: +⚠️Attention: `getWidth`, `getHeight`, `getVGap`, and `getHGap` will not change the node size: ```javascript /* * Gaps: filling space between nodes @@ -240,7 +240,7 @@ Incrementally update the children data of the parent. | data | Object | true | The data of subtreee. | | parent | Node | String | false | The id or instance of parent node. | -⚠️**Attention:** When the `parent` is null, this operation will update the graph fully. +⚠️Attention: When the `parent` is null, this operation will update the graph fully. **Usage** @@ -316,7 +316,7 @@ Refresh the layout. Usually, it is called after changing data. | Name | Type | Required| Description | | --- | --- | --- | --- | -| fitView | Boolean | false | Whether fit view after refreshing layout. | +| fitView | Boolean | false | Whether to fit view after refreshing layout. | **Usage** diff --git a/docs/api/TreeGraph.zh.md b/docs/api/TreeGraph.zh.md index 0a4a3904c5..142218c08c 100644 --- a/docs/api/TreeGraph.zh.md +++ b/docs/api/TreeGraph.zh.md @@ -35,8 +35,8 @@ const data = { **参数** | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | -| layout | Object | null | **3.0.4 版本开始支持树布局算法配置**。3.0.4 版本之前是 function 形式。建议开发者使用配置形式，操作粒度更细。 | +| --- | --- | ----- | --- | +| layout | Object | null | *V3.0.4 版本开始支持树布局算法配置*。V3.0.4 版本之前是 function 形式。建议开发者使用配置形式，操作粒度更细。 | | animate | Boolean | true | 默认打开重布局动画开关。 | @@ -71,7 +71,7 @@ const treeGraph = new G6.TreeGraph({ ``` -## layout配置项 +## layout 配置项 layout 目前支持 dendrogram、compactBox、mindmap 和 indeted 四种布局方式。 @@ -83,7 +83,7 @@ layout 目前支持 dendrogram、compactBox、mindmap 和 indeted 四种布局 | direction | String | LR | 布局方向，有 `LR` , `RL` , `TB` , `BT` , `H` , `V` 可选。
L：左；R：右；T：上；B：下；H：垂直；V：水平。 | | getChildren | Function | | 返回当前节点的所有子节点 | -⚠️**注意：**当 `type='indeted'` 时，`direction` 只能取 LR、RL 和 H 这三个值。 +⚠️注意:当 `type='indeted'` 时，`direction` 只能取 `'LR'`、`'RL'` 和 `'H'` 这三个值。 ### dendrogram @@ -94,11 +94,11 @@ layout 目前支持 dendrogram、compactBox、mindmap 和 indeted 四种布局 | LR | RL | H | | --- | --- | --- | -| | | | +| | | | | TB | BT | V | | --- | --- | --- | -| | | | +| | | | **dendrogram 配置项** @@ -137,7 +137,7 @@ layout 目前支持 dendrogram、compactBox、mindmap 和 indeted 四种布局 | getVGap | Function | 18 | 指定节点之间的垂直间距 | | getHGap | Function | 18 | 指定节点之间的水平间距 | -⚠️**注意：**使用 `getWidth`、`getHeight`、`getVGap` 和 `getHGap` 指定节点的宽高及间距后，并不会改变节点的大小，具体原理如下所示： +⚠️注意:使用 `getWidth`、`getHeight`、`getVGap` 和 `getHGap` 指定节点的宽高及间距后，并不会改变节点的大小，具体原理如下所示： ```javascript /* * Gaps: filling space between nodes @@ -165,7 +165,7 @@ layout 目前支持 dendrogram、compactBox、mindmap 和 indeted 四种布局 | LR | RL | H | | --- | --- | --- | -| | | | +| | | | **indented配置项** @@ -181,7 +181,7 @@ layout 目前支持 dendrogram、compactBox、mindmap 和 indeted 四种布局 **mindmap示意图** - + **mindmap配置项** @@ -240,7 +240,7 @@ treeGraph.addChild(data, 'root') | data | Object | true | 子树的数据 | | parent | Node | String | false | 父节点或父节点 ID | -⚠️**注意：**当parent参数为空时，则全量更新。 +⚠️注意:当 `parent` 参数为空时，则全量更新。 **用法** diff --git a/docs/api/layout/Graph.en.md b/docs/api/layout/Graph.en.md index 70dbd77a9b..02c568556a 100644 --- a/docs/api/layout/Graph.en.md +++ b/docs/api/layout/Graph.en.md @@ -4,7 +4,7 @@ order: 1 --- ## Random -Random is the default layout in G6. It will take effect when `layout` is not configured on the Graph instance and there is no position information in node data. +Random is the default layout in G6. It will take effect when `layout` is not assigned to the Graph instance and there is no position information in node data. @@ -18,6 +18,9 @@ Random is the default layout in G6. It will take effect when `layout` is not con #### height **Type**: Number
**Default**: The height of the graph
**Required**: false
**Description**: The height of the layout +#### workerEnabled +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction + ### Function The same as the superclass Layout, users do not need to concern about the function calling, which will be controlled by G6. @@ -33,7 +36,7 @@ const graph = new G6.Graph({ width: 300, height: 300 } -); +}); ``` ## MDS @@ -48,6 +51,9 @@ MDS (Multidimensional scaling) is used for project high dimensional data onto l #### linkDistance **Type**: Number
**Default**: 50
**Required**: false
**Description**: The edge length +#### workerEnabled +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction + ### Function The same as the superclass Layout, users do not need to concern about the function calling, which will be controlled by G6. @@ -59,9 +65,10 @@ const graph = new G6.Graph({ width: 1000, height: 600, layout: { - type: 'mds' + type: 'mds', + workerEnabled: true // Whether to activate web-worker } -); +}); ``` ## Force @@ -81,13 +88,16 @@ Force is the classical force-dicrected layout algorithm, which corresponds to fo #### nodeStrength -**Type**: Number
**Default**: null
**Required**: false
**Description**: The strength of node force. Positive value means attractive force, negative value means repulsive force. +**Type**: Number
**Default**: null
**Required**: false
**Description**: The strength of node force. Positive value means attractive force, negative value means repulsive force #### edgeStrength **Type**: Number
**Default**: null
**Required**: false
**Description**: The strength of edge force. Calculated according to the degree of nodes by default +#### preventOverlap +**Type**: Number
**Default**: false
**Required**: false
**Description**: Whether to prevent node overlappings. To activate preventing node overlappings, `nodeSize` is required, which is used for collide detection. The size in the node data will take effect if `nodeSize` is not assigned. + #### collideStrength **Type**: Number
**Default**: 1
**Required**: false
**Description**: The strength of force for preventing node overlappings. The range is [0, 1] @@ -95,13 +105,32 @@ Force is the classical force-dicrected layout algorithm, which corresponds to fo #### nodeSize **Type**: Number
**Default**: 10
**Required**: false
**Description**: The diameter of the node. It is used for preventing node overlappings. If `nodeSize` is not assigned, the size property in node data will take effect. If the size in node data does not exist either, `nodeSize` is assigned to 10 by default +#### nodeSpacing +**Type**: Number / Function +
**Default**: 0 +
**Required**: false +
**Example**: Example 1: 10 +
Example 2:   + +```javascript +d => { +  // d is a node +  if (d.id === 'node1') { +    return 100; +  } +  return 10; +} +``` + +
**Description**: +Takes effect when `preventOverlap` is `true`. It is the minimum distance between nodes to prevent node overlappings. It can be a function to define different distances for different nodes (example 2) #### alpha **Type**: Number
**Default**: 0.3
**Required**: false
**Description**: The current alpha of convergence #### alphaDecay -**Type**: Number
**Default**: 0.028
**Required**: false
**Description**: The decay ratio of alpha for convergence. THe range is [0, 1]. 0.028 corresponds to 300 times iteration +**Type**: Number
**Default**: 0.028
**Required**: false
**Description**: The decay ratio of alpha for convergence. The range is [0, 1]. 0.028 corresponds to 300 iterations #### alphaMin @@ -120,6 +149,10 @@ Force is the classical force-dicrected layout algorithm, which corresponds to fo **Type**: Function
**Default**: {}
**Required**: false
**Description**: The callback function after layout +#### workerEnabled +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction + + ### Function The same as the superclass Layout, users do not need to concern about the function calling, which will be controlled by G6. @@ -150,12 +183,13 @@ const graph = new G6.Graph({ console.log('force layout done'); } } -); +}); ``` ## Fruchterman -Fruchterman is a kind of force-directed layout. G6 implements it according to the paper[Graph Drawing by Force-directed Placement](http://www.mathe2.uni-bayreuth.de/axel/papers/reingold:graph_drawing_by_force_directed_placement.pdf). +Fruchterman is a kind of force-directed layout. G6 implements it according to the paper +Graph Drawing by Force-directed Placement. @@ -178,13 +212,17 @@ Fruchterman is a kind of force-directed layout. G6 implements it according to th #### clustering -**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether layout by cluster +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to layout by cluster #### clusterGravity **Type**: Number
**Default**: 10
**Required**: false
**Description**: The gravity of each cluster, which will affect the compactness of each cluster. Takes effect only when `clustering` is `true` +#### workerEnabled +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction + + ### Function The same as the superclass Layout, users do not need to concern about the function calling, which will be controlled by G6. @@ -203,14 +241,18 @@ const graph = new G6.Graph({ speed: 2, clustering: true, clusterGravity: 30, - maxIteration: 2000 + maxIteration: 2000, + workerEnabled: true // Whether to activate web-worker } -); +}); ``` ## Circular -Circular layout arranges the node on a circle. By tuning the configurations, user can adjust the node ordering method, division number, radial layout, and so on. G6 implements it according to the paper: [A framework and algorithms for circular drawings of graphs](https://www.sciencedirect.com/science/article/pii/S1570866705000031).
+Circular layout arranges the node on a circle. By tuning the configurations, user can adjust the node ordering method, division number, radial layout, and so on. G6 implements it according to the paper: +A framework and algorithms for circular drawings of graphs. + +
@@ -235,7 +277,7 @@ Circular layout arranges the node on a circle. By tuning the configurations, use #### clockwise -**Type**: Boolean
**Default**: true
**Required**: false
**Description**: Whether layout clockwisely +**Type**: Boolean
**Default**: true
**Required**: false
**Description**: Whether to layout clockwisely #### divisions @@ -249,6 +291,11 @@ Circular layout arranges the node on a circle. By tuning the configurations, use #### angleRatio **Type**: Number
**Default**: 1
**Required**: false
**Description**: How many 2*PIs Between the first node and the last node + +#### workerEnabled +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction + + ### Function The same as the superclass Layout, users do not need to concern about the function calling, which will be controlled by G6. @@ -271,27 +318,28 @@ const graph = new G6.Graph({ ordering: 'degree', angleRatio: 1 } -); +}); ``` ## Radial -Radial layout arranges the nodes to concentrics centered at a focus node according to their shortest path length to the focus node. G6 implements it according to the paper: [More Flexible Radial Layout](http://emis.ams.org/journals/JGAA/accepted/2011/BrandesPich2011.15.1.pdf). +Radial layout arranges the nodes to concentrics centered at a focus node according to their shortest path length to the focus node. G6 implements it according to the paper: +More Flexible Radial Layout. - + ### Configuration #### center -**Type**: Array
**Example**: [ 0, 0 ]
**Default**: The center of the graph
**Required**: false
**Description**: The center of the layout +**Type**: Array
**Example**: [ 0, 0 ]
**Default**: The center of the graph
**Required**: false
**Description**: The center of the layout. #### linkDistance -**Type**: Number
**Default**: 50
**Required**: false
**Description**: The edge length +**Type**: Number
**Default**: 50
**Required**: false
**Description**: The edge length. #### maxIteration -**Type**: Number
**Default**: 1000
**Required**: false
**Description**: The max iteration number +**Type**: Number
**Default**: 1000
**Required**: false
**Description**: The max iteration number. #### focusNode @@ -303,19 +351,40 @@ Radial layout arranges the nodes to concentrics centered at a focus node accordi #### preventOverlap -**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether prevent node overlappings. To activate preventing node overlappings, [`nodeSize`](#xWjHN) is required, which is used for collide detection. The size in the node data will take effect if `nodeSize` is not assigned. +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to prevent node overlappings. To activate preventing node overlappings, `nodeSize` is required, which is used for collide detection. The size in the node data will take effect if `nodeSize` is not assigned. #### nodeSize **Type**: Number
**Default**: 10
**Required**: false
**Description**: The diameter of the node. It is used for preventing node overlappings +#### nodeSpacing +**Type**: Number / Function +
**Default**: 0 +
**Required**: false +
**Example**: Example 1: 10 +
Example 2:   + +```javascript +d => { +  // d is a node +  if (d.id === 'node1') { +    return 100; +  } +  return 10; +} +``` + +
**Description**: +Takes effect when `preventOverlap` is `true`. It is the minimum distance between nodes to prevent node overlappings. It can be a function to define different distances for different nodes (example 2) + + #### maxPreventOverlapIteration **Type**: Number
**Default**: 200
**Required**: false
**Description**: The maximum iteration number of preventing node overlappings #### strictRadial -**Type**: Boolean
**Default**: true
**Required**: false
**Description**: Whether layout the graph as strict radial, which means the nodes will be arranged on each circle strictly. Takes effect only when `preventOverlap` is `true` +**Type**: Boolean
**Default**: true
**Required**: false
**Description**: Whether to layout the graph as strict radial, which means the nodes will be arranged on each circle strictly. Takes effect only when `preventOverlap` is `true` - When `preventOverlap` is `true`, and `strictRadial` is `false`, the overlapped nodes are arranged along their circles strictly. But for the situation that there are too many nodes on a circle to be arranged, the overlappings might not be eliminated completely - When `preventOverlap` is `true`, and `strictRadial` is `true` , the overlapped nodes can be arranged around their circle with small offsets. @@ -328,6 +397,19 @@ Radial layout arranges the nodes to concentrics centered at a focus node accordi +#### sortBy +**Type**: String
**Default**: undefined
**Required**: false
**Description**: Sort the nodes of the same level. `undefined` by default, which means place the nodes with connections as close as possible; `'data'` means place the node according to the ordering in data, the closer the nodes in data ordering, the closer the nodes will be placed. `sortBy` also can be assigned to any name of property in nodes data, such as `'cluster'`, `'name'` and so on (make sure the property exists in the data) + + + +#### sortStrength +**Type**: Number
**Default**: 10
**Required**: false
**Description**: The strength to sort the nodes in the same circle. Larger number means place the nodes with smaller distance of `sortBy` more closely. Takes effect only when `sortBy` is not `undefined` + + +#### workerEnabled +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction + + ### Function The same as the superclass Layout, users do not need to concern about the function calling, which will be controlled by G6. @@ -340,7 +422,7 @@ const graph = new G6.Graph({ width: 1000, height: 600, layout: { - type: 'circular', + type: 'radial', center: [ 200, 200 ], // The center of the graph by default linkDistance: 50, // The edge length maxIteration: 1000, @@ -348,9 +430,10 @@ const graph = new G6.Graph({ unitRadius: 100, preventOverlap: true, // nodeSize or size in data is required for preventOverlap: true nodeSize: 30, - strictRadial: false + strictRadial: false, + workerEnabled: true // Whether to activate web-worker } -); +}); ``` ## Dagre @@ -362,7 +445,7 @@ Dagre is an hierarchical layout. ### Configuration #### rankdir -**Type**: String
**Options**: 'TB' | 'BT' | 'LR' | 'RL'
**Default**: 'TB'
**Required**: false
**Description**: 布局的方向. T:top; B:bottom; L:left; R:right. +**Type**: String
**Options**: 'TB' | 'BT' | 'LR' | 'RL'
**Default**: 'TB'
**Required**: false
**Description**: The layout direction. T:top; B:bottom; L:left; R:right. - 'TB':Layout the graph from the top to the bottom; - 'BT':Layout the graph from the bottom to the top; @@ -373,12 +456,12 @@ Dagre is an hierarchical layout. #### align -**Type**: String
**Options**: 'UL' | 'UR' | 'DL' | 'DR'
**Default**: 'UL'
**Required**: false
**Description**: 节点对齐方式. U:upper; D:down; L:left; R:right +**Type**: String
**Options**: 'UL' | 'UR' | 'DL' | 'DR'
**Default**: 'UL'
**Required**: false
**Description**: The alignment of the nodes. U: upper; D: down; L: left; R: right -- 'UL':对齐到左上角; -- 'UR':对齐到右上角; -- 'DL':对齐到左下角; -- 'DR':对齐到右下角. +- 'UL': aligns the nodes to the upper left; +- 'UR': aligns the nodes to the upper right; +- 'DL': aligns the nodes to the down left; +- 'DR': aligns the nodes to the upper right. #### nodesep @@ -414,7 +497,11 @@ Dagre is an hierarchical layout. #### controlPoints -**Type**: Boolean
**Default**: true
**Required**: false
**Description**: Whether keep the control points of layout +**Type**: Boolean
**Default**: true
**Required**: false
**Description**: Whether to keep the control points of layout + + +#### workerEnabled +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction ### Function @@ -436,12 +523,12 @@ const graph = new G6.Graph({ ranksep: 50, controlPoints: true } -); +}); ``` ## Concentric -Concentric arranges the nodes on several concentrics. By tuning the parameters, users could order the nodes according to some property of node data, degree by default. Larger the value, more center the node will be placed. +Concentric arranges the nodes on several concentric circles. By tuning the parameters, users could order the nodes according to some property of node data, degree by default. Larger the value, more center the node will be placed. @@ -453,7 +540,7 @@ Concentric arranges the nodes on several concentrics. By tuning the parameters, #### preventOverlap -**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether prevent node overalappings. To activate this ability, [`nodeSize`](https://www.yuque.com/antv/g6/ngp0vg#xWjHN) should be assigned, which will be used for collide detection +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to prevent node overlappings. To activate preventing node overlappings, `nodeSize` is required, which is used for collide detection. The size in the node data will take effect if `nodeSize` is not assigned. If the size in node data does not exist either, `nodeSize` is assigned to 30 by default #### nodeSize @@ -481,13 +568,17 @@ Concentric arranges the nodes on several concentrics. By tuning the parameters, #### maxLevelDiff -**Type**: Number
**默认值:**undefined
**Required**: false
**Description**: The sum of concentric values in each level. If it is undefined, maxValue / 4 will take place, where maxValue is the max value of ordering properties. For example, if sortBy='degree', maxValue is the max degree value of all the nodes +**Type**: Number
**默认值:**undefined
**Required**: false
**Description**: The sum of concentric values in each level. If it is undefined, maxValue / 4 will take place, where maxValue is the max value of ordering properties. For example, if `sortBy` is `'degree'`, maxValue is the max degree value of all the nodes #### sortBy **Type**: String
**Default**: undefined
**Required**: false
**Description**: Order the nodes according to this parameter. It is the property's name of node. The node with higher value will be placed to the center. If it is undefined, the algorithm will order the nodes by their degree +#### workerEnabled +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction + + ### Function The same as the superclass Layout, users do not need to concern about the function calling, which will be controlled by G6. @@ -510,16 +601,17 @@ const graph = new G6.Graph({ startAngle: 0, clockwise: false, maxLevelDiff: 10, - sortBy: 'degree' + sortBy: 'degree', + workerEnabled: true // Whether to activate web-worker } -); +}); ``` ## Grid Grid orders the nodes according to the configurations and arranged them onto grid. - + ### Configuration @@ -528,7 +620,7 @@ Grid orders the nodes according to the configurations and arranged them onto gri #### preventOverlap -**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Prevent node overlappings. Only when the `nodeSize` is assigned, the collide detection will take effect +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to prevent node overlappings. To activate preventing node overlappings, `nodeSize` is required, which is used for collide detection. The size in the node data will take effect if `nodeSize` is not assigned. If the size in node data does not exist either, `nodeSize` is assigned to 30 by default #### nodeSize @@ -555,6 +647,10 @@ Grid orders the nodes according to the configurations and arranged them onto gri **Type**: String
**Default**: undefined
**Required**: false
**Description**: The ordering method for nodes. Smaller the index in the ordered array, more center the node will be placed. If `sortBy` is undefined, the algorithm order the nodes according to their degrees +#### workerEnabled +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction + + ### Function The same as the superclass Layout, users do not need to concern about the function calling, which will be controlled by G6. @@ -567,7 +663,7 @@ const graph = new G6.Graph({ width: 1000, height: 600, layout: { - type: 'concentric', + type: 'grid', begin: [ 0, 0 ], preventOverlap: true, // nodeSize or size in data is required for preventOverlap: true preventOverlapPdding: 20, @@ -577,5 +673,5 @@ const graph = new G6.Graph({ cols: 5, sortBy: 'degree' } -); +}); ``` diff --git a/docs/api/layout/Graph.zh.md b/docs/api/layout/Graph.zh.md index 17207d6021..47a0bd7049 100644 --- a/docs/api/layout/Graph.zh.md +++ b/docs/api/layout/Graph.zh.md @@ -18,6 +18,10 @@ Random 布局是 G6 中的默认布局方法。当实例化图时没有指定布 #### height **类型**： Number
**默认值**：图的高度
**是否必须**：false
**说明**：布局的高度范围 +#### workerEnabled +**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 + + ### 方法 与父类 Layout 的方法相同。使用该布局时不需要关心内部方法的调用，由 G6 控制。 @@ -33,12 +37,12 @@ const graph = new G6.Graph({ width: 300, height: 300 } -); +}); ``` ## MDS -MDS 布局是高维数据降维算法布局，该算法全称 Multidimensional scaling 。
+MDS 布局是高维数据降维算法布局，该算法全称 Multidimensional Scaling 。
### 属性 @@ -48,6 +52,10 @@ MDS 布局是高维数据降维算法布局，该算法全称 Multidimensional #### linkDistance **类型**： Number
**默认值**：50
**是否必须**：false
**说明**：边长度 +#### workerEnabled +**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 + + ### 方法 与父类 Layout 的方法相同。使用该布局时不需要关心内部方法的调用，由 G6 控制。 @@ -59,14 +67,15 @@ const graph = new G6.Graph({ width: 1000, height: 600, layout: { - type: 'mds' + type: 'mds', + workerEnabled: true // 可选，开启 web-worker } -); +}); ``` ## Force -Force 布局经典的力导向布局方法，与 d3 的力导向布局方法相对应。其属性也与 d3 的力道布局参数相对应。 +Force 布局经典的力导向布局方法，与 d3 的力导向布局方法相对应。其属性也与 d3.js 的力导布局参数相对应。 @@ -88,20 +97,41 @@ Force 布局经典的力导向布局方法，与 d3 的力导向布局方法相 **类型**：Number
**默认值**：null
**是否必须**：false
**说明**：边的作用力，默认根据节点的出入度自适应 +#### preventOverlap +**类型**：Number
**默认值**：false
**是否必须**：false
**说明**：是否防止重叠，必须配合下面属性 `nodeSize`，只有设置了与当前图节点大小相同的 `nodeSize` 值，才能够进行节点重叠的碰撞检测 + + #### collideStrength **类型**：Number
**默认值**：1
**是否必须**：false
**说明**：防止重叠的力强度，范围 [0, 1] #### nodeSize -**类型**： Number
**默认值**：10
**是否必须**：false
**说明**：节点大小（直径）。用于碰撞检测。若不指定，则根据传入的节点的 size 属性计算。若即不指定，即节点中也没有 `size`，则默认大小为 10 +**类型**： Number
**默认值**：10
**是否必须**：false
**说明**：节点大小（直径）。用于碰撞检测。若不指定，则根据传入的节点的 size 属性计算。若即不指定，即节点中也没有 `size`，则默认大小为 `10` +#### nodeSpacing +**类型**: Number / Function
**默认值**: 0
**是否必须**: false +
**示例**: Example 1: 10 +
Example 2:   + +```javascript +d => { +  // d is a node +  if (d.id === 'node1') { +    return 100; +  } +  return 10; +} +``` + +
**描述**: +`preventOverlap` 为 `true` 时生效, 防止重叠时节点边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距, 如示例 2 所示 #### alpha **类型**：Number
**默认值**：0.3
**是否必须**：false
**说明**：当前的迭代收敛阈值 #### alphaDecay -**类型**：Number
**默认值**：0.028
**是否必须**：false
**说明**：迭代阈值的衰减率。[0, 1]，0.028 对应迭代书为 300 +**类型**：Number
**默认值**：0.028
**是否必须**：false
**说明**：迭代阈值的衰减率。范围 [0, 1]。0.028 对应迭代数为 300 #### alphaMin @@ -109,7 +139,7 @@ Force 布局经典的力导向布局方法，与 d3 的力导向布局方法相 #### forceSimulation -**类型**：Object
**默认值**：null
**是否必须**：false
**说明**：自定义 force 方法，若不指定，则使用 d3 的方法 +**类型**：Object
**默认值**：null
**是否必须**：false
**说明**：自定义 force 方法，若不指定，则使用 d3.js 的方法 #### onTick @@ -119,6 +149,9 @@ Force 布局经典的力导向布局方法，与 d3 的力导向布局方法相 #### onLayoutEnd **类型**：Function
**默认值**：{}
**是否必须**：false
**说明**：布局完成后的回调函数 +#### workerEnabled +**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 + ### 方法 与父类 Layout 的方法相同。使用该布局时不需要关心内部方法的调用，由 G6 控制。 @@ -155,7 +188,8 @@ const graph = new G6.Graph({ ## Fruchterman -Fruchterman 布局是一种力导布局。算法原文：[Graph Drawing by Force-directed Placement](http://www.mathe2.uni-bayreuth.de/axel/papers/reingold:graph_drawing_by_force_directed_placement.pdf)。 +Fruchterman 布局是一种力导布局。算法原文： +Graph Drawing by Force-directed Placement @@ -184,6 +218,9 @@ Fruchterman 布局是一种力导布局。算法原文：[Graph Drawing by Force #### clusterGravity **类型**： Number
**默认值**：10
**是否必须**：false
**说明**：聚类内部的重力大小，影响聚类的紧凑程度，在 `clustering` 为 `true` 时生效 +#### workerEnabled +**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 + ### 方法 与父类 Layout 的方法相同。使用该布局时不需要关心内部方法的调用，由 G6 控制。 @@ -203,14 +240,17 @@ const graph = new G6.Graph({ speed: 2, // 可选 clustering: true, // 可选 clusterGravity: 30, // 可选 - maxIteration: 2000 - } -); + maxIteration: 2000, // 可选，迭代次数 + workerEnabled: true // 可选，开启 web-worker } +}); ``` ## Circular -Circular 布局将所有节点布局在一个圆环上，可以选择节点在圆环上的排列顺序。可以通过参数的配置扩展出环的分组布局、螺旋形布局等。原文链接：[A framework and algorithms for circular drawings of graphs]()。
+Circular 布局将所有节点布局在一个圆环上，可以选择节点在圆环上的排列顺序。可以通过参数的配置扩展出环的分组布局、螺旋形布局等。原文链接： +A framework and algorithms for circular drawings of graphs。 + +
@@ -250,6 +290,10 @@ Circular 布局将所有节点布局在一个圆环上，可以选择节点在 **类型**： Number
**默认值**：1
**是否必须**：false
**说明**：从第一个节点到最后节点之间相隔多少个 2*PI +#### workerEnabled +**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 + + ### 方法 与父类 Layout 的方法相同。使用该布局时不需要关心内部方法的调用，由 G6 控制。 @@ -272,14 +316,15 @@ const graph = new G6.Graph({ ordering: 'degree', // 可选 angleRatio: 1 // 可选 } -); +}); ``` ## Radial -Radial 布局是将图布局成辐射状的布局方法。以一个 focusNode 为中心，其余节点按照与 focusNode 的度数关系排列在不同距离的环上。距离 focusNode 一度的节点布局在与其最近的第一个环上，距离 focusNode 二度的节点布局在第二个环上，以此类推。算法原文链接：[More Flexible Radial Layout](http://emis.ams.org/journals/JGAA/accepted/2011/BrandesPich2011.15.1.pdf)。 +Radial 布局是将图布局成辐射状的布局方法。以一个 focusNode 为中心，其余节点按照与 focusNode 的度数关系排列在不同距离的环上。距离 focusNode 一度的节点布局在与其最近的第一个环上，距离 focusNode 二度的节点布局在第二个环上，以此类推。算法原文链接： +More Flexible Radial Layout。 - + ### 属性 @@ -304,13 +349,32 @@ Radial 布局是将图布局成辐射状的布局方法。以一个 focusNode #### preventOverlap -**类型**：Boolean
**默认值**：false
**是否必须**：false
**说明**：是否防止重叠，必须配合下面属性 [`nodeSize`](#xWjHN) ，只有设置了与当前图节点大小相同的 `nodeSize` 值，才能够进行节点重叠的碰撞检测 +**类型**：Boolean
**默认值**：false
**是否必须**：false
**说明**：是否防止重叠，必须配合下面属性 `nodeSize`，只有设置了与当前图节点大小相同的 `nodeSize` 值，才能够进行节点重叠的碰撞检测 #### nodeSize **类型**： Number
**默认值**：10
**是否必须**：false
**说明**：节点大小（直径）。用于防止节点重叠时的碰撞检测 +#### nodeSpacing +**类型**: Number / Function
**默认值**: 0
**是否必须**: false +
**示例**: Example 1: 10 +
Example 2:   + +```javascript +d => { +  // d is a node +  if (d.id === 'node1') { +    return 100; +  } +  return 10; +} +``` + +
**描述**: +`preventOverlap` 为 `true` 时生效, 防止重叠时节点边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距, 如示例 2 所示 + + #### maxPreventOverlapIteration **类型**： Number
**默认值**：200
**是否必须**：false
**说明**：防止重叠步骤的最大迭代次数 @@ -328,6 +392,19 @@ Radial 布局是将图布局成辐射状的布局方法。以一个 focusNode > （左）preventOverlap = false。（中）preventOverlap = false，strictRadial = true。（右）preventOverlap = false，strictRadial = false。 +#### sortBy +**类型**: String
**默认值**: undefined
**是否必须**: false
**说明**: 同层节点布局后相距远近的依据。默认 `undefined` ，表示根据数据的拓扑结构（节点间最短路径）排布，即关系越近/点对间最短路径越小的节点将会被尽可能排列在一起；`'data'` 表示按照节点在数据中的顺序排列，即在数据顺序上靠近的节点将会尽可能排列在一起；也可以指定为节点数据中的某个字段名，例如 `'cluster'`、`'name'` 等（必须在数据中存在） + + + +#### sortStrength +**类型**: Number
**默认值**: 10
**是否必须**: false
**说明**: 同层节点根据 `sortBy` 排列的强度，数值越大，`sortBy` 指定的方式计算出距离越小的越靠近。`sortBy` 不为 `undefined` 时生效 + + + +#### workerEnabled +**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 + ### 方法 与父类 Layout 的方法相同。使用该布局时不需要关心内部方法的调用，由 G6 控制。 @@ -341,7 +418,7 @@ const graph = new G6.Graph({ width: 1000, height: 600, layout: { - type: 'circular', + type: 'radial', center: [ 200, 200 ], // 可选，默认为图的中心 linkDistance: 50, // 可选，边长 maxIteration: 1000, // 可选 @@ -350,8 +427,9 @@ const graph = new G6.Graph({ preventOverlap: true, // 可选，必须配合 nodeSize nodeSize: 30, // 可选 strictRadial: false // 可选 + workerEnabled: true // 可选，开启 web-worker } -); +}); ``` ## Dagre @@ -370,8 +448,6 @@ Dagre 是一种层次布局。 - 'LR'：从左至右布局； - 'RL'：从右至左布局。 -
- #### align **类型**： String
**可选值**：'UL' | 'UR' | 'DL' | 'DR'
**默认值**：'UL'
**是否必须**：false
**说明**：节点对齐方式。U：upper（上）；D：down（下）；L：left（左）；R：right（右） @@ -418,6 +494,10 @@ Dagre 是一种层次布局。 **类型**： Boolean
**默认值**：true
**是否必须**：false
**说明**：是否保留布局连线的控制点 +#### workerEnabled +**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 + + ### 方法 与父类 Layout 的方法相同。使用该布局时不需要关心内部方法的调用，由 G6 控制。 @@ -437,7 +517,7 @@ const graph = new G6.Graph({ ranksep: 50, // 可选 controlPoints: true // 可选 } -); +}); ``` ## Concentric @@ -454,7 +534,7 @@ Concentric 布局为同心圆布局，用户可以指定节点某个属性为排 #### preventOverlap -**类型**：Boolean
**默认值**：false
**是否必须**：false
**说明**：是否防止重叠，必须配合下面属性 [`nodeSize`](https://www.yuque.com/antv/g6/ngp0vg#xWjHN) ，只有设置了与当前图节点大小相同的 `nodeSize` 值，才能够进行节点重叠的碰撞检测 +**类型**：Boolean
**默认值**：false
**是否必须**：false
**说明**：是否防止重叠，必须配合下面属性 `nodeSize`，只有设置了与当前图节点大小相同的 `nodeSize` 值，才能够进行节点重叠的碰撞检测 #### nodeSize @@ -482,13 +562,17 @@ Concentric 布局为同心圆布局，用户可以指定节点某个属性为排 #### maxLevelDiff -**类型**： Number
**默认值：**undefined
**是否必须**：false
**说明**：每一层同心值的求和。若为 undefined，则将会被设置为 maxValue / 4 ，其中 maxValue 为最大的排序依据的属性值。例如，若 sortBy='degree'，则 maxValue 为所有节点中度数最大的节点的度数 +**类型**： Number
**默认值：**undefined
**是否必须**：false
**说明**：每一层同心值的求和。若为 undefined，则将会被设置为 maxValue / 4 ，其中 maxValue 为最大的排序依据的属性值。例如，若 `sortBy` 为 `'degree'`，则 maxValue 为所有节点中度数最大的节点的度数 #### sortBy **类型**： String
**默认值**：undefined
**是否必须**：false
**说明**：指定排序的依据（节点属性名），数值越高则该节点被放置得越中心。若为 undefined，则会计算节点的度数，度数越高，节点将被放置得越中心 +#### workerEnabled +**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 + + ### 方法 与父类 Layout 的方法相同。使用该布局时不需要关心内部方法的调用，由 G6 控制。 @@ -512,15 +596,16 @@ const graph = new G6.Graph({ clockwise: false, // 可选 maxLevelDiff: 10, // 可选 sortBy: 'degree' // 可选 + workerEnabled: true // 可选，开启 web-worker } -); +}); ``` ## Grid Grid 布局是将所有节点通过某种指定属性排序后，整齐地放置在网格上。 - + ### 属性 @@ -529,7 +614,7 @@ Grid 布局是将所有节点通过某种指定属性排序后，整齐地放置 #### preventOverlap -**类型**：Boolean
**默认值**：false
**是否必须**：false
**说明**：是否防止重叠，必须配合下面属性 [`nodeSize`](https://www.yuque.com/antv/g6/ngp0vg#xWjHN) ，只有设置了与当前图节点大小相同的 `nodeSize` 值，才能够进行节点重叠的碰撞检测 +**类型**：Boolean
**默认值**：false
**是否必须**：false
**说明**：是否防止重叠，必须配合下面属性 `nodeSize`，只有设置了与当前图节点大小相同的 `nodeSize` 值，才能够进行节点重叠的碰撞检测 #### nodeSize @@ -555,6 +640,9 @@ Grid 布局是将所有节点通过某种指定属性排序后，整齐地放置 #### sortBy **类型**： String
**默认值**：undefined
**是否必须**：false
**说明**：指定排序的依据（节点属性名），数值越高则该节点被放置得越中心。若为 undefined，则会计算节点的度数，度数越高，节点将被放置得越中心 +#### workerEnabled +**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 + ### 方法 与父类 Layout 的方法相同。使用该布局时不需要关心内部方法的调用，由 G6 控制。 @@ -568,7 +656,7 @@ const graph = new G6.Graph({ width: 1000, height: 600, layout: { - type: 'concentric', + type: 'grid', begin: [ 0, 0 ], // 可选， preventOverlap: true, // 可选，必须配合 nodeSize preventOverlapPdding: 20, // 可选 @@ -577,6 +665,7 @@ const graph = new G6.Graph({ rows: 5, // 可选 cols: 5, // 可选 sortBy: 'degree' // 可选 + workerEnabled: true // 可选，开启 web-worker } -); +}); ``` diff --git a/docs/api/layout/Layout.en.md b/docs/api/layout/Layout.en.md index 5f6812ed60..028edc9c1f 100644 --- a/docs/api/layout/Layout.en.md +++ b/docs/api/layout/Layout.en.md @@ -16,7 +16,7 @@ const graph = new G6.Graph({ }); ``` -The configurations of each layout algorithms are different. Please refer to corresponding API of layout. +The configurations of each layout algorithms are different. Please refer to corresponding API of each layout in this directory.
When `layout` is not assigned on graph: - If there are `x` and `y` in node data, the graph will render with these information; @@ -35,7 +35,7 @@ Initialize the layout. | Name | Type | Required | Description | | --- | --- | --- | --- | -| data | Object | true | 布局中使用的数据 | +| data | Object | true | The data for the layout | diff --git a/docs/api/layout/TreeGraph.en.md b/docs/api/layout/TreeGraph.en.md index 5a558ae350..3a2ae6c9bc 100644 --- a/docs/api/layout/TreeGraph.en.md +++ b/docs/api/layout/TreeGraph.en.md @@ -1,12 +1,12 @@ --- -title: TreeGraph +title: TreeGraph Layout order: 2 --- ## CompactBox -CompactBox is the default layout for TreeGraph. It will consider the bounding box of each node when layout. It comes from classical [Reingold–Tilford tidy layout algorithm](http://emr.cs.iit.edu/~reingold/tidier-drawings.pdf). +CompactBox is the default layout for TreeGraph. It will consider the bounding box of each node when layout. It comes from classical Reingold–Tilford tidy layout algorithm. - + ### Configuration @@ -38,6 +38,16 @@ CompactBox is the default layout for TreeGraph. It will consider the bounding bo +#### getId +**Type**: Function
**Example**: +```javascript +(d) => { + // d is a node + return d.id + '_node'; +} +``` +**Required**: false
**Description**: Sets the id for each node + #### getWidth **Type**: Number | Function
**Example**: ```javascript @@ -93,7 +103,7 @@ CompactBox is the default layout for TreeGraph. It will consider the bounding bo ## Dendrogram -[Dendrogram](https://en.wikipedia.org/wiki/Dendrogram) arranges all the leaves on the same level. It is appropriate for hierarchical clustering. +Dendrogram arranges all the leaves on the same level. It is appropriate for hierarchical clustering. It does not consider the node size, which will be regarded as 1px. @@ -147,7 +157,7 @@ Indented layout represents the hierarchy by indent between them. Each node will ### Configuration #### direction -**Type**: String
**Options**: 'LR' | 'RL' | 'H'
**Default**: 'LR'
**Required**: false
**Description**: The direction of layout. +**Type**: String
**Options**: 'LR' | 'RL' | 'H'
**Default**: 'LR'
**Required**: false
**Description**: The direction of layout: - LR —— Root is on the left, layout from the left to the right(left image below)
- RL —— Root is on the right, layout from the right to the left(center image below)
@@ -156,6 +166,7 @@ Indented layout represents the hierarchy by indent between them. Each node will + > (Left)LR. (Center)RL. (Right)H. #### indent @@ -170,7 +181,7 @@ Indented layout represents the hierarchy by indent between them. Each node will return 100; } ``` -**Required**: false
**Description**: The width of node +**Required**: false
**Description**: The width of each node #### getHeight **Type**: Number | Function
**Example**: @@ -181,7 +192,7 @@ Indented layout represents the hierarchy by indent between them. Each node will return 100; } ``` -**Required**: false
**Description**: The height of node +**Required**: false
**Description**: The height of each node #### getSide **Type**: Function
**Example**: @@ -222,7 +233,7 @@ Mindmap arranged the nodes with same depth on the same level. Different from com return 100; } ``` -**Required**: false
**Description**: The width of node +**Required**: false
**Description**: The width of each node #### getHeight **Type**: Number | Function
**Example**: @@ -233,7 +244,7 @@ Mindmap arranged the nodes with same depth on the same level. Different from com return 100; } ``` -**Required**: false
**Description**: The height of node +**Required**: false
**Description**: The height of each node #### getHGap @@ -269,4 +280,4 @@ Mindmap arranged the nodes with same depth on the same level. Different from com return 'left'; } ``` -**Default**: 'right'
**Required**: false
**Description**: The callback function of node position(left or right of root node). Only affects the nodes which are connected to the root node directly. And the descendant nodes will be placed according to it. +**Default**: 'right'
**Required**: false
**Description**: The callback function of node position(left or right of root node). Only affects the nodes which are connected to the root node directly. And the descendant nodes will be placed according to it diff --git a/docs/api/layout/TreeGraph.zh.md b/docs/api/layout/TreeGraph.zh.md index 24466bcd02..22e0d1de4f 100644 --- a/docs/api/layout/TreeGraph.zh.md +++ b/docs/api/layout/TreeGraph.zh.md @@ -1,12 +1,12 @@ --- -title: TreeGraph +title: TreeGraph Layout order: 2 --- ## CompactBox 紧凑树布局 -紧凑盒树布局。这是树图的默认布局，其特点是布局时统合考虑每个树节点的包围盒，由经典的[Reingold–Tilford tidy布局算法](http://emr.cs.iit.edu/~reingold/tidier-drawings.pdf)演进而来，适合于脑图等应用场景。 +紧凑盒树布局。这是树图的默认布局，其特点是布局时统合考虑每个树节点的包围盒，由经典的 Reingold–Tilford tidy 布局算法演进而来，适合于脑图等应用场景。 - + ### 属性 @@ -38,6 +38,17 @@ order: 2 +#### getId +**类型**: Function
**示例**: +```javascript +(d) => { + // d is a node + return d.id + '_node'; +} +``` +**是否必须**: false
**说明**: 节点 id 的回调函数 + + #### getWidth **类型**：Number | Function
**示例**： ```javascript @@ -93,14 +104,14 @@ order: 2 ## Dendrogram 生态树布局 -[生态树](https://en.wikipedia.org/wiki/Dendrogram)布局。特点是所有子节点布局在同一层级，适用于表示层次聚类。 +生态树布局的特点是所有子节点布局在同一层级，不考虑节点大小，每个节点被当成 1px 处理。适用于表示层次聚类。 ### 属性 #### direction -**类型**：String
**可选值**：'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'
**默认值**：'LR'
**是否必须**：false
**说明**：树布局的方向，默认为，其他选项说明 +**类型**：String
**可选值**：'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'
**默认值**：'LR'
**是否必须**：false
**说明**：树布局的方向，默认为 `'LR'`，其他选项说明 - TB —— 根节点在上，往下布局 @@ -150,7 +161,7 @@ order: 2 ### 属性 #### direction -**类型**：String
**可选值**：'LR' | 'RL' | 'H'
**默认值**：'LR'
**是否必须**：false
**说明**：树布局的方向，默认为，其他选项说明 +**类型**：String
**可选值**：'LR' | 'RL' | 'H'
**默认值**：'LR'
**是否必须**：false
**说明**：树布局的方向，默认为 `'LR'`，其他选项说明： - LR —— 根节点在左，往右布局（下图左）
- RL —— 根节点在右，往左布局（下图中）
@@ -207,7 +218,7 @@ order: 2 ### 属性 #### direction -**类型**：String
**可选值**：'H' | 'V'
**默认值**：'H'
**是否必须**：false
**说明**：树布局的方向，默认为，其他选项说明 +**类型**：String
**可选值**：'H' | 'V'
**默认值**：'H'
**是否必须**：false
**说明**：树布局的方向，默认为 `'H'`，其他选项说明 - H：horizontal（水平）—— 根节点的子节点分成两部分横向放置在根节点左右两侧 diff --git a/docs/api/nodeEdge/Edge.en.md b/docs/api/nodeEdge/Edge.en.md index ae7fddd0fa..097ea4549d 100644 --- a/docs/api/nodeEdge/Edge.en.md +++ b/docs/api/nodeEdge/Edge.en.md @@ -69,11 +69,7 @@ Get the current source item (node) of the edge. **Return** - The type of return value: Node; -<<<<<<< HEAD - Returns the item of source node. -======= -- Return the item of source node. ->>>>>>> feat: english version of API **Usage** @@ -96,11 +92,7 @@ Get the current target item (node) of the edge. **Return** - The type of return value: Node; -<<<<<<< HEAD - Returns the item of target node. -======= -- Return the item of target node. ->>>>>>> feat: english version of API **Usage** diff --git a/docs/api/nodeEdge/Edge.zh.md b/docs/api/nodeEdge/Edge.zh.md index 63d0ef3d1d..36f787b5d0 100644 --- a/docs/api/nodeEdge/Edge.zh.md +++ b/docs/api/nodeEdge/Edge.zh.md @@ -3,7 +3,7 @@ title: Edge order: 1 --- -Edge 继承自 Item，所以，Item 的方法在 Edge 实例中都可以使用。 +Edge 继承自 Item。所以 Item 的方法在 Edge 实例中都可以使用。 ## setSource(source) diff --git a/docs/api/nodeEdge/Item.en.md b/docs/api/nodeEdge/Item.en.md index 9cc6f89423..53dd4f39db 100644 --- a/docs/api/nodeEdge/Item.en.md +++ b/docs/api/nodeEdge/Item.en.md @@ -3,7 +3,7 @@ title: Item order: 0 --- -Item is the object of node / edge G6. +Item is the object of node / edge in G6. ## Update @@ -67,7 +67,7 @@ Update the position of the item. We recommend to call this function for single i | Name | Type | Required | Description | | --- | --- | --- | --- | -| cfg | Object | true | The configurations of the item, including x and y. The x and y value in source data model will take effect if there are no x and y in `cfg`. | +| cfg | Object | true | The configurations of the item, including `x` and `y`. The x and y value in source data model will take effect if there are no `x` and `y` in `cfg`. | @@ -210,7 +210,7 @@ const type = item.get('type') ### enableCapture(enable) -Whether enable the item to be picked and enable its interaction events. +Whether to enable the item to be picked and enable its interaction events. **Parameters** diff --git a/docs/api/nodeEdge/Item.zh.md b/docs/api/nodeEdge/Item.zh.md index 6e111cd22d..90c58eef19 100644 --- a/docs/api/nodeEdge/Item.zh.md +++ b/docs/api/nodeEdge/Item.zh.md @@ -23,10 +23,10 @@ Item 是 G6 中绘图元素实例，目前包含节点和边的实例。对于 | 名称 | 类型 | 是否必选 | 描述 | | --- | --- | --- | --- | -| id | String | true | 元素ID，必须唯一 | +| id | String | true | 元素 ID，必须唯一 | | style | Object | false | 元素样式 | | shape | String | false | 元素的形状，不传则使用默认值 | -| label | String | false | 元素label，有该字段时默认会渲染 label | +| label | String | false | 元素 label，有该字段时默认会渲染 label | **用法** @@ -67,7 +67,7 @@ item.refresh() | 名称 | 类型 | 是否必选 | 描述 | | --- | --- | --- | --- | -| cfg | Object | true | 元素配置项，包括 x、y 属性，如果参数中无 x、y 属性，则更新时使用数据项中的值。 | +| cfg | Object | true | 元素配置项，包括 `x`、`y` 属性，如果参数中无 `x`、`y` 属性，则更新时使用数据项中的值。 | @@ -92,7 +92,7 @@ item.updatePosition(cfg1) ## 销毁 ### destroy() -销毁元素，主要包括停止动画、删除 group 中的所有元素、清空配置项、设置 destroyed 为 true 等操作。 +销毁元素，主要包括停止动画、删除 group 中的所有元素、清空配置项、设置 `destroyed` 为 `true` 等操作。 **用法** @@ -115,8 +115,8 @@ item.destroy() | 名称 | 类型 | 描述 | | --- | --- | --- | -| x | number | 视口x坐标 | -| y | number | 视口y坐标 | +| x | number | 视口 x 坐标 | +| y | number | 视口 y 坐标 | | width | number | bbox 宽度 | | height | number | bbox 高度 | | centerX | number | 中心点 x 坐标 | @@ -439,7 +439,7 @@ const style = item.getStateStyle('selected') **返回值** -- 返回值类型：object | undefined； +- 返回值类型：Object | undefined； - 如果存在 keyShape ，则返回 `keyShape` 的样式，否则返回 `undefined` 。 diff --git a/docs/api/nodeEdge/Node.en.md b/docs/api/nodeEdge/Node.en.md index 42b64eae29..d91e252048 100644 --- a/docs/api/nodeEdge/Node.en.md +++ b/docs/api/nodeEdge/Node.en.md @@ -7,23 +7,21 @@ Node inherits from item. The functions of Item are also available for Node. ## lock() -> New feature of v3.1.4. Lock the current node. The locked node will not response the drag event any more. -Tips: the locked node still can be moved while dragging and zooming the canvas. If you want to fix the node in these two situations, please refer to (Fix the node while dragging the canvas)[/zh/docs/manual/advanced/lock-node#拖动画布时候不处理锁定的节点] and (Fix the node while zooming the canvas)[/zh/docs/manual/advanced/lock-node#拖动画布时候不处理锁定的节点] . +Tips: the locked node still can be moved while dragging and zooming the canvas. If you want to fix the node in these two situations, please refer to [Fix the Locked Node While Dragging](/en/docs/manual/advanced/lock-node#fix-the-locked-node-while-dragging) and [Fix the Locked Node while Zooming](/en/docs/manual/advanced/lock-node#fix-the-locked-node-while-zooming) to register a custom Behavior. **Usage** ```javascript -const node = graph.findById('node') -node.lock() +const node = graph.findById('node'); +node.lock(); ``` ## unlock() -> New feature of V3.1.4. Unlock the locked node. @@ -31,13 +29,12 @@ Unlock the locked node. **Usage** ```javascript -const node = graph.findById('node') -node.unlock() +const node = graph.findById('node'); +node.unlock(); ``` ## hasLocked() -> New feature of V3.1.4. Query the lock state of the node. @@ -51,8 +48,8 @@ Query the lock state of the node. **Usage** ```javascript -const node = graph.findById('node') -const hasLocked = node.hasLocked() +const node = graph.findById('node'); +const hasLocked = node.hasLocked(); ``` @@ -69,7 +66,7 @@ Get the related edges (the node is the source or the target of the edge) of the **Usage** ```javascript // Get the related edges -const edges = node.getEdges() +const edges = node.getEdges(); ``` @@ -86,7 +83,7 @@ Get the related in-edges, whose target is the node. **Usage** ```javascript // Get the related in-edges -const edges = node.getInEdges() +const edges = node.getInEdges(); ``` @@ -103,7 +100,7 @@ Get the related out-edges, whose source is the node. **Usage** ```javascript // Get the related out-edges -const edges = node.getOutEdges() +const edges = node.getOutEdges(); ``` @@ -134,7 +131,7 @@ Get all the anchor points of the node. **Usage** ```javascript // Get the anchor points of the node -const anchor = node.getAnchorPoints() +const anchor = node.getAnchorPoints(); ``` @@ -152,7 +149,7 @@ Get the nearest anchor point of the node to `point`. **Return** -- The type of return value: object； +- The type of return value: Object； - Returns (x, y) of the found anchor point. If there is no anchor point found, returns the center of the node. @@ -161,9 +158,9 @@ Get the nearest anchor point of the node to `point`. const point = { x: 100, y: 105 -} +}; // Get the anchor point which is nearest to the point -const linkPoint = node.getLinkPoint(point) +const linkPoint = node.getLinkPoint(point); ``` @@ -189,7 +186,7 @@ Get the (x, y) of the anchor point with the `index`. **Usage** ```javascript // Get the first anchor point of the node -const anchor = node.getLinkPointByAnchor(0) +const anchor = node.getLinkPointByAnchor(0); ``` ## addEdge(edge) @@ -208,8 +205,8 @@ Add the `edge` to the node. ```javascript const edge = new Edge({ // TODO -}) -node.addEdge(edge) +}); +node.addEdge(edge); ``` @@ -227,6 +224,6 @@ Remove the `edge` from the node. **Usage** ```javascript -const edge = // TODO -node.removeEdge(edge) +const edge = graph.findById('edge1'); +node.removeEdge(edge); ``` diff --git a/docs/api/nodeEdge/Node.zh.md b/docs/api/nodeEdge/Node.zh.md index 99e56614c2..9eb5113109 100644 --- a/docs/api/nodeEdge/Node.zh.md +++ b/docs/api/nodeEdge/Node.zh.md @@ -3,7 +3,7 @@ title: Node order: 1 --- -Node继承自Item，所以，Item上面的方法在Node实例中都可以调用。 +Node 继承自 Item。所以 Item 上面的方法在 Node 实例中都可以调用。 ## lock() @@ -11,14 +11,14 @@ Node继承自Item，所以，Item上面的方法在Node实例中都可以调用 锁定当前节点，锁定节点后，该节点不再响应拖动节点的事件。 -提示：锁定节点后，拖动画布和缩放画布的操作依然对该节点有效。如果想在锁定节点后，不响应拖动画布和缩放的事件，需要自定义拖动画布和缩放的 Behavior，具体可参考 (锁定节点不响应拖动画布的事件)[/zh/docs/manual/advanced/lock-node#拖动画布时候不处理锁定的节点] 和 (锁定节点不响应缩放事件)[/zh/docs/manual/advanced/lock-node#拖动画布时候不处理锁定的节点] 。 +提示：锁定节点后，拖动画布和缩放画布的操作依然对该节点有效。如果想在锁定节点后，不响应拖动画布和缩放的事件，需要自定义拖动画布和缩放的 Behavior，具体可参考 [锁定节点不响应拖动画布的事件](/zh/docs/manual/advanced/lock-node#拖动画布时候不处理锁定的节点) 和 [锁定节点不响应缩放事件](/zh/docs/manual/advanced/lock-node#拖动画布时候不处理锁定的节点)。 **用法** ```javascript -const node = graph.findById('node') -node.lock() +const node = graph.findById('node'); +node.lock(); ``` @@ -31,8 +31,8 @@ node.lock() **用法** ```javascript -const node = graph.findById('node') -node.unlock() +const node = graph.findById('node'); +node.unlock(); ``` @@ -44,15 +44,15 @@ node.unlock() **返回值** -- 返回值类型：boolean； +- 返回值类型：Boolean； - 返回 true 表示当前解锁处于锁定状态，否则表示未锁定。 **用法** ```javascript -const node = graph.findById('node') -const hasLocked = node.hasLocked() +const node = graph.findById('node'); +const hasLocked = node.hasLocked(); ``` @@ -69,7 +69,7 @@ const hasLocked = node.hasLocked() **用法** ```javascript // 获取与 node 关联的所有边 -const edges = node.getEdges() +const edges = node.getEdges(); ``` @@ -86,7 +86,7 @@ const edges = node.getEdges() **用法** ```javascript // 获取与 node 关联的所有入边 -const edges = node.getInEdges() +const edges = node.getInEdges(); ``` @@ -103,7 +103,7 @@ const edges = node.getInEdges() **用法** ```javascript // 获取与 node 关联的所有出边 -const edges = node.getOutEdges() +const edges = node.getOutEdges(); ``` @@ -134,7 +134,7 @@ const edges = node.getOutEdges() **用法** ```javascript // 获取定义在节点上的锚点数据 -const anchor = node.getAnchorPoints() +const anchor = node.getAnchorPoints(); ``` @@ -161,15 +161,15 @@ const anchor = node.getAnchorPoints() const point = { x: 100, y: 105 -} +}; // 获取连接点 -const linkPoint = node.getLinkPoint(point) +const linkPoint = node.getLinkPoint(point); ``` ## getLinkPointByAnchor(index) -根据锚点索引获取连接点的x、y坐标。 +根据锚点索引获取连接点的 x、y 坐标。 **参数** @@ -189,7 +189,7 @@ const linkPoint = node.getLinkPoint(point) **用法** ```javascript // 获取定义在节点上的第一个锚点 -const anchor = node.getLinkPointByAnchor(0) +const anchor = node.getLinkPointByAnchor(0); ``` ## addEdge(edge) @@ -208,8 +208,8 @@ const anchor = node.getLinkPointByAnchor(0) ```javascript const edge = new Edge({ // TODO -}) -node.addEdge(edge) +}); +node.addEdge(edge); ``` @@ -227,6 +227,6 @@ node.addEdge(edge) **用法** ```javascript -const edge = // TODO -node.removeEdge(edge) +const edge = graph.findById('edge1'); +node.removeEdge(edge); ``` diff --git a/docs/api/properties/EdgeProperties.en.md b/docs/api/properties/EdgeProperties.en.md deleted file mode 100644 index 7ef3bb1f5d..0000000000 --- a/docs/api/properties/EdgeProperties.en.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Properties of Edge -order: 1 ---- - -## Common Property - -| Name | Description | Remark | -| --- | --- | --- | -| fill | The color or gradient color for filling. | The corresponding property in canvas is `fillStyle`. | -| stroke | The color, gradient color, or pattern for stroke. | The corresponding property in canvas is `strokeStyle`. | -| shadowColor | The color for shadow. | | -| shadowBlur | The blur level for shadow. | Larger the value, more blur. | -| shadowOffsetX | The horizontal offset of the shadow. | | -| shadowOffsetY | The vertical offset of the shadow. | | -| opacity | The opacity (alpha value) of the shape. | The corresponding property in canvas is `globalAlpha`. | - - - -## Path -⚠️**Attention:** when the edge is too thin to be hitted by mouse, set **lineAppendWidth** to enlarge the hitting area. - -**Property** - -| Name | Description | Remark | -| --- | --- | --- | -| path | The path. | It can be a String, or an Array of path. | -| startArrow | The arrow on the start of the path. | When `startArrow` is `true`, show a default arrow on the start of the path. User can custom an arrow by path. | -| endArrow | The arrow on the end of the path. | When `startArrow` is `true`, show a default arrow on the end of the path. User can custom an arrow by path. | -| lineAppendWidth | The hitting area of the path. | Enlarge the hitting area by enlarging its value. | -| lineCap | The style of two ends of the path. | | -| lineJoin | The style of the intersection of two path. | | -| lineWidth | The line width of the current path. | | -| miterLimit | The maximum miter length. | | -| lineDash | The style of the dash line. | It is an array that describes the length of gaps and line segments. If the number of the elements in the array is odd, the elements will be dulplicated. Such as [5, 15, 25] will be regarded as [5, 15, 25, 5, 15, 25]. | - - -**Usage** -```javascript -group.addShape('path', { - attrs: { - startArrow: { - // The custom arrow is a path centered at (0, 0), and points to the positive direction of x-axis - path: 'M 10,0 L -10,-10 L -10,10 Z', - d: 10 - }, - endArrow: { - // The custom arrow is a path centered at (0, 0), and points to the positive direction of x-axis - path: 'M 10,0 L -10,-10 L -10,10 Z', - d: 10 - }, - path: [ - [ 'M', 100, 100 ], - [ 'L', 200, 200 ] - ], - stroke: '#000', - lineWidth: 8, - lineAppendWidth: 5 - } -}); -``` diff --git a/docs/api/properties/EdgeProperties.zh.md b/docs/api/properties/EdgeProperties.zh.md deleted file mode 100644 index d1abfe3a64..0000000000 --- a/docs/api/properties/EdgeProperties.zh.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: 边属性 -order: 1 ---- - -## 通用属性 - -| 属性名 | 含义 | 备注 | -| --- | --- | --- | -| fill | 设置用于填充绘画的颜色、渐变或模式 | 对应 canvas 属性 `fillStyle` | -| stroke | 设置用于笔触的颜色、渐变或模式 | 对应 canvas 属性 `strokeStyle` | -| shadowColor | 设置用于阴影的颜色 | | -| shadowBlur | 设置用于阴影的模糊级别 | 数值越大，越模糊 | -| shadowOffsetX | 设置阴影距形状的水平距离 | | -| shadowOffsetY | 设置阴影距形状的垂直距离 | | -| opacity | 设置绘图的当前 alpha 或透明值 | 对应 canvas 属性 `globalAlpha` | - - - -## 线条 Path -特别注意：当边太细时候点击不中时，请设置 **lineAppendWidth** 属性值。 - -**属性** - -| 属性名 | 含义 | 备注 | -| --- | --- | --- | -| path | 线条路径 | 可以是 String 形式，也可以是线段的数组。 | -| startArrow | 起始端的箭头 | 为 `true` 时为默认的箭头效果，也可以是一个自定义箭头 | -| endArrow | 末尾端的箭头 | 为 `true` 时为默认的箭头效果，也可以是一个自定义箭头 | -| lineAppendWidth | 边的击中范围 | 提升边的击中范围，扩展响应范围，数值越大，响应范围越广 | -| lineCap | 设置线条的结束端点样式 | | -| lineJoin | 设置两条线相交时，所创建的拐角形状 | | -| lineWidth | 设置当前的线条宽度 | | -| miterLimit | 设置最大斜接长度 | | -| lineDash | 设置线的虚线样式，可以指定一个数组 | 一组描述交替绘制线段和间距（坐标空间单位）长度的数字。 如果数组元素的数量是奇数， 数组的元素会被复制并重复。例如， [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。 | - - -**用法** -```javascript -group.addShape('path', { - attrs: { - startArrow: { - path: 'M 10,0 L -10,-10 L -10,10 Z', // 自定义箭头为中心点在(0, 0)，指向 x 轴正方向的 path - d: 10 - }, - endArrow: { - path: 'M 10,0 L -10,-10 L -10,10 Z', // 自定义箭头为中心点在(0, 0)，指向 x 轴正方向的 path - d: 10 - }, - path: [ - [ 'M', 100, 100 ], - [ 'L', 200, 200 ] - ], - stroke: '#000', - lineWidth: 8, - lineAppendWidth: 5 - } -}); -``` diff --git a/docs/api/properties/NodeProperties.en.md b/docs/api/properties/NodeProperties.en.md deleted file mode 100644 index 4d9bfd231a..0000000000 --- a/docs/api/properties/NodeProperties.en.md +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: Properties of Node -order: 0 ---- - -### Common Property - -**Property** - -| Name | Description | Remark | -| --- | --- | --- | -| fill | The color or gradient color for filling. | The corresponding property in canvas is `fillStyle`. | -| stroke | The color, gradient color, or pattern for stroke. | The corresponding property in canvas is `strokeStyle`. | -| shadowColor | The color for shadow. | | -| shadowBlur | The blur level for shadow. | Larger the value, more blur. | -| shadowOffsetX | The horizontal offset of the shadow. | | -| shadowOffsetY | The vertical offset of the shadow. | | -| opacity | The opacity (alpha value) of the shape. | The corresponding property in canvas is `globalAlpha`. | - -**Usage** -```javascript -group.addShape('rect', { - attrs: { - fill: 'red', - shadowOffsetX: 10, - shadowOffsetY: 10, - shadowColor: 'blue', - shadowBlur: 10, - opacity: 0.8 - } -}) -``` - -### Circle - -**Property** - -| Name | Description | Remark | -| --- | --- | --- | -| x | The x of the center of the circle. | | -| y | The y of the center of the circle. | | -| r | The radius of the circle. | | - - -**Usage** -```javascript -group.addShape('circle', { - attrs: { - x: 100, - y: 100, - r: 50, - fill: 'blue' - } -}) -``` - -### Ellipse - -**Property** - -| Name | Description | Remark | -| --- | --- | --- | -| x | The x of the center of the ellipse. | | -| y | The y of the center of the ellipse. | | -| rx | The horizontal raidus of the ellipse. | | -| ry | The vertical raidus of the ellipse. | | - - - -**Usage** -```javascript -group.addShape('ellipse', { - attrs: { - x: 100, - y: 100, - rx: 50, - ry: 50, - fill: 'blue' - } -}) -``` - - -### Fan - -**Property** - -| Name | Description | Remark | -| --- | --- | --- | -| x | The x of the center of the fan. | | -| y | The y of the center of the fan. | | -| rs | The horizontal raidus of the fan. | | -| re | The vertical raidus of the fan. | | -| startAngle | The start angle. | Radian system represented by Math.PI. | -| endAngle | The end angle. | | -| clockwise | It will be rendered clockwisely if it is `true`, counterclockwisely if it is `false`. | | - - - -**Usage** -```javascript -group.addShape('fan', { - attrs: { - x: 50, - y: 50, - re: 40, - rs: 30, - startAngle: 1/2 * Math.PI, - endAngle: Math.PI, - clockwise: false, - fill: '#b7eb8f' - } -}) -``` - - -### Image - -**Property** - -| Name | Description | Remark | -| --- | --- | --- | -| x | The x of the left top of the image. | | -| y | The y of the left top of the image. | | -| width | The width of the image. | | -| height | The height of the image. | | -| img | The source of the image. | G6 supports multiple image formats:
- url
- ImageData
- Image
- canvas
| - - - -**Usage** -```javascript -group.addShape('image', { - attrs: { - x: 0, - y: 0, - img:'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png' - } -}) -``` - - -### Marker - -**Property** - -| Name | Description | Remark | -| --- | --- | --- | -| x | The x of the center of the marker. | | -| y | The y of the center of the marker. | | -| r | The radius of the marker. | | -| symbol | The shape name. | There are several built-in shapes: `circle`, `square`, `diamond`, `triangle`, `triangle-down`. And user could custom a shape as marker. | - - - -**Usage** -```javascript -group.addShape('marker', { - attrs: { - x: 10, - y: 10, - r: 10, - symbol: function(x, y, r) { - return [ - [ 'M', x, y ], - [ 'L', x + r, y + r ], - [ 'L'，x + r * 2, y ], - [ 'Z' ] - ] - } - } -}); -``` - - -### Polygon - -**Property** - -| Name | Description | Remark | -| --- | --- | --- | -| points | The coordinates of the points on the polygon. | It is an array. | - - - -**Usage** -```javascript -group.addShape('polygon', { - attrs: { - points:[[ 30, 30 ], [ 40, 20 ], [ 30, 50 ], [ 60, 100 ]], - fill: 'red' - } -}); -``` - - -### Rect - -**Property** - -| Name | Description | Remark | -| --- | --- | --- | -| x | The x of left top of the rect. | | -| y | The y of left top of the rect. | | -| width | The width of the rect. | | -| height | The height of the rect. | | -| radius | The border radius. | It can be an integer or an array, representing the border radii of lefttop, righttop, rightbottom, leftbotton respectively.
- `radius = 1` or `radius = [ 1 ]` is equal to `radius = [ 1, 1, 1, 1 ]`
- `radius = [ 1, 2 ]` is equal to `radius = [ 1, 2, 1, 2 ]`
- `radius: [ 1, 2, 3 ]` is equal to `radius: [ 1, 2, 3, 2 ]`
| - - - -**Usage** -```javascript -group.addShape('rect', { - attrs: { - x: 150, - y: 150, - width: 150, - height: 150, - stroke: 'black', - radius: [2, 4] - } -}); -``` diff --git a/docs/api/properties/NodeProperties.zh.md b/docs/api/properties/NodeProperties.zh.md deleted file mode 100644 index 5cd4e64580..0000000000 --- a/docs/api/properties/NodeProperties.zh.md +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: 节点属性 -order: 0 ---- - -### 通用属性 - -**属性** - -| 属性名 | 含义 | 备注 | -| --- | --- | --- | -| fill | 设置用于填充绘画的颜色、渐变或模式 | 对应 canvas 属性`fillStyle` | -| stroke | 设置用于笔触的颜色、渐变或模式 | 对应 canvas 属性`strokeStyle` | -| shadowColor | 设置用于阴影的颜色 | | -| shadowBlur | 设置用于阴影的模糊级别 | 数值越大，越模糊 | -| shadowOffsetX | 设置阴影距形状的水平距离 | | -| shadowOffsetY | 设置阴影距形状的垂直距离 | | -| opacity | 设置绘图的当前 alpha 或透明值 | 对应canvas属性`globalAlpha` | - -**用法** -```javascript -group.addShape('rect', { - attrs: { - fill: 'red', - shadowOffsetX: 10, - shadowOffsetY: 10, - shadowColor: 'blue', - shadowBlur: 10, - opacity: 0.8 - } -}) -``` - -### 圆图形 Circle - -**属性** - -| 属性名 | 含义 | 备注 | -| --- | --- | --- | -| x | 圆心的 x 坐标 | | -| y | 圆心的 y 坐标 | | -| r | 圆的半径 | | - - -**用法** -```javascript -group.addShape('circle', { - attrs: { - x: 100, - y: 100, - r: 50, - fill: 'blue' - } -}) -``` - -### 椭圆图形 Ellipse - -**属性** - -| 属性名 | 含义 | 备注 | -| --- | --- | --- | -| x | 圆心的 x 坐标 | | -| y | 圆心的 y 坐标 | | -| rx | 水平半径 | | -| ry | 垂直半径 | | - - - -**用法** -```javascript -group.addShape('ellipse', { - attrs: { - x: 100, - y: 100, - rx: 50, - ry: 50, - fill: 'blue' - } -}) -``` - - -### 扇形图形 Fan - -**属性** - -| 属性名 | 含义 | 备注 | -| --- | --- | --- | -| x | 扇形圆心的 x 坐标 | | -| y | 扇形圆心的 y 坐标 | | -| rs | 水平半径 | | -| re | 垂直半径 | | -| startAngle | 起点弧度 | 弧度制，即使用 Math.PI 表示 | -| endAngle | 终点弧度 | | -| clockwise | 为 `true` 时顺时针渲染，为 `false` 时逆时针渲染 | | - - - -**用法** -```javascript -group.addShape('fan', { - attrs: { - x: 50, - y: 50, - re: 40, - rs: 30, - startAngle: 1/2 * Math.PI, - endAngle: Math.PI, - clockwise: false, - fill: '#b7eb8f' - } -}) -``` - - -### 图片图形 Image - -**属性** - -| 属性名 | 含义 | 备注 | -| --- | --- | --- | -| x | 图片左上角的 x 坐标 | | -| y | 图片左上角的 y 坐标 | | -| width | 图片宽度 | | -| height | 图片高度 | | -| img | 图片源 | G6 支持多种格式的图片：
- url
- ImageData
- Image
- canvas
| - - - -**用法** -```javascript -group.addShape('image', { - attrs: { - x: 0, - y: 0, - img:'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png' - } -}) -``` - - -### 标记图形 Marker - -**属性** - -| 属性名 | 含义 | 备注 | -| --- | --- | --- | -| x | 中心的 x 坐标 | | -| y | 中心的 y 坐标 | | -| r | 形状半径 | | -| symbol | 指定形状 | 内置了一些常用形状，如圆形 `circle`，矩形 `square`，菱形 `diamond`，三角形 `triangle`，倒三角形 `triangle-down`，也可以是自定义的 path 路径。 | - - - -**用法** -```javascript -group.addShape('marker', { - attrs: { - x: 10, - y: 10, - r: 10, - symbol: function(x, y, r) { - return [ - [ 'M', x, y ], - [ 'L', x + r, y + r ], - [ 'L'，x + r * 2, y ], - [ 'Z' ] - ] - } - } -}); -``` - - -### 多边形图形 Polygon - -**属性** - -| 属性名 | 含义 | 备注 | -| --- | --- | --- | -| points | 多边形的所有端点坐标 | 数组形式 | - - - -**用法** -```javascript -group.addShape('polygon', { - attrs: { - points:[[ 30, 30 ], [ 40, 20 ], [ 30, 50 ], [ 60, 100 ]], - fill: 'red' - } -}); -``` - - -### 矩形图形 Rect - -**属性** - -| 属性名 | 含义 | 备注 | -| --- | --- | --- | -| x | 矩形左上角的 x 坐标 | | -| y | 矩形左上角的 y 坐标 | | -| width | 矩形的宽度 | | -| height | 矩形的高度 | | -| radius | 定义圆角 | 支持整数或数组形式，分别对应左上、右上、右下、左下角的半径：
- radius 缩写为 1 或 [ 1 ] 相当于 [ 1, 1, 1, 1 ]
- radius 缩写为 [ 1, 2 ] 相当于 [ 1, 2, 1, 2 ]
- radius 缩写为 [ 1, 2, 3 ] 相当于 [ 1, 2, 3, 2 ]
| - - - -**用法** -```javascript -group.addShape('rect', { - attrs: { - x: 150, - y: 150, - width: 150, - height: 150, - stroke: 'black', - radius: [2, 4] - } -}); -``` diff --git a/docs/api/properties/TextProperties.en.md b/docs/api/properties/TextProperties.en.md deleted file mode 100644 index d5e5170e1a..0000000000 --- a/docs/api/properties/TextProperties.en.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Properties of Text -order: 2 ---- - -### Properties - -| Name | Description | Remark | -| --- | --- | --- | -| fill | The color or gradient color for filling. | The corresponding property in canvas is `fillStyle`. | -| stroke | The color, gradient color, or pattern for stroke. | The corresponding property in canvas is `strokeStyle`. | -| shadowColor | The color for shadow. | | -| shadowBlur | The blur level for shadow. | Larger the value, more blur. | -| shadowOffsetX | The horizontal offset of the shadow. | | -| shadowOffsetY | The vertical offset of the shadow. | | -| opacity | The opacity (alpha value) of the shape. | The corresponding property in canvas is `globalAlpha`. | -| font | The font of the text. | | -| textAlign | The align way of the text. | Options: `'center'` / `'end'` / `'left'` / `'right'` / `'start'`. `'start'` by default. | -| textBaseline | The base line of the text. | Options:
`'top'` / `'middle'` / `'bottom'` / `'alphabetic'` / `'hanging'`. `'bottom'` by default. | -| fontStyle | The font style of the text. | The corresponding property in css is `font-style` | -| fontVariant | The font variant of the text. | The corresponding property in css is `font-variant` | -| fontWeight | The font weight of the text. | The corresponding property in css is `font-weight` | -| fontSize | The font size of the text. | The corresponding property in css is `font-size` | -| fontFamily | The font family of the text. | The corresponding property in css is `font-family` | -| autoRotate | Wheter rotate the text according to the edge automatically if it is a label of an edge. | | - - -### Case -```javascript -const data = { - nodes: [ - { - id: 'node1', - x: 100, - y: 100, - shape: 'rect', - label: 'rect' - } - ] -} - -const graph = new G6.Graph({ - container: 'mountNode', - width: 500, - height: 500 -}); -graph.data(data); -graph.render(); - -const node = graph.findById('node1') -graph.update(node, { - style: { - stroke: 'blue' - }, - labelCfg: { - style: { - fill: 'red', - shadowOffsetX: 10, - shadowOffsetY: 10, - shadowColor: 'blue', - shadowBlur: 10 - } - } -}) -``` - -Modify the style of text of node as the code above, and we get the result: - - - diff --git a/docs/api/properties/TextProperties.zh.md b/docs/api/properties/TextProperties.zh.md deleted file mode 100644 index b92c540cb5..0000000000 --- a/docs/api/properties/TextProperties.zh.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Attributes of Text -order: 2 ---- - -### Attributes -文本有以下可用的属性。 - -| Name | Description | Remark | -| --- | --- | --- | -<<<<<<< HEAD -| fill | 设置用于填充绘画的颜色、渐变或模式 | 对应 canvas 属性 `fillStyle` | -| stroke | 设置用于笔触的颜色、渐变或模式 | 对应 canvas 属性 `strokeStyle` | -| shadowColor | 设置用于阴影的颜色 | | -| shadowBlur | 设置用于阴影的模糊级别 | 数值越大，越模糊 | -| shadowOffsetX | 设置阴影距形状的水平距离 | | -| shadowOffsetY | 设置阴影距形状的垂直距离 | | -| opacity | 设置绘图的当前 alpha 或透明值 | 对应 canvas 属性 `globalAlpha` | -| font | 设置文本内容的当前字体属性 | | -| textAlign | 设置文本内容的当前对齐方式 | 支持的属性：`'center'` / `'end'` / `'left'` / `'right'` / `'start'`，默认值为 `'start'` | -| textBaseline | 设置在绘制文本时使用的当前文本基线 | 支持的属性:
`'top'` / `'middle'` / `'bottom'` / `'alphabetic'` / `'hanging'`。默认值为`'bottom'` | -| fontStyle | 字体样式 | 对应 `font-style` | -| fontVariant | 设置为小型大写字母字体 | 对应 `font-variant` | -| fontWeight | 字体粗细 | 对应 `font-weight` | -| fontSize | 字体大小 | 对应 `font-size` | -| fontFamily | 字体系列 | 对应 `font-family` | -| autoRotate | 是否自动旋转 | | -======= -| fill | The color or gradient color for filling. | The corresponding attribute in canvas is `fillStyle`. | -| stroke | The color, gradient color, or pattern for stroke. | The corresponding attribute in canvas is `strokeStyle`. | -| shadowColor | The color for shadow. | | -| shadowBlur | The blur level for shadow. | Larger the value, more blur. | -| shadowOffsetX | The horizontal offset of the shadow. | | -| shadowOffsetY | The vertical offset of the shadow. | | -| opacity | The opacity (alpha value) of the shape. | The corresponding attribute in canvas is `globalAlpha`. | -| font | The font of the text. | | -| textAlign | The align way of the text. | Options: `'center'` / `'end'` / `'left'` / `'right'` / `'start'`. `'start'` by default. | -| textBaseline | The base line of the text. | Options:
`'top'` / `'middle'` / `'bottom'` / `'alphabetic'` / `'hanging'`. `'bottom'` by default. | -| fontStyle | The font style of the text. | The corresponding attribute in css is `font-style` | -| fontVariant | The font variant of the text. | The corresponding attribute in css is `font-variant` | -| fontWeight | The font weight of the text. | The corresponding attribute in css is `font-weight` | -| fontSize | The font size of the text. | The corresponding attribute in css is `font-size` | -| fontFamily | The font family of the text. | The corresponding attribute in css is `font-family` | -| autoRotate | Wheter rotate according to the edge automatically. | | ->>>>>>> feat: english version of API - - -### Case -```javascript -const data = { - nodes: [ - { - id: 'node1', - x: 100, - y: 100, - shape: 'rect', - label: 'rect' - } - ] -} - -const graph = new G6.Graph({ - container: 'mountNode', - width: 500, - height: 500 -}); -graph.data(data); -graph.render(); - -const node = graph.findById('node1') -graph.update(node, { - style: { - stroke: 'blue' - }, - labelCfg: { - style: { - fill: 'red', - shadowOffsetX: 10, - shadowOffsetY: 10, - shadowColor: 'blue', - shadowBlur: 10 - } - } -}) -``` - -<<<<<<< HEAD -通过以上代码修改 node 中文本的样式，效果如下图： -======= -Modify the style of text of node as the code above, and we get the result: ->>>>>>> feat: english version of API - - - diff --git a/docs/api/shapeProperties.en.md b/docs/api/shapeProperties.en.md new file mode 100644 index 0000000000..795d3cc611 --- /dev/null +++ b/docs/api/shapeProperties.en.md @@ -0,0 +1,317 @@ +--- +title: Shape Properties +order: 4 +--- + +Shape is the basic element on an item (node/edge). The `style` of a node or an edge corresponds to the shape properties of its keyShap (key shape). The `style` in `labelCfg` of a label on a node or an edge corresponds to the properties of text shape. + +G6 has these shapes: +- [circle](#circle); +- [rect](#rect); +- [ellipse](#ellipse); +- [polygon](#polygon); +- [fan](#fan); +- [image](#image); +- [marker](#marker); +- [path](#path); +- [text](#text). + +### Common Property + +| Name | Description | Remark | +| --- | --- | --- | +| fill | The color or gradient color for filling. | The corresponding property in canvas is `fillStyle`. | +| stroke | The color, gradient color, or pattern for stroke. | The corresponding property in canvas is `strokeStyle`. | +| shadowColor | The color for shadow. | | +| shadowBlur | The blur level for shadow. | Larger the value, more blur. | +| shadowOffsetX | The horizontal offset of the shadow. | | +| shadowOffsetY | The vertical offset of the shadow. | | +| opacity | The opacity (alpha value) of the shape. | The corresponding property in canvas is `globalAlpha`. | + +## Usage +```javascript +group.addShape('rect', { + attrs: { + fill: 'red', + shadowOffsetX: 10, + shadowOffsetY: 10, + shadowColor: 'blue', + shadowBlur: 10, + opacity: 0.8 + } +}) +``` + +### Circle + +### Special Property + +| Name | Description | +| --- | --- | +| x | The x of the center of the circle. | +| y | The y of the center of the circle. | +| r | The radius of the circle. | + + +### Usage +```javascript +group.addShape('circle', { + attrs: { + x: 100, + y: 100, + r: 50, + fill: 'blue' + } +}) +``` + +### Ellipse + +### Special Property + +| Name | Description | +| --- | --- | +| x | The x of the center of the ellipse. | +| y | The y of the center of the ellipse. | +| rx | The horizontal raidus of the ellipse. | +| ry | The vertical raidus of the ellipse. | + + + +### Usage +```javascript +group.addShape('ellipse', { + attrs: { + x: 100, + y: 100, + rx: 50, + ry: 50, + fill: 'blue' + } +}) +``` + + +### Fan + +### Special Property + +| Name | Description | Remark | +| --- | --- | --- | +| x | The x of the center of the fan. | | +| y | The y of the center of the fan. | | +| rs | The horizontal raidus of the fan. | | +| re | The vertical raidus of the fan. | | +| startAngle | The start angle. | Radian system represented by Math.PI. | +| endAngle | The end angle. | Radian system represented by Math.PI. | +| clockwise | It will be rendered clockwisely if it is `true`, counterclockwisely if it is `false`. | | + + + +### Usage +```javascript +group.addShape('fan', { + attrs: { + x: 50, + y: 50, + re: 40, + rs: 30, + startAngle: 1/2 * Math.PI, + endAngle: Math.PI, + clockwise: false, + fill: '#b7eb8f' + } +}) +``` + + +### Image + +### Special Property + +| Name | Description | Remark | +| --- | --- | --- | +| x | The x of the left top of the image. | | +| y | The y of the left top of the image. | | +| width | The width of the image. | | +| height | The height of the image. | | +| img | The source of the image. | G6 supports multiple image formats:
- url
- ImageData
- Image
- canvas
| + + + +### Usage +```javascript +group.addShape('image', { + attrs: { + x: 0, + y: 0, + img:'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png' + } +}) +``` + + +### Marker + +### Special Property + +| Name | Description | Remark | +| --- | --- | --- | +| x | The x of the center of the marker. | | +| y | The y of the center of the marker. | | +| r | The radius of the marker. | | +| symbol | The shape name. | There are several built-in shapes: `circle`, `square`, `diamond`, `triangle`, `triangle-down`. And user could customize a shape as marker. | + + + +### Usage +```javascript +group.addShape('marker', { + attrs: { + x: 10, + y: 10, + r: 10, + symbol: function(x, y, r) { + return [ + [ 'M', x, y ], + [ 'L', x + r, y + r ], + [ 'L'，x + r * 2, y ], + [ 'Z' ] + ] + } + } +}); +``` + + +### Polygon + +### Special Property + +| Name | Description | Remark | +| --- | --- | --- | +| points | The coordinates of the points on the polygon. | It is an array. | + + + +### Usage +```javascript +group.addShape('polygon', { + attrs: { + points:[[ 30, 30 ], [ 40, 20 ], [ 30, 50 ], [ 60, 100 ]], + fill: 'red' + } +}); +``` + + +### Rect + +### Special Property + +| Name | Description | Remark | +| --- | --- | --- | +| x | The x of left top of the rect. | | +| y | The y of left top of the rect. | | +| width | The width of the rect. | | +| height | The height of the rect. | | +| radius | The border radius. | It can be an integer or an array, representing the border radii of lefttop, righttop, rightbottom, leftbotton respectively.
- `radius = 1` or `radius = [ 1 ]` is equal to `radius = [ 1, 1, 1, 1 ]`
- `radius = [ 1, 2 ]` is equal to `radius = [ 1, 2, 1, 2 ]`
- `radius: [ 1, 2, 3 ]` is equal to `radius: [ 1, 2, 3, 2 ]`
| + + + +### Usage +```javascript +group.addShape('rect', { + attrs: { + x: 150, + y: 150, + width: 150, + height: 150, + stroke: 'black', + radius: [2, 4] + } +}); +``` + +## Path +⚠️Attention: When the edge is too thin to be hitted by mouse, set **lineAppendWidth** to enlarge the hitting area. + +### Special Property + +| Name | Description | Remark | +| --- | --- | --- | +| path | The path. | It can be a String, or an Array of path. | +| startArrow | The arrow on the start of the path. | When `startArrow` is `true`, show a default arrow on the start of the path. User can custom an arrow by path. | +| endArrow | The arrow on the end of the path. | When `startArrow` is `true`, show a default arrow on the end of the path. User can custom an arrow by path. | +| lineAppendWidth | The hitting area of the path. | Enlarge the hitting area by enlarging its value. | +| lineCap | The style of two ends of the path. | | +| lineJoin | The style of the intersection of two path. | | +| lineWidth | The line width of the current path. | | +| miterLimit | The maximum miter length. | | +| lineDash | The style of the dash line. | It is an array that describes the length of gaps and line segments. If the number of the elements in the array is odd, the elements will be dulplicated. Such as [5, 15, 25] will be regarded as [5, 15, 25, 5, 15, 25]. | + + +### Usage +```javascript +group.addShape('path', { + attrs: { + startArrow: { + // The custom arrow is a path centered at (0, 0), and points to the positive direction of x-axis + path: 'M 10,0 L -10,-10 L -10,10 Z', + d: 10 + }, + endArrow: { + // The custom arrow is a path centered at (0, 0), and points to the positive direction of x-axis + path: 'M 10,0 L -10,-10 L -10,10 Z', + d: 10 + }, + path: [ + [ 'M', 100, 100 ], + [ 'L', 200, 200 ] + ], + stroke: '#000', + lineWidth: 8, + lineAppendWidth: 5 + } +}); +``` + + +## Text +### Properties + +| Name | Description | Remark | +| --- | --- | --- | +| fill | The color or gradient color for filling. | The corresponding property in Canvas is `fillStyle`. | +| stroke | The color, gradient color, or pattern for stroke. | The corresponding property in Canvas is `strokeStyle`. | +| shadowColor | The color for shadow. | | +| shadowBlur | The blur level for shadow. | Larger the value, more blur. | +| shadowOffsetX | The horizontal offset of the shadow. | | +| shadowOffsetY | The vertical offset of the shadow. | | +| opacity | The opacity (alpha value) of the shape. | The corresponding property in Canvas is `globalAlpha`. | +| font | The font of the text. | | +| textAlign | The align way of the text. | Options: `'center'` / `'end'` / `'left'` / `'right'` / `'start'`. `'start'` by default. | +| textBaseline | The base line of the text. | Options:
`'top'` / `'middle'` / `'bottom'` / `'alphabetic'` / `'hanging'`. `'bottom'` by default. | +| fontStyle | The font style of the text. | The corresponding property in CSS is `font-style` | +| fontVariant | The font variant of the text. | The corresponding property in CSS is `font-variant` | +| fontWeight | The font weight of the text. | The corresponding property in CSS is `font-weight` | +| fontSize | The font size of the text. | The corresponding property in CSS is `font-size` | +| fontFamily | The font family of the text. | The corresponding property in CSS is `font-family` | +| autoRotate | Wheter rotate the text according to the edge automatically if it is a label of an edge. | | + + +### Usage + +```javascript +group.addShape('text', { + attrs: { + text: 'test text', + fill: 'red', + fontWeight: 400, + shadowOffsetX: 10, + shadowOffsetY: 10, + shadowColor: 'blue', + shadowBlur: 10 + } +}); +``` diff --git a/docs/manual/advanced/shape-and-properties.en.md b/docs/api/shapeProperties.zh.md similarity index 54% rename from docs/manual/advanced/shape-and-properties.en.md rename to docs/api/shapeProperties.zh.md index 377071376e..52fa83984d 100644 --- a/docs/manual/advanced/shape-and-properties.en.md +++ b/docs/api/shapeProperties.zh.md @@ -1,34 +1,37 @@ --- -title: 关键概念-图形 Shape 及其属性 -order: 0 +title: 各图形属性 +order: 4 --- -G6 中的元素（节点/边）是**由一个或多个小**[**图形 Shape**](https://www.yuque.com/antv/g6/shape-crycle)**组成**，主要通过自定义节点或自定义边时在 `draw` 方法中使用 `group.addShape` 添加，G6 中支持以下的图形 Shape： +图形是组成图上一个元素（节点/边）的基本单位。节点/边的 `style` 属性即对应了各自 keyShape（关键图形）的图形属性。节点或边上标签 `labelCfg` 中的 `style` 属性对应了 text 图形的图形属性。 -- circle：圆； -- rect：矩形； -- ellipse：椭圆； -- image：图片； -- text：文本的属性请参考[这里](https://www.yuque.com/antv/g6/gs4gno)； -- fan：扇形； -- marker：标记； -- polygon：多边形； -- path：路径。 +G6 支持以下图形： +- [circle](#圆图形-circle)：圆； +- [rect](#矩形图形-rect)：矩形； +- [ellipse](#椭圆图形-ellipse)：椭圆； +- [polygon](#多边形图形-polygon)：多边形； +- [fan](#扇形图形-fan)：扇形； +- [image](#图片图形-image)：图片； +- [marker](#标记图形-marker)：标记； +- [path](#路径-path)：路径； +- [text](#文本-text)：文本。 -## 各图形 Shape 的通用属性 +## 通用属性 | 属性名 | 含义 | 备注 | | --- | --- | --- | -| fill | 设置用于填充绘画的颜色、渐变或模式 | 对应 canvas 属性 `fillStyle` | -| stroke | 设置用于笔触的颜色、渐变或模式 | 对应 canvas 属性 `strokeStyle` | +| fill | 设置用于填充绘画的颜色、渐变或模式 | 对应 Canvas 属性 `fillStyle` | +| stroke | 设置用于笔触的颜色、渐变或模式 | 对应 Canvas 属性 `strokeStyle` | +| lineWidth | 描边宽度 | | | shadowColor | 设置用于阴影的颜色 | | | shadowBlur | 设置用于阴影的模糊级别 | 数值越大，越模糊 | | shadowOffsetX | 设置阴影距形状的水平距离 | | | shadowOffsetY | 设置阴影距形状的垂直距离 | | -| opacity | 设置绘图的当前 alpha 或透明值 | 对应 canvas 属性 `globalAlpha` | +| opacity | 设置绘图的当前 alpha 或透明值 | 对应 Canvas 属性 `globalAlpha` | +| fillOpacity | 设置填充的 alpha 或透明值 | | -### 用法 +## 用法 ```javascript group.addShape('rect', { attrs: { @@ -43,12 +46,14 @@ group.addShape('rect', { ``` ## 圆图形 Circle -### 属性 -| 属性名 | 含义 | 备注 | -| --- | --- | --- | -| x | 圆心的 x 坐标 | | -| y | 圆心的 y 坐标 | | -| r | 圆的半径 | | + +### 特殊属性 + +| 属性名 | 含义 | +| --- | --- | +| x | 圆心的 x 坐标 | +| y | 圆心的 y 坐标 | +| r | 圆的半径 | ### 用法 @@ -64,15 +69,18 @@ group.addShape('circle', { ``` ## 椭圆图形 Ellipse -### 属性 -| 属性名 | 含义 | 备注 | -| --- | --- | --- | -| x | 圆心的 x 坐标 | | -| y | 圆心的 y 坐标 | | -| rx | 水平半径 | | -| ry | 垂直半径 | | + +### 特殊属性 + +| 属性名 | 含义 | +| --- | --- | +| x | 圆心的 x 坐标 | +| y | 圆心的 y 坐标 | +| rx | 水平半径 | +| ry | 垂直半径 | + ### 用法 ```javascript group.addShape('ellipse', { @@ -86,19 +94,23 @@ group.addShape('ellipse', { }) ``` + ## 扇形图形 Fan -### 属性 + +### 特殊属性 + | 属性名 | 含义 | 备注 | | --- | --- | --- | | x | 扇形圆心的 x 坐标 | | | y | 扇形圆心的 y 坐标 | | | rs | 水平半径 | | | re | 垂直半径 | | -| startAngle | 起点弧度 | 弧度是弧度，即使用 Math.PI 表示 | -| endAngle | 终点弧度 | | +| startAngle | 起点弧度 | 弧度制，即使用 Math.PI 表示 | +| endAngle | 终点弧度 | 弧度制，即使用 Math.PI 表示 | | clockwise | 为 `true` 时顺时针渲染，为 `false` 时逆时针渲染 | | + ### 用法 ```javascript group.addShape('fan', { @@ -115,15 +127,19 @@ group.addShape('fan', { }) ``` + ## 图片图形 Image -### 属性 + +### 特殊属性 + | 属性名 | 含义 | 备注 | | --- | --- | --- | | x | 图片左上角的 x 坐标 | | | y | 图片左上角的 y 坐标 | | | width | 图片宽度 | | | height | 图片高度 | | -| img | 图片源 | G6 支持多种格式的图片：url、ImageData、Image、canvas | +| img | 图片源 | G6 支持多种格式的图片：
- url
- ImageData
- Image
- canvas
| + ### 用法 @@ -137,14 +153,18 @@ group.addShape('image', { }) ``` + ## 标记图形 Marker -### 属性 + +### 特殊属性 + | 属性名 | 含义 | 备注 | | --- | --- | --- | | x | 中心的 x 坐标 | | | y | 中心的 y 坐标 | | | r | 形状半径 | | -| symbol | 指定形状 | 内置了一些常用形状，如圆形 `circle` ， 矩形 `square` ， 菱形 `diamond` ，三角形 `triangle` ， 倒三角形 `triangle-down` ，也可以是自定义的 path 路径。 | +| symbol | 指定形状 | 内置了一些常用形状，如圆形 `circle`，矩形 `square`，菱形 `diamond`，三角形 `triangle`，倒三角形 `triangle-down`，也可以是自定义的 path 路径。 | + ### 用法 @@ -158,7 +178,7 @@ group.addShape('marker', { return [ [ 'M', x, y ], [ 'L', x + r, y + r ], - [ 'L', x + r * 2, y ], + [ 'L'，x + r * 2, y ], [ 'Z' ] ] } @@ -166,13 +186,17 @@ group.addShape('marker', { }); ``` + ## 多边形图形 Polygon -### 属性 + +### 特殊属性 + | 属性名 | 含义 | 备注 | | --- | --- | --- | | points | 多边形的所有端点坐标 | 数组形式 | + ### 用法 ```javascript group.addShape('polygon', { @@ -183,17 +207,21 @@ group.addShape('polygon', { }); ``` + ## 矩形图形 Rect -### 属性 + +### 特殊属性 + | 属性名 | 含义 | 备注 | | --- | --- | --- | | x | 矩形左上角的 x 坐标 | | | y | 矩形左上角的 y 坐标 | | | width | 矩形的宽度 | | | height | 矩形的高度 | | -| radius | 定义圆角 | 支持整数或数组形式， 分别对应左上、右上、右下、左下角的半径：
- radius 缩写为 1 或 [ 1 ] 相当于 [ 1, 1, 1, 1 ]
- radius 缩写为 [ 1, 2 ] 相当于 [ 1, 2, 1, 2 ]
- radius 缩写为 [ 1, 2, 3 ] 相当于 [ 1, 2, 3, 2 ]
| +| radius | 定义圆角 | 支持整数或数组形式，分别对应左上、右上、右下、左下角的半径：
- radius 缩写为 1 或 [ 1 ] 相当于 [ 1, 1, 1, 1 ]
- radius 缩写为 [ 1, 2 ] 相当于 [ 1, 2, 1, 2 ]
- radius 缩写为 [ 1, 2, 3 ] 相当于 [ 1, 2, 3, 2 ]
| + ### 用法 ```javascript group.addShape('rect', { @@ -208,10 +236,12 @@ group.addShape('rect', { }); ``` -## 路径 Path -   注意： -边太细时候点击不中，请设置 `lineAppendWidth` 属性值。 -### 属性 + +## 线条 Path +⚠️注意:当边太细时候点击不中时，请设置 **lineAppendWidth** 属性值。 + +### 特殊属性 + | 属性名 | 含义 | 备注 | | --- | --- | --- | | path | 线条路径 | 可以是 String 形式，也可以是线段的数组。 | @@ -230,11 +260,11 @@ group.addShape('rect', { group.addShape('path', { attrs: { startArrow: { - path: 'M 10,0 L -10,-10 L -10,10 Z', // 自定义箭头为中心点在(0, 0)，指向 x 轴正方向的path + path: 'M 10,0 L -10,-10 L -10,10 Z', // 自定义箭头为中心点在(0, 0)，指向 x 轴正方向的 path d: 10 }, endArrow: { - path: 'M 10,0 L -10,-10 L -10,10 Z', // 自定义箭头为中心点在(0, 0)，指向 x 轴正方向的path + path: 'M 10,0 L -10,-10 L -10,10 Z', // 自定义箭头为中心点在(0, 0)，指向 x 轴正方向的 path d: 10 }, path: [ @@ -249,4 +279,39 @@ group.addShape('path', { ``` +## 文本 Text +### 特殊属性 +| 属性名 | 含义 | 备注 | +| --- | --- | --- | +| fill | 设置用于填充绘画的颜色、渐变或模式 | 对应 Canvas 属性 `fillStyle` | +| stroke | 设置用于笔触的颜色、渐变或模式 | 对应 Canvas 属性 `strokeStyle` | +| shadowColor | 设置用于阴影的颜色 | | +| shadowBlur | 设置用于阴影的模糊级别 | 数值越大，越模糊 | +| shadowOffsetX | 设置阴影距形状的水平距离 | | +| shadowOffsetY | 设置阴影距形状的垂直距离 | | +| opacity | 设置绘图的当前 alpha 或透明值 | 对应 Canvas 属性 `globalAlpha` | +| font | 设置文本内容的当前字体属性 | | +| textAlign | 设置文本内容的当前对齐方式 | 支持的属性：`center` / `end` / `left` / `right` / `start`，默认值为 `start` | +| textBaseline | 设置在绘制文本时使用的当前文本基线 | 支持的属性:
`top` / `middle` / `bottom` / `alphabetic` / `hanging`。默认值为 `bottom` | +| fontStyle | 字体样式 | 对应 `font-style` | +| fontVariant | 设置为小型大写字母字体 | 对应 `font-variant` | +| fontWeight | 字体粗细 | 对应 `font-weight` | +| fontSize | 字体大小 | 对应 `font-size` | +| fontFamily | 字体系列 | 对应 `font-family` | + +### 用法 + +```javascript +group.addShape('text', { + attrs: { + text: 'test text', + fill: 'red', + fontWeight: 400, + shadowOffsetX: 10, + shadowOffsetY: 10, + shadowColor: 'blue', + shadowBlur: 10 + } +}); +``` \ No newline at end of file diff --git a/docs/manual/FAQ/build-error.en.md b/docs/manual/FAQ/build-error.en.md index e5dd3b3d3a..35b95e4840 100644 --- a/docs/manual/FAQ/build-error.en.md +++ b/docs/manual/FAQ/build-error.en.md @@ -1,14 +1,14 @@ --- -title: Build 报错 +title: Building Error order: 5 --- -### 问题 -使用最新版 G6，build 时候报如下错误： +## Problem +You might meet the error while building your project with lastest version G6: -### 解决方案 -参考[#issues 960](https://github.com/antvis/G6/issues/960)。 +## Solution +Refer to #issues 960. diff --git a/docs/manual/FAQ/build-error.zh.md b/docs/manual/FAQ/build-error.zh.md index e5dd3b3d3a..1b6f5bf980 100644 --- a/docs/manual/FAQ/build-error.zh.md +++ b/docs/manual/FAQ/build-error.zh.md @@ -3,12 +3,12 @@ title: Build 报错 order: 5 --- -### 问题 +## 问题 使用最新版 G6，build 时候报如下错误： -### 解决方案 -参考[#issues 960](https://github.com/antvis/G6/issues/960)。 +## 解决方案 +参考 #issues 960。 diff --git a/docs/manual/FAQ/front-edge.en.md b/docs/manual/FAQ/front-edge.en.md index cd46c6309f..0bb18add1e 100644 --- a/docs/manual/FAQ/front-edge.en.md +++ b/docs/manual/FAQ/front-edge.en.md @@ -1,33 +1,39 @@ --- -title: 如何设置 Edge 前置 +title: Render the Edge on the Top order: 6 --- -### 问题 -G6 3.x 中如何设置让 Edge 前置，即让 Edge 显示到最上面。 +## Problem +How to render the edges on the top of nodes in G6 3.x? -### 解决方案 -G6 3.x中 edg e默认是在 node 的下面，所有 node 都在 nodeGroup 中，所有 edge 都在 edgeGroup 中，要改层级的话可以通过修改 group 的层级来实现： -``` +## Solution +In G6 3.x, nodes are rendered on the top of edges by default. All the nodes are grouped by a [Graphics Group](/en/docs/manual/advanced/keyconcept/graphics-group) named `nodeGroup`, and all the edges are grouped by another [Graphics Group](/en/docs/manual/advanced/keyconcept/graphics-group) named `edgeGroup`. You can modify the visual levels of the groups to change the visual levels of all nodes and all edges. After changing the visual levels, do remember to call `graph.paint()` to repaint the graph. + +```javascript document.getElementById('changeView').addEventListener('click', (evt) => { - const edge=graph.findById('edge1') - const edgeGroup = graph.get('edgeGroup') - edgeGroup.toFront() - graph.paint() + const edgeGroup = graph.get('edgeGroup'); // Get the defuall group of edges + edgeGroup.toFront(); // Move up the edge group + graph.paint(); // Must be called to repaint the graph }) ``` -如果只想让单条边前置，可以这样： +If you want to move up a single edge, please follow the steps: +1. Configure `groupByTypes: false` when instantiating a Graph to turnoff grouping by items' type. The visual levels of the items will correnspond to the generation order of them. +2. Call `toFront()` and `toBack()` to adjust the visual level of single item. +3. Call `graph.paint()` to repaint the graph after level adjustment. -``` +```javascript +const graph = new G6.Graph({ + // ... Other configurations for graph + groupByTypes: false // Turnoff grouping by items' type +}); document.getElementById('changeView').addEventListener('click', (evt) => { - const edge=graph.findById('edge1') - const nodeGroup = graph.get('nodeGroup') - const edge1Group = edge.get('group') - edge1Group.toFront() - nodeGroup.toBack(); - graph.paint() + const edge = graph.findById('edge1'); // Find an edge according to the id + const node = graph.findById('node1'); // Find a node according to the id + edge.toFront(); // Move up the edge + node.toBack(); // Move back the node + graph.paint(); // Must be called to repaint the graph }) ``` -详见[#issues 817](https://github.com/antvis/G6/issues/817)。 +Refer to #issues 817 for detail. diff --git a/docs/manual/FAQ/front-edge.zh.md b/docs/manual/FAQ/front-edge.zh.md index cd46c6309f..8789a200d8 100644 --- a/docs/manual/FAQ/front-edge.zh.md +++ b/docs/manual/FAQ/front-edge.zh.md @@ -3,31 +3,34 @@ title: 如何设置 Edge 前置 order: 6 --- -### 问题 +## 问题 G6 3.x 中如何设置让 Edge 前置，即让 Edge 显示到最上面。 -### 解决方案 -G6 3.x中 edg e默认是在 node 的下面，所有 node 都在 nodeGroup 中，所有 edge 都在 edgeGroup 中，要改层级的话可以通过修改 group 的层级来实现： -``` +## 解决方案 +G6 3.x 中 edge 默认是在 node 的下面，所有 node 属于一个名为 `nodeGroup` 的[图形分组](/zh/docs/manual/advanced/keyconcept/graphics-group)，所有 edge 属于名为 `edgeGroup` 的[图形分组](/zh/docs/manual/advanced/keyconcept/graphics-group)。可以通过修改图形分组的层级以改变全体节点与全体边的层级。在改变层级后，必须调用 `graph.paint()` 以重新绘制图。 + +```javascript document.getElementById('changeView').addEventListener('click', (evt) => { - const edge=graph.findById('edge1') - const edgeGroup = graph.get('edgeGroup') - edgeGroup.toFront() - graph.paint() + const edgeGroup = graph.get('edgeGroup'); // 得到默认的边图形分组 + edgeGroup.toFront(); // 将边图形分组前置 + graph.paint(); // 必须调用以重绘 }) ``` -如果只想让单条边前置，可以这样： +如果只想让单条边前置，首先需要在实例化图时通过 `groupByTypes: false` 关闭按照元素类型分组，此时，节点和边的绘制顺序与它们的生成顺序相关。然后，在需要改变层级的地方使用 `toFront()` 和 `toBack()` 调整每个元素的层级。在改变层级后，必须调用 `graph.paint()` 以重新绘制图。 -``` +```javascript +const graph = new G6.Graph({ + // ... 其他实例化图的配置项 + groupByTypes: false // 关闭按照元素类型进行分组 +}); document.getElementById('changeView').addEventListener('click', (evt) => { - const edge=graph.findById('edge1') - const nodeGroup = graph.get('nodeGroup') - const edge1Group = edge.get('group') - edge1Group.toFront() - nodeGroup.toBack(); - graph.paint() + const edge = graph.findById('edge1'); // 根据边的 id 查找边实例 + const node = graph.findById('node1'); // 根据节点的 id 查找节点实例 + edge.toFront(); // 将该边放置在所有图形的最前面 + node.toBack(); // 将该节点放置在所有图形的最后面 + graph.paint(); // 必须调用以重绘 }) ``` -详见[#issues 817](https://github.com/antvis/G6/issues/817)。 +详见 #issues 817。 diff --git a/docs/manual/FAQ/multi-line.en.md b/docs/manual/FAQ/multi-line.en.md index 42e0570153..0247347910 100644 --- a/docs/manual/FAQ/multi-line.en.md +++ b/docs/manual/FAQ/multi-line.en.md @@ -1,9 +1,10 @@ --- -title: 使用 G6 让两个节点之间连多条边 +title: Multiple Edges between Two Nodes order: 4 --- -有如下的一份数据，如何使用 [G6](https://github.com/antvis/g6) 让两个节点之间连多条边？ +## Problem +For such a data below, how to link two nodes with multiple edges? ```javascript const data = { @@ -31,7 +32,7 @@ const data = { ``` -接到上面这个问题后，我们马上就开始动手，二话不说先撸出了下面这段代码。 +The following code handles the graph easily: ```javascript const graph = new G6.Graph({ @@ -61,14 +62,14 @@ graph.data(data); graph.render(); ``` -So Easy! +The result: -如果两个节点之间需要显示3条、4条甚至更多条边，该怎么做呢？ +But what if we want to show 3 or more edges? -我们把数据改成下面这样试试： +We use the data below for example: ```javascript const data = { @@ -99,22 +100,22 @@ const data = { }; ``` -结果发现并不对。 +We found that the code above can not handle this situation any more. The result: -这个时候，就需要借助 G6 的「自定义边」功能了。 +## Solution -有了这个黑科技，什么样的需求，那还不是分分钟的事。 +To solve this problem, we utlize the [Custom Edge](/en/docs/manual/advanced/custom-edge) of G6. -当然了，在使用「自定义边」的之前，有两件事还是需要明确下的： +There are two tips should be taken into consideration before customize an edge: -- **两个节点之间同方向超过一条边的，总需要有个标识来区分；** -- **需要有一个值控制边的弯曲度，以防边重叠**。 +- **We need a flag to identify whether there are more than one edges with same direction between two nodes**; +- **We need a value to control the curvature of each edge to prevent overlapping**. -我们就在边数据中添加一个 edgeType 用于区分不同的边。有了这个约定以后，就可以开始动手撸码了。 +Therefore, we add a property `edgeType` for each edge in its data to identify different types of edges. -完善的自定义边的代码如下所示。 +The complete the code for the demo is shown below: -到这里为止，我们也就实现了让两个节点之间展示多条边的功能。 +Now, the prolem is solved. diff --git a/docs/manual/FAQ/multi-line.zh.md b/docs/manual/FAQ/multi-line.zh.md index 42e0570153..633c5b3c3d 100644 --- a/docs/manual/FAQ/multi-line.zh.md +++ b/docs/manual/FAQ/multi-line.zh.md @@ -1,9 +1,10 @@ --- -title: 使用 G6 让两个节点之间连多条边 +title: 两节点间存在多条边 order: 4 --- -有如下的一份数据，如何使用 [G6](https://github.com/antvis/g6) 让两个节点之间连多条边？ +## 问题 +有如下的一份数据，如何使用 G6 让两个节点之间连多条边？ ```javascript const data = { @@ -66,7 +67,7 @@ So Easy! -如果两个节点之间需要显示3条、4条甚至更多条边，该怎么做呢？ +如果两个节点之间需要显示 3 条、4 条甚至更多条边，该怎么做呢？ 我们把数据改成下面这样试试： @@ -103,18 +104,20 @@ const data = { -这个时候，就需要借助 G6 的「自定义边」功能了。 +## 解决方案 + +这个时候，需要借助 G6 的 [自定义边](/zh/docs/manual/advanced/custom-edge) 功能。 有了这个黑科技，什么样的需求，那还不是分分钟的事。 -当然了，在使用「自定义边」的之前，有两件事还是需要明确下的： +在使用「自定义边」前，需要明确两件事： -- **两个节点之间同方向超过一条边的，总需要有个标识来区分；** +- **需要有个标识来区分两个节点之间是否超过一条同方向边**； - **需要有一个值控制边的弯曲度，以防边重叠**。 -我们就在边数据中添加一个 edgeType 用于区分不同的边。有了这个约定以后，就可以开始动手撸码了。 +因此，我们在每条边的数据中添加一个 `edgeType` 属性以区分不同的边。有了这个约定以后，就可以开始动手撸码了。 -完善的自定义边的代码如下所示。 +完善的自定义边的代码如下。 -到这里为止，我们也就实现了让两个节点之间展示多条边的功能。 +至此，我们实现了让两个节点之间展示多条边的功能。 diff --git a/docs/manual/FAQ/supportIE.en.md b/docs/manual/FAQ/supportIE.en.md index 1cbbf7e39b..1d87f21662 100644 --- a/docs/manual/FAQ/supportIE.en.md +++ b/docs/manual/FAQ/supportIE.en.md @@ -3,23 +3,49 @@ title: Use G6 with IE order: 3 --- -最近 [G6 图可视化交流群](/zh/docs/manual/getting-started/#g6-图可视化交流群)里面有同学反馈说 G6 不支持 IE，官网上的 Demo 在 IE 上完全打不开，对于这样对问题，我们有考虑过怎么处理，最终没有选择内部处理，具体原因自行脑补。 +## Problem -下面针对@vue/cli、umi、create-react-app搭建的项目给出一些解决方案，**务必确保在没有引入 G6 时你的项目可以正常运行在IE上**。 +Recently, we received some feedbacks about usage of G6 in IE. Some users found there are some display problems when using G6 in IE. -类似如下错误。 + +## Solution + +Import `babel-polyfill` into your project: +- Import `babel-polyfill` in your main entrance file; +- Add some code into `bable-loader`: + +``` +{ + test: /\.js$/, + loader: 'babel-loader', + include: [resolve('src'), resolve('node_modules/@antv/g6')] +} +``` + +> include indicates the directories of the .js files should to be babel-loader; exclude represents the directories of .js files should not to be babel-loader。 + + +The content of include should be assigned according to your project. + +Refer to The Link for more detail. + + +In addition, there are some solutions for the projects with @vue/cli, umi, and create-react-app. +**First, ensure your project can be ran on IE without G6**. + +You may find the error: -## vue/cli +### vue/cli -本[案例](https://github.com/lxfu/vue-g6)是基于@vue/cli(V: 4.0.5)，如果你的版本是3.x的话可能写法上会有出入，@vue/cli怎么解决依赖兼容性问题呢？
遇到问题首先想到的是官网，没错，先看看[官网](https://cli.vuejs.org/zh/guide/browser-compatibility.html#polyfill)上有没有类似的教程，从官网上我们定位到浏览器兼容性，如下 - +The G6 Vue Demo is based on @vue/cli(V: 4.0.5). There will be some small differences to the 3.x version. Now, we are going to solve the compatibility issues of @vue/cli.
First, we find the document on Vue Official Website, which points out the problem of browser compatibility: + -从文章中我们貌似已经找到了问题的答案，我们需要新建vue.config.js文件（和package.json同一目录），在里面添加transpileDependencies选项： +New a vue.config.js file in the same directory of package.json, and add `transpileDependencies`: -该选项默认值是[]，说明会忽略掉所有掉node_modules文件，不会对node_modules里面对文件做Babel，我们需要做的就是把我们希望Babel的文件加入即可，代码如下，需要注意的是我们加入的依赖**不需要包含node_modules，用包名（**@antv/g6**）即可**，因为@vue/cli会自动添加前缀node_modules。 还需要注意 @antv/g6必须和package.json里面的一致，安装依赖的时候首选npm，如果你用yarn、cnpm等安装，需要确保node_modules里面的包名没有被更改。 +The value of `transpileDependencies` is `[]` by default, which means no Babel with all the node_modules files. Now, we add the files should be Bable into `transpileDependencies` as below. Note that the dependencies to be added **should not contain node_modules, and use the package name @antv/g6**. The reason is that the @vue/cli will add the prefix node_modules automatically. The @antv/g6 must be same consistent to that in package.json. Use npm while installing the dependencies. If you are using yarn or cnpm, you should make sure that there are no modified package name in node_modules. ```javascript module.exports = { @@ -27,11 +53,11 @@ module.exports = { }; ``` -好了，我们打开IE11看看结果吧。 +Open the project with IE11 to see the result: -最开始的那个报错解决了，但咋出现了新问题呢，别急，先用chrome浏览器看看，发现问题是一样的，添加完transpileDependencies兼容性问题是没有了，但出了个新错误。再次查看官网，并没有相关文章，那就直接移步issue吧，经过一番查找，我们找到如下解决方案，在babel.config.js里面添加上sourceType: "unambiguous"，具体含有可以官网查阅。 +The original error is solved, but new problem shows up. Open the project with Chrome, you can find the same error. The compatibility issue has been solved by adding `transpileDependencies`. We find a solution in the issues of Vue: add `sourceType: "unambiguous"` to babel.config.js, which can be refered to the official website of Vue for the definition. ```javascript module.exports = { @@ -40,27 +66,17 @@ module.exports = { }; ``` -再次编译， +Compile it again: -到此，完美解决问题。 +Now, the prolem is solved. -## create-react-app +### create-react-app -如果你使用create-react-app(V: 3.0.0)初始化项目，那么恭喜你，create-react-app已经内置了依赖兼容性的处理方案，你只需要配置项目自身的兼容性问题即可，配置有多种方式，可参考[这里]。(https://create-react-app.dev/docs/supported-browsers-features/#configuring-supported-browsers)。
+If you are using create-react-app(V: 3.0.0) to initiate your project, create-react-app has built in the solution for compatibility. You only need to configure the compatibility of the project by several methods. Please refer to HERE.
-当然，也许你想看看内部是怎么处理的，那就执行npm run eject 或 yarn run eject吧，这样就能暴露create-react-app的内置配置了，这个操作是不可逆的。 内置配置如下： +If you want to figure out the inner solving process, run `npm run eject` or `yarn run eject` to check the inner configurations of create-react-app. This operation is irreversible. - -## umi - -如果你使用的是umi，再次恭喜你，umi不仅内置了依赖兼容性方案，而且配置简单，如果有任何问题，你可以在答疑群里面@云谦大佬。 - -```javascript -export default { - browserslist: ['> 1%', 'last 2 versions'], -}; -``` diff --git a/docs/manual/FAQ/supportIE.zh.md b/docs/manual/FAQ/supportIE.zh.md index 1e031f8a6f..8bb0f90da8 100644 --- a/docs/manual/FAQ/supportIE.zh.md +++ b/docs/manual/FAQ/supportIE.zh.md @@ -3,7 +3,13 @@ title: 如何让 IE 支持 G6 order: 3 --- -最近 [G6 图可视化交流群](/zh/docs/manual/getting-started/#g6-图可视化交流群)里面有同学反馈说 G6 不支持 IE。对于这类问题，我们在项目中只需要引入 `babel-polyfill` 即可，具体使用方法如下： +## 问题 + +最近 [G6 图可视化交流群](/zh/docs/manual/introduction/#g6-图可视化交流群) 里有同学反馈 G6 不支持 IE。 + +## 解决方案 + +对于这类问题，我们在项目中只需要引入 `babel-polyfill` 即可，具体使用方法如下： - 在主入门文件中引入 `babel-polyfill` ； - 在 `bable-loader` 中加入如下代码： @@ -20,24 +26,25 @@ order: 3 include 中的内容请根据具体项目情况设置。 -更详细的请参考：https://blog.csdn.net/y491887095/article/details/81541502。 +更详细的请参考：https://blog.csdn.net/y491887095/article/details/81541502。 -另外，针对@vue/cli、umi、create-react-app搭建的项目给出一些解决方案，**务必确保在没有引入 G6 时你的项目可以正常运行在IE上**。 +另外，针对 @vue/cli、umi、create-react-app 搭建的项目给出一些解决方案，**务必确保在没有引入 G6 时你的项目可以正常运行在IE上**。 类似如下错误。 -## vue/cli +### vue/cli -本[案例](https://github.com/lxfu/vue-g6)是基于@vue/cli(V: 4.0.5)，如果你的版本是3.x的话可能写法上会有出入，@vue/cli怎么解决依赖兼容性问题呢？
遇到问题首先想到的是官网，没错，先看看[官网](https://cli.vuejs.org/zh/guide/browser-compatibility.html#polyfill)上有没有类似的教程，从官网上我们定位到浏览器兼容性，如下 +本 G6 Vue 案例 是基于 @vue/cli(V: 4.0.5)，3.x 版本可能在写法上有些出入。@vue/cli 怎么解决依赖兼容性问题呢？
遇到问题首先查看 Vue 官网 上有没有类似的教程，从官网上我们定位到浏览器兼容性，如下 -从文章中我们貌似已经找到了问题的答案，我们需要新建vue.config.js文件（和package.json同一目录），在里面添加transpileDependencies选项： +从文章中我们貌似已经找到了问题的答案，我们需要新建 vue.config.js 文件（和 package.json 同一目录），在里面添加 `transpileDependencies` 选项： + -该选项默认值是[]，说明会忽略掉所有掉node_modules文件，不会对node_modules里面对文件做Babel，我们需要做的就是把我们希望Babel的文件加入即可，代码如下，需要注意的是我们加入的依赖**不需要包含node_modules，用包名（**@antv/g6**）即可**，因为@vue/cli会自动添加前缀node_modules。 还需要注意 @antv/g6必须和package.json里面的一致，安装依赖的时候首选npm，如果你用yarn、cnpm等安装，需要确保node_modules里面的包名没有被更改。 +该选项默认值是 `[]`，说明会忽略掉所有掉 node_modules 文件，不会对 node_modules 里面对文件做 Babel。我们需要做的就是把我们希望 Babel 的文件加入即可，代码如下。需要注意的是我们加入的依赖**不需要包含 node_modules ，用包名 @antv/g6**即可，因为 @vue/cli 会自动添加前缀 node_modules 。还需要注意 @antv/g6 必须和 package.json 里面的一致。安装依赖的时候首选 npm ，如果你用 yarn、cnpm 等安装，需要确保 node_modules 里面的包名没有被更改。 ```javascript module.exports = { @@ -45,11 +52,11 @@ module.exports = { }; ``` -好了，我们打开IE11看看结果吧。 +好了，我们打开 IE11 看看结果吧。 -最开始的那个报错解决了，但咋出现了新问题呢，别急，先用chrome浏览器看看，发现问题是一样的，添加完transpileDependencies兼容性问题是没有了，但出了个新错误。再次查看官网，并没有相关文章，那就直接移步issue吧，经过一番查找，我们找到如下解决方案，在babel.config.js里面添加上sourceType: "unambiguous"，具体含有可以官网查阅。 +最开始的那个报错解决了，但出现了新问题。先用 Chrome 浏览器看看，发现问题是一样的。添加完 `transpileDependencies` 兼容性问题是没有了，但出了个新错误。再次查看官网，并没有相关文章，那就直接移步 issue 吧。经过一番查找，我们找到如下解决方案，在 babel.config.js 里面添加上 `sourceType: "unambiguous"` ，具体含义可以官网查阅。 ```javascript module.exports = { @@ -58,24 +65,25 @@ module.exports = { }; ``` -再次编译， +再次编译： + 到此，完美解决问题。 -## create-react-app +### create-react-app -如果你使用create-react-app(V: 3.0.0)初始化项目，那么恭喜你，create-react-app已经内置了依赖兼容性的处理方案，你只需要配置项目自身的兼容性问题即可，配置有多种方式，可参考[这里]。(https://create-react-app.dev/docs/supported-browsers-features/#configuring-supported-browsers)。
+如果你使用 create-react-app(V: 3.0.0) 初始化项目，那么恭喜你，create-react-app 已经内置了依赖兼容性的处理方案，你只需要配置项目自身的兼容性问题即可。配置有多种方式，可参考 这里 。
-当然，也许你想看看内部是怎么处理的，那就执行npm run eject 或 yarn run eject吧，这样就能暴露create-react-app的内置配置了，这个操作是不可逆的。 内置配置如下： +也许你想看看内部是怎么处理的，可以执行 `npm run eject` 或 `yarn run eject` 以暴露 create-react-app 的内置配置。这个操作是不可逆的。内置配置如下： -## umi +### umi -如果你使用的是umi，再次恭喜你，umi不仅内置了依赖兼容性方案，而且配置简单，如果有任何问题，你可以在答疑群里面@云谦大佬。 +umi 不仅内置了依赖兼容性方案，而且配置简单，如果有任何问题，你可以在答疑群里面 @云谦 老师。 ```javascript export default { diff --git a/docs/manual/FAQ/updateElement.en.md b/docs/manual/FAQ/updateElement.en.md index 8e7a8da238..61dfcfb25c 100644 --- a/docs/manual/FAQ/updateElement.en.md +++ b/docs/manual/FAQ/updateElement.en.md @@ -3,11 +3,11 @@ title: Update Item's Style order: 1 --- -G6 提供了三种修改节点样式的方法。 +There are three ways to modify the styles for items in G6. -#### 实例化Graph +#### Configure When Instantiating Graph -实例化 Graph 时，可以通过在 `defaultNode` 或 `defaultEdge` 中指定 `**style**` 样式属性。 +When instantiating a Graph, assign `style` in `defaultNode` or `defaultEdge` to configure the styles for global nodes and global edges respectively. ```javascript const graph = new G6.Graph({ @@ -31,7 +31,7 @@ const graph = new G6.Graph({ }); ``` -#### 数据中指定style +#### Configure style in Data ```javascript const data = { nodes: [ @@ -47,17 +47,15 @@ const data = { } ``` -#### 使用 update / updateItem - -使用 `update` / `updateItem` 更新节点或边。 +#### update / updateItem ```javascript graph.updateItem(node, { - // 节点的样式 + // The node style style: { stroke: 'blue' } }) ``` -想要知道节点都支持哪些属性样式，请👉参数[节点支持的属性](/zh/docs/api/properties/NodeProperties)。 +For more information about the styles, refer to [Node Style Properties](/en/docs/manual/middle/elements/nodes/defaultNode/#style). diff --git a/docs/manual/FAQ/updateElement.zh.md b/docs/manual/FAQ/updateElement.zh.md index 8e649abf25..b0b8d3333d 100644 --- a/docs/manual/FAQ/updateElement.zh.md +++ b/docs/manual/FAQ/updateElement.zh.md @@ -5,9 +5,9 @@ order: 1 G6 提供了三种修改节点样式的方法。 -#### 实例化Graph +#### 实例化 Graph -实例化 Graph 时，可以通过在 `defaultNode` 或 `defaultEdge` 中指定 `**style**` 样式属性。 +实例化 Graph 时，可以通过在 `defaultNode` 或 `defaultEdge` 中指定 `style` 分别配置全局节点和全局边的样式属性。 ```javascript const graph = new G6.Graph({ @@ -31,7 +31,7 @@ const graph = new G6.Graph({ }); ``` -#### 数据中指定style +#### 数据中指定 style ```javascript const data = { nodes: [ @@ -60,4 +60,4 @@ graph.updateItem(node, { }) ``` -想要知道节点都支持哪些属性样式，请👉参数[节点支持的属性](/zh/docs/api/properties/NodeProperties)。 +想要知道节点都支持哪些属性样式，请参考 [节点样式属性](/zh/docs/manual/middle/elements/nodes/defaultNode/#样式属性-style)。 diff --git a/docs/manual/FAQ/updateText.en.md b/docs/manual/FAQ/updateText.en.md index ebc6a5c950..ab31dc6e0b 100644 --- a/docs/manual/FAQ/updateText.en.md +++ b/docs/manual/FAQ/updateText.en.md @@ -3,10 +3,11 @@ title: Update Label order: 0 --- -在 G6 中，可以通过以下三种方式更新文本样式。 +There are three ways to modify the styles for labels in G6. + +#### Configure When Instantiating Graph +When instantiating a Graph, assign `labelCfg` in `defaultNode` or `defaultEdge` to configure the styles for labels of global nodes and global edges respectively. -#### 实例化Graph -实例化Graph时，可以通过在defaultNode或defaultEdge中指定**labelCfg**属性修改文本的样式。 ```javascript const graph = new G6.Graph({ @@ -34,7 +35,7 @@ const graph = new G6.Graph({ }); ``` -#### 数据中指定labelCfg +#### Configure Style in Data ```javascript const data = { @@ -53,17 +54,17 @@ const data = { } ``` -#### 使用update/updateItem +#### update/updateItem -使用update/updateItem更新节点或边时，也可以更新节点或边上的文本。 +When using `update/updateItem` to update a node or edge, the label can be updated as well. ```javascript graph.updateItem(node, { - // 节点的样式 + // The style of the node style: { stroke: 'blue' }, - // 节点上文本的样式 + // The configurations of the label on the node labelCfg: { style: { fill: '#fff', @@ -73,4 +74,4 @@ graph.updateItem(node, { }) ``` -想知道文本都可以设置哪些属性，请👉参考[文本属性样式](/zh/docs/api/properties/TextProperties)。 +For more information about the label styles, refer to [Label on Node](/en/docs/manual/middle/elements/nodes/defaultNode/#label-and-labelcfg) and [Label on Edge](/en/docs/manual/middle/elements/edges/defaultEdge/#label-and-labelcfg). diff --git a/docs/manual/FAQ/updateText.zh.md b/docs/manual/FAQ/updateText.zh.md index b51941bb32..7c67a69793 100644 --- a/docs/manual/FAQ/updateText.zh.md +++ b/docs/manual/FAQ/updateText.zh.md @@ -5,8 +5,8 @@ order: 0 在 G6 中，可以通过以下三种方式更新文本样式。 -#### 实例化Graph -实例化Graph时，可以通过在defaultNode或defaultEdge中指定**labelCfg**属性修改文本的样式。 +#### 实例化 Graph +实例化 Graph 时，可以通过在 `defaultNode` 或 `defaultEdge` 中指定 `labelCfg` 属性修改文本的样式。 ```javascript const graph = new G6.Graph({ @@ -34,7 +34,7 @@ const graph = new G6.Graph({ }); ``` -#### 数据中指定labelCfg +#### 数据中指定 labelCfg ```javascript const data = { @@ -53,9 +53,9 @@ const data = { } ``` -#### 使用update/updateItem +#### 使用 update/updateItem -使用update/updateItem更新节点或边时，也可以更新节点或边上的文本。 +使用 `update/updateItem` 更新节点或边时，也可以更新节点或边上的文本。 ```javascript graph.updateItem(node, { @@ -73,4 +73,4 @@ graph.updateItem(node, { }) ``` -想知道文本都可以设置哪些属性，请👉参考[文本属性样式](/zh/docs/api/properties/TextProperties)。 +想知道文本都可以设置哪些属性，请参考 [节点上的文本属性](/zh/docs/manual/middle/elements/nodes/defaultNode/#标签文本-label-及其配置-labelcfg) 或 [边上的文本属性](/zh/docs/manual/middle/elements/edges/defaultEdge/#标签文本-label-及其配置-labelcfg)。 diff --git a/docs/manual/advanced/animation.en.md b/docs/manual/advanced/animation.en.md index c90a1766e4..ad0a699a4f 100644 --- a/docs/manual/advanced/animation.en.md +++ b/docs/manual/advanced/animation.en.md @@ -1,47 +1,48 @@ --- -title: 基础动画 +title: Basic Animation order: 8 --- -G6 中的动画分为两个层次： +There are two-level animations in G6: -- 全局动画：全局性的动画，图整体变化时的动画过渡； -- 元素（边和节点）动画：节点或边上的独立动画。 +- GLobal animation: Transform the graph animatively when the changes are global; +- Item animation: The animation on a node or an edge.
-## 全局动画 -G6 的全局动画指通过图实例进行某些全局操作时，产生的动画效果。例如： +## Global Animation +The global animation is controlled by Graph instance. It takes effect when some global changes happen, such as: -- `graph.updateLayout(cfg)` 布局的变化 -- `graph.changeData()` 数据的变化 +- `graph.updateLayout(cfg)` change the layout; +- `graph.changeData()` change the data. -通过实例化图时配置 `animate: true`，可以达到每次进行上述操作时，动画效果变化的目的。配合 `animateCfg` 配置动画参数：
+Configure `animate: true` when instantiating a graph to achieve it. +
```javascript const graph = new G6.Graph({ - // ... // 图的其他配置项 - animate: true, // Boolean，切换布局时是否使用动画过度，默认为 false + // ... // Other configurations + animate: true, // Boolean, whether to activate the animation when global changes happen animateCfg: { - duration: 500, // Number，一次动画的时长 - easing: 'linearEasing' // String，动画函数，可选项：'' + duration: 500, // Number, the duration of one animation + easing: 'linearEasing' // String, the easing function } }); ``` -### easing 函数 -easing 函数是指动画的函数。例如线性插值、先快后慢等。
G6 支持所有 d3 中的动画函数。因此，上面代码中 `animateCfg` 配置中的 String 类型的 `easing` 可以取值有：
`'easeLinear'` ，
`'easePolyIn'` ，`'easePolyOut'` ， `'easePolyInOut'` ，
`'``easeQuad``'` ，`'easeQuadIn'` ，`'easeQuadOut'` ， `'easeQuadInOut'` 。 +G6 supports all the easing functions in d3.js. Thus, the options of `easing` in `animateCfg`:
`'easeLinear'`,
`'easePolyIn'`, `'easePolyOut'`, `'easePolyInOut'` ,
`'``easeQuad``'`, `'easeQuadIn'`, `'easeQuadOut'`, `'easeQuadInOut'` . -更多取值及所有取值含义参见：[d3 Easings](https://github.com/d3/d3/blob/master/API.md#easings-d3-ease)。 +For more detail of the easing functions, please refer to: d3 Easings. -## 元素动画 -由于 G6 的内置节点和边是没有动画的，需要实现节点和边上的动画需要通过[自定义节点](/zh/docs/manual/advanced/custom-node)、[自定义边](/zh/docs/manual/advanced/custom-edge)时复写 `afterDraw` 实现。 +## Item Animation +All the built-in nodes and edges are static withou animation. To animate node or edge, please register your type of [Custom Node](/en/docs/manual/advanced/custom-node) or [Custom Edge](/en/docs/manual/advanced/custom-edge), and rewrite the `afterDraw` function. -### 节点动画 -关于节点动画，以下面三个动画示例进行讲解： +### Node Animation +The animation frames are applied on one graphics shape of a node. +We are going to introduce this part by three demos: -- 节点上图形的动画（如下图左）； -- 增加带有动画的背景图形（如下图中）； -- 节点上部分图形的旋转动画（如下图右）。 +- The graphics animation (Left of the figure below); +- The background animation (Center of the figure below); +- Partial animation (Right of the figure below). download @@ -49,45 +50,44 @@ easing 函数是指动画的函数。例如线性插值、先快后慢等。

-以上三个动画节点的 demo 代码见： -[节点动画](https://codepen.io/Yanyan-Wang/pen/QWWEEWe)。 +The code of the three demos can be found at: +Node Animation. -#### 节点上图形的动画 -节点上的动画，即每一帧发生变化的是节点上的某一个图形。
+#### The Graphics Animation +In this example, we are going to magnify and shrink the node.
download -本例实现节点放大缩小，通过 `group.get('children')[0]` 找到需要更新的图形（这里找到该节点上第 0 个图形），然后调用该图形的 `animate` 方法指定动画的参数及每一帧的变化（ `onFrame` 方法返回每一帧需要变化的参数集）。 +We first find the graphics shape to be animated by `group.get('children')[0]`. Here we find the 0th graphics shape of this type of node. Then, we call `animate` for the node to define the properties for each frame(The first parameter is a function which returns the properties of each frame, the second parameter defines the configuration for animation). ```javascript -// 放大、变小动画 +// Magnify and shrink animation G6.registerNode('circle-animate', { afterDraw(cfg, group) { - // 获取该节点上的第一个图形 + // Get the first graphics shape of this type of node const shape = group.get('children')[0]; - // 该图形的动画 - shape.animate({ - // 动画重复 - repeat: true, - // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。 - onFrame(ratio) { - // 先变大、再变小 - const diff = ratio <=0.5 ? ratio * 10 : (1 - ratio) * 10; - let radius = cfg.size; - if (isNaN(radius)) radius = radius[0]; - // 返回这一帧需要变化的参数集，这里只包含了半径 - return { - r: radius / 2 + diff - } + // The animation + shape.animate((ratio) => {// Returns the properties for each frame. The input parameter ratio is a number that range from 0 to 1. The return value is an object that defines the properties for this frame. + // Magnify first, and then shrink + const diff = ratio <=0.5 ? ratio * 10 : (1 - ratio) * 10; + let radius = cfg.size; + if (isNaN(radius)) radius = radius[0]; + // The properties for this frame. Only radius for this example + return { + r: radius / 2 + diff } - }, 3000, 'easeCubic'); // 一次动画持续的时长为 3000，动画效果为 'easeCubic' + }, { + repeat: true, // Whehter play the animation repeatly + duration: 3000, // The duration of one animation is 3000 + easing: 'easeCubic' // The easing fuction is 'easeCubic' + }); } -}, 'circle'); // 该自定义节点继承了内置节点 'circle'，除了被复写的 afterDraw 方法外，其他按照 'circle' 里的函数执行。 +}, 'circle'); // This custom node extend the built-in node 'circle'. Except for the rewrited afterDraw, other functions will extend from 'circle' node ``` -#### 增加带有动画的背景图形 -在 `afterDraw` 方法中为已有节点添加额外的 shape ，并为这些新增的图形设置动画。
+#### Background Animation +You can add extra shape with animation in `afterDraw`.
-本例在 `afterDraw` 方法中，绘制了三个背景 circle ，分别使用不同的颜色填充，再调用 `animate` 方法实现这三个 circle 逐渐变大、变淡的动画。本例中没有使用 `onFrame` 函数，直接在 `animate` 函数的入参中设置每次动画结束时的最终目标样式，即半径增大 10，透明度降为 0.1。
+In `afterDraw` of this demo, we draw three background circle shape with different filling colors. And the `animate` is called for magnifying and fading out the three circles. We do not use set the first parameter as a function here, but assign the target style for each animation to the input paramter: magify the radius to 10 and reduce the opacity to 0.1. The second parameter defines the configuration for the animation.
download @@ -98,7 +98,7 @@ G6.registerNode('background-animate', { if (isNaN(r)) { r = cfg.size[0] / 2; }; - // 第一个背景圆 + // The first background circle const back1 = group.addShape('circle',{ zIndex: -3, attrs: { @@ -109,18 +109,18 @@ G6.registerNode('background-animate', { opacity: 0.6 } }); - // 第二个背景圆 + // The second background circle const back2 = group.addShape('circle',{ zIndex: -2, attrs: { x: 0, y: 0, r, - fill: 'blue', // 为了显示清晰，随意设置了颜色 + fill: 'blue', opacity: 0.6 } }); - // 第三个背景圆 + // The third background circle const back3 = group.addShape('circle',{ zIndex: -1, attrs: { @@ -131,34 +131,46 @@ G6.registerNode('background-animate', { opacity: 0.6 } }); - group.sort(); // 排序，根据 zIndex 排序 + group.sort(); // Sort the graphic shapes of the nodes by zIndex - // 第一个背景圆逐渐放大，并消失 + // Magnify the first circle and fade it out back1.animate({ r: r + 10, - opacity: 0.1, - repeat: true // 循环 - }, 3000, 'easeCubic', null, 0) // 无延迟 + opacity: 0.1 + }, { + repeat: true, // Play the animation repeatly + duration: 3000, + easing: 'easeCubic' + delay: 0 // No delay + }) - // 第二个背景圆逐渐放大，并消失 + // Magnify the second circle and fade it out back2.animate({ r: r + 10, - opacity: 0.1, - repeat: true // 循环 - }, 3000, 'easeCubic', null, 1000) // 1 秒延迟 + opacity: 0.1 + }, { + repeat: true // Play the animation repeatly + duration: 3000, + easing: 'easeCubic', + delay: 1000 // Delay 1s + }) - // 第三个背景圆逐渐放大，并消失 + // Magnify the third circle and fade it out back3.animate({ r: r + 10, - opacity: 0.1, - repeat: true // 循环 - }, 3000, 'easeCubic', null, 2000) // 2 秒延迟 + opacity: 0.1 + }, { + repeat: true // Play the animation repeatly + duration: 3000, + easing: 'easeCubic', + delay: 2000 // Delay 2s + }) } }, 'circle'); ``` -#### 部分图形旋转动画 -这一例也是在 `afterDraw` 方法中为已有节点添加额外的 shape （本例中为 image），并为这些新增的图形设置旋转动画。旋转动画较为复杂，需要通过矩阵的操作实现。
+#### Partial Animation +In this demo, we add extra graphics shape(an image) in `afterDraw`, and set a rotation animation for it. Note that the rotation animation is a little complicated, which should be manipulated by matrix.
download @@ -168,7 +180,7 @@ G6.registerNode('inner-animate', { const size = cfg.size; const width = size[0] - 12; const height = size[1] - 12; - // 添加图片 shape + // Add an image shape const image = group.addShape('image', { attrs: { x: - width / 2, @@ -178,57 +190,56 @@ G6.registerNode('inner-animate', { img: cfg.img } }); - // 该图片 shape 的动画 - image.animate({ - // 动画重复 - repeat: true, - // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。 - onFrame(ratio) { - // 旋转通过矩阵来实现 - // 当前矩阵 - const matrix = Util.mat3.create(); - // 目标矩阵 - const toMatrix = Util.transform(matrix, [ - ['r', ratio * Math.PI * 2] - ]) ; - // 返回这一帧需要的参数集，本例中只有目标矩阵 - return { - matrix: toMatrix - }; - } - }, 3000, 'easeCubic'); + // Add animation for the image + image.animate((ratio) => {// Returns the properties for each frame. The input parameter ratio is a number that range from 0 to 1. The return value is an object that defines the properties for this frame. + // Rotate by manipulating matrix + // The current matrix + const matrix = Util.mat3.create(); + // The target matrix + const toMatrix = Util.transform(matrix, [ + ['r', ratio * Math.PI * 2] + ]) ; + // The properties of this frame. Only target matrix for this demo + return { + matrix: toMatrix + }; + }, { + repeat: true, // Play the animation repeatly + duration: 3000, + easing: 'easeCubic' + }); } }, 'rect'); ``` -### 边动画 -关于边动画，以下面三个动画示例进行讲解： +### Edge Animation +We are going to introduce this part by three demos: -- 圆点在沿着线运动（下图左）； -- 虚线运动的效果（下图中，gif 图片的帧率问题导致看起来是静态的，可以访问下面的 demo 链接查看）； -- 线从无到有的效果（下图右）。 +- A circle move along the edge (Left of the figure below); +- A running dashed line (Center of the figure below. The gif may look like a static edge due to the low fps problem. You can check out the demo by link); +- A growing line (Right of the figure below). download -download +download download -以上三个边动画的 demo 代码见：[边动画](https://codepen.io/Yanyan-Wang/pen/yLLJJoJ)。 +The code of the three demo can be found in: Edge Animation. -#### 圆点运动 -本例通过在 afterDraw 方法中为边增加了一个 circle 图形，该图形沿着线运动。沿着线运动的原理：设定每一帧中，该 circle 在线上的相对位置。
+#### A Moving Circle +In this demo, we add a circle shape with moving animation in `afterDraw`. In each frame, we return the relative position of the circle on the edge.
download ```javascript G6.registerEdge('circle-running', { afterDraw(cfg, group) { - // 获得当前边的第一个图形，这里是边本身的 path + // Get the first graphics shape of this type of edge, which is the edge's path const shape = group.get('children')[0]; - // 边 path 的起点位置 + // The start point of the edge's path const startPoint = shape.getPoint(0); - // 添加红色 circle 图形 + // Add a red circle shape const circle = group.addShape('circle', { attrs: { x: startPoint.x, @@ -238,33 +249,31 @@ G6.registerEdge('circle-running', { } }); - // 对红色圆点添加动画 - circle.animate({ - // 动画重复 - repeat: true, - // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。 - onFrame(ratio) { - // 根据比例值，获得在边 path 上对应比例的位置。 - const tmpPoint = shape.getPoint(ratio); - // 返回需要变化的参数集，这里返回了位置 x 和 y - return { - x: tmpPoint.x, - y: tmpPoint.y - }; - } - }, 3000); // 一次动画的时间长度 + // Add the animation to the red circle + circle.animate((ratio) => {// Returns the properties for each frame. The input parameter ratio is a number that range from 0 to 1. The return value is an object that defines the properties for this frame + // Get the position on the edge according to the ratio + const tmpPoint = shape.getPoint(ratio); + // Return the properties of this frame, x and y for this demo + return { + x: tmpPoint.x, + y: tmpPoint.y + }; + }, { + repeat: true, // Play the animation repeatly + duration: 3000, // The duration for one animation + }); } -}, 'cubic'); // 该自定义边继承内置三阶贝塞尔曲线 cubic +}, 'cubic'); // Extend the built-in edge cubic ``` -#### 虚线运动的效果 -虚线运动的效果是通过计算线的 `lineDash` ，并在每一帧中不断修改实现。
+#### Running Dashed Line +The running dashed line is achieved by modifying the `lineDash` in every frame.
download ```javascript -// lineDash 的差值，可以在后面提供 util 方法自动计算 +// The values of the lineDash. It can be calculated by util const dashArray = [ [0,1], [0,2], @@ -278,41 +287,39 @@ const dashArray = [ ]; const lineDash = [4, 2, 1, 2]; -const interval = 9; // lineDash 的和 +const interval = 9; // The total length of the lineDash G6.registerEdge('line-dash', { afterDraw(cfg, group) { - // 获得该边的第一个图形，这里是边的 path + // Get the first graphics shape of this type of edge, which is the edge's path const shape = group.get('children')[0]; - // 获得边的 path 的总长度 + // The start point of the edge's path const length = shape.getTotalLength(); let totalArray = []; - // 计算出整条线的 lineDash + // Calculate the lineDash for the whole line for (var i = 0; i < length; i += interval) { totalArray = totalArray.concat(lineDash); } let index = 0; - // 边 path 图形的动画 - shape.animate({ - // 动画重复 - repeat: true, - // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。 - onFrame(ratio) { - const cfg = { - lineDash: dashArray[index].concat(totalArray) - }; - // 每次移动 1 - index = (index + 1) % interval; - // 返回需要修改的参数集，这里只修改了 lineDash - return cfg; - } - }, 3000); // 一次动画的时长为 3000 + // Define the animation + shape.animate((ratio) => { // Returns the properties for each frame. The input parameter ratio is a number that range from 0 to 1. The return value is an object that defines the properties for this frame + const cfg = { + lineDash: dashArray[index].concat(totalArray) + }; + // Move 1 each frame + index = (index + 1) % interval; + // Return the properties of this frame, lineDash for this demo + return cfg; + }, { + repeat: true, // Play the animation repeatly + duration: 3000, // The duration for one animation + }); // The duration for one animation } -}, 'cubic'); // 该自定义边继承了内置三阶贝塞尔曲线边 cubic +}, 'cubic'); // Extend the built-in edge cubic ``` -#### 线从无到有 -线从无到有的动画效果，同样可以通过计算 `lineDash` 来实现。
+#### A Growing Edge +A growing edge can also be implemented by calculating the `lineDash`.
download @@ -321,37 +328,35 @@ G6.registerEdge('line-growth', { afterDraw(cfg, group) { const shape = group.get('children')[0]; const length = group.getTotalLength(); - shape.animate({ - // 动画重复 - repeat: true, - // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。 - onFrame(ratio) { + shape.animate((ratio) => {// Returns the properties for each frame. The input parameter ratio is a number that range from 0 to 1. The return value is an object that defines the properties for this frame const startLen = ratio * length; - // 计算线的lineDash + // Calculate the lineDash const cfg = { lineDash: [startLen, length - startLen] }; return cfg; - } - }, 2000); // 一次动画的时长为 2000 + }, { + repeat: true, // Play the animation repeatly + duration: 2000, // The duration for one animation + }); } -}, 'cubic'); // 该自定义边继承了内置三阶贝塞尔曲线边 cubic +}, 'cubic'); // Extend the built-in edge cubic ``` -### 交互动画 -在交互的过程中也可以添加动画。如下图所示，当鼠标移到节点上时，所有与该节点相关联的边都展示虚线运动的动画。
![交互动画.gif](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-90pSrm4hkUAAAAAAAAAAABkARQnAQ)
上图完整 demo 即代码参见：[状态切换动画](/zh/examples/scatter/stateChange)。 +### Interaction Animation +G6 allows user to add animation for the interaction. As showin in the figure beow, when the mouse enters the node, the related edges will show the dashed line animation.
![交互动画.gif](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-90pSrm4hkUAAAAAAAAAAABkARQnAQ)
The code for the demo can be found in: Animation of State Changing. -这种动画涉及到了边的 [状态](/zh/docs/manual/middle/states/state)。在自定义边时复写 `setState` 方法，可对边的各种状态进行监听。鼠标移动到节点上，相关边的某个状态被开启，`setState` 方法中监听到后开启动画效果。步骤如下： +This kind of animation is related to the [State](/en/docs/manual/middle/states/state) of edge. Rewrite the function `setState` to response the state changing. When the mouse enters a node, some state of the related edges are activated. The `setState` of the edges activate the animation once it receive the state changing. The steps are: -- 自定义边中复写 `setState` 方法监听该边的状态，以及某状态下的动画效果； -- 监听中间的节点的 `mouseenter` 和 `mouseleave` 事件，触发相关边的状态变化。 +- Rewrite the `setState` in custom edge, and listen to the state changing in this function; +- Listen the `mouseenter` and `mouseleave` of the nodes to activate the state of the related edges. -下面代码节选自 demo [状态切换动画](/zh/examples/scatter/stateChange)，请注意省略了部分代码，只展示了交互相关以及边动画相关的代码。 +The code below is a part of the code in Animation of State Changing. Please note that we have omit some code to emphasize the code related to the animation. ```javascript // const data = ... // const graph = new G6.Graph({...}); -// lineDash 的差值，可以在后面提供 util 方法自动计算 +// The values of the lineDash. It can be calculated by util const dashArray = [ [0,1], [0,2], @@ -365,16 +370,16 @@ const dashArray = [ ]; const lineDash = [4, 2, 1, 2]; -const interval = 9; // lineDash 的总长度。 +const interval = 9; // The total length of the lineDash -// 注册名为 'can-running' 的边 +// Register a type of edge named 'can-running' G6.registerEdge('can-running', { - // 复写setState方法 + // Rewrite setState setState(name, value, item) { const shape = item.get('keyShape'); - // 监听 running 状态 + // Response the running state if (name === 'running') { - // running 状态为 true 时 + // When the running state is turned to be true if (value) { const length = shape.getTotalLength(); let totalArray = []; @@ -382,45 +387,43 @@ G6.registerEdge('can-running', { totalArray = totalArray.concat(lineDash); } let index = 0; - shape.animate({ - // 动画重复 - repeat: true, - // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。 - onFrame(ratio) { - const cfg = { - lineDash: dashArray[index].concat(totalArray) - }; - index = (index + 1) % interval; - return cfg; - } - }, 3000); // 一次动画的时长为 3000 - } else { // running 状态为 false 时 - // 结束动画 + shape.animate((ratio) => { // Returns the properties for each frame. The input parameter ratio is a number that range from 0 to 1. The return value is an object that defines the properties for this frame + const cfg = { + lineDash: dashArray[index].concat(totalArray) + }; + index = (index + 1) % interval; + return cfg; + }, { + repeat: true, // Play the animation repeatly + duration: 3000, // The duration for one animation + }); + } else { // When the running state is turned to be false + // Stop the animation shape.stopAnimate(); - // 清空 lineDash + // Clear the lineDash shape.attr('lineDash', null); } } } -}, 'cubic-horizontal'); // 该自定义边继承了内置横向三阶贝塞尔曲线边 cubic-horizontal +}, 'cubic-horizontal'); // Extend the built-in edge cubic-horizontal -// 监听节点的 mouseenter 事件 +// Listen the mouseenter event on node graph.on('node:mouseenter', ev => { - // 获得当前鼠标操作的目标节点 + // Get the target node of the event const node = ev.item; - // 获得目标节点的所有相关边 + // Get the related edges of the target node const edges = node.getEdges(); - // 将所有相关边的 running 状态置为 true，此时将会触发自定义节点的 setState 函数 + // Turn the running state of all the related edges to be true. The setState function will be activated now edges.forEach(edge => graph.setItemState(edge, 'running', true)); }); -// 监听节点的 mouseleave 事件 +// Listen the mouseleave event on node graph.on('node:mouseleave', ev => { - // 获得当前鼠标操作的目标节点 + // Get the target node of the event const node = ev.item; - // 获得目标节点的所有相关边 + // Get the related edges of the target node const edges = node.getEdges(); - // 将所有相关边的 running 状态置为 false，此时将会触发自定义节点的 setState 函数 + // Turn the running state of all the related edges to be false. The setState function will be activated now edges.forEach(edge => graph.setItemState(edge, 'running', false)); }); @@ -428,6 +431,6 @@ graph.on('node:mouseleave', ev => { // graph.render(); ``` -   注意： -running 为 false 时，要停止动画，同时把 lineDash 清空。 +   ⚠️Attention: +When `running` is turned to be `false`, the animation should be stopped and the `lineDash` should be cleared. diff --git a/docs/manual/advanced/animation.zh.md b/docs/manual/advanced/animation.zh.md index c90a1766e4..2b55cfea1a 100644 --- a/docs/manual/advanced/animation.zh.md +++ b/docs/manual/advanced/animation.zh.md @@ -22,21 +22,22 @@ const graph = new G6.Graph({ animate: true, // Boolean，切换布局时是否使用动画过度，默认为 false animateCfg: { duration: 500, // Number，一次动画的时长 - easing: 'linearEasing' // String，动画函数，可选项：'' + easing: 'linearEasing' // String，动画函数 } }); ``` ### easing 函数 -easing 函数是指动画的函数。例如线性插值、先快后慢等。
G6 支持所有 d3 中的动画函数。因此，上面代码中 `animateCfg` 配置中的 String 类型的 `easing` 可以取值有：
`'easeLinear'` ，
`'easePolyIn'` ，`'easePolyOut'` ， `'easePolyInOut'` ，
`'``easeQuad``'` ，`'easeQuadIn'` ，`'easeQuadOut'` ， `'easeQuadInOut'` 。 +easing 函数是指动画的函数。例如线性插值、先快后慢等。
G6 支持所有 d3.js 中的动画函数。因此，上面代码中 `animateCfg` 配置中的 String 类型的 `easing` 可以取值有：
`'easeLinear'` ，
`'easePolyIn'` ，`'easePolyOut'` ， `'easePolyInOut'` ，
`'``easeQuad``'` ，`'easeQuadIn'` ，`'easeQuadOut'` ， `'easeQuadInOut'` 。 -更多取值及所有取值含义参见：[d3 Easings](https://github.com/d3/d3/blob/master/API.md#easings-d3-ease)。 +更多取值及所有取值含义参见：d3 Easings。 ## 元素动画 由于 G6 的内置节点和边是没有动画的，需要实现节点和边上的动画需要通过[自定义节点](/zh/docs/manual/advanced/custom-node)、[自定义边](/zh/docs/manual/advanced/custom-edge)时复写 `afterDraw` 实现。 ### 节点动画 +节点上的动画，即每一帧发生变化的是节点上的某一个图形。 关于节点动画，以下面三个动画示例进行讲解： - 节点上图形的动画（如下图左）； @@ -50,14 +51,14 @@ easing 函数是指动画的函数。例如线性插值、先快后慢等。
以上三个动画节点的 demo 代码见： -[节点动画](https://codepen.io/Yanyan-Wang/pen/QWWEEWe)。 +节点动画。 #### 节点上图形的动画 -节点上的动画，即每一帧发生变化的是节点上的某一个图形。
+
download -本例实现节点放大缩小，通过 `group.get('children')[0]` 找到需要更新的图形（这里找到该节点上第 0 个图形），然后调用该图形的 `animate` 方法指定动画的参数及每一帧的变化（ `onFrame` 方法返回每一帧需要变化的参数集）。 +本例实现节点放大缩小，通过 `group.get('children')[0]` 找到需要更新的图形（这里找到该节点上第 0 个图形），然后调用该图形的 `animate` 方法指定动画的参数及每一帧的变化（ 第一个参数是返回每一帧需要变化的参数集的函数，其参数 `ratio` 是当前正在进行的一次动画的进度，范围 [0, 1]，第二个参数是动画的参数）。 ```javascript // 放大、变小动画 G6.registerNode('circle-animate', { @@ -65,21 +66,21 @@ G6.registerNode('circle-animate', { // 获取该节点上的第一个图形 const shape = group.get('children')[0]; // 该图形的动画 - shape.animate({ + shape.animate((ratio) => { // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。 + // 先变大、再变小 + const diff = ratio <=0.5 ? ratio * 10 : (1 - ratio) * 10; + let radius = cfg.size; + if (isNaN(radius)) radius = radius[0]; + // 返回这一帧需要变化的参数集，这里只包含了半径 + return { + r: radius / 2 + diff + } + }, { // 动画重复 repeat: true, - // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。 - onFrame(ratio) { - // 先变大、再变小 - const diff = ratio <=0.5 ? ratio * 10 : (1 - ratio) * 10; - let radius = cfg.size; - if (isNaN(radius)) radius = radius[0]; - // 返回这一帧需要变化的参数集，这里只包含了半径 - return { - r: radius / 2 + diff - } - } - }, 3000, 'easeCubic'); // 一次动画持续的时长为 3000，动画效果为 'easeCubic' + duration: 3000, + easing: 'easeCubic' + }); // 一次动画持续的时长为 3000，动画效果为 'easeCubic' } }, 'circle'); // 该自定义节点继承了内置节点 'circle'，除了被复写的 afterDraw 方法外，其他按照 'circle' 里的函数执行。 ``` @@ -87,7 +88,7 @@ G6.registerNode('circle-animate', { #### 增加带有动画的背景图形 在 `afterDraw` 方法中为已有节点添加额外的 shape ，并为这些新增的图形设置动画。
-本例在 `afterDraw` 方法中，绘制了三个背景 circle ，分别使用不同的颜色填充，再调用 `animate` 方法实现这三个 circle 逐渐变大、变淡的动画。本例中没有使用 `onFrame` 函数，直接在 `animate` 函数的入参中设置每次动画结束时的最终目标样式，即半径增大 10，透明度降为 0.1。
+本例在 `afterDraw` 方法中，绘制了三个背景 circle ，分别使用不同的颜色填充，再调用 `animate` 方法实现这三个 circle 逐渐变大、变淡的动画。本例中没有使用函数参数的形式，直接在 `animate` 函数的第一个参数中设置每次动画结束时的最终目标样式，即半径增大 10，透明度降为 0.1。第二个参数设置动画的配置。
download @@ -136,23 +137,35 @@ G6.registerNode('background-animate', { // 第一个背景圆逐渐放大，并消失 back1.animate({ r: r + 10, - opacity: 0.1, + opacity: 0.1 + }, { repeat: true // 循环 - }, 3000, 'easeCubic', null, 0) // 无延迟 + duration: 3000, + easing: 'easeCubic', + delay: 0 // 无延迟 + }) // 第二个背景圆逐渐放大，并消失 back2.animate({ r: r + 10, - opacity: 0.1, + opacity: 0.1 + }, { repeat: true // 循环 - }, 3000, 'easeCubic', null, 1000) // 1 秒延迟 + duration: 3000, + easing: 'easeCubic', + delay: 1000 // 1 秒延迟 + }) // 1 秒延迟 // 第三个背景圆逐渐放大，并消失 back3.animate({ r: r + 10, - opacity: 0.1, + opacity: 0.1 + }, { repeat: true // 循环 - }, 3000, 'easeCubic', null, 2000) // 2 秒延迟 + duration: 3000, + easing: 'easeCubic', + delay: 2000 // 2 秒延迟 + }) } }, 'circle'); ``` @@ -179,24 +192,23 @@ G6.registerNode('inner-animate', { } }); // 该图片 shape 的动画 - image.animate({ - // 动画重复 - repeat: true, - // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。 - onFrame(ratio) { - // 旋转通过矩阵来实现 - // 当前矩阵 - const matrix = Util.mat3.create(); - // 目标矩阵 - const toMatrix = Util.transform(matrix, [ - ['r', ratio * Math.PI * 2] - ]) ; - // 返回这一帧需要的参数集，本例中只有目标矩阵 - return { - matrix: toMatrix - }; - } - }, 3000, 'easeCubic'); + image.animate((ratio) => { // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。 + // 旋转通过矩阵来实现 + // 当前矩阵 + const matrix = Util.mat3.create(); + // 目标矩阵 + const toMatrix = Util.transform(matrix, [ + ['r', ratio * Math.PI * 2] + ]) ; + // 返回这一帧需要的参数集，本例中只有目标矩阵 + return { + matrix: toMatrix + }; + }, { + repeat: true, // 动画重复 + duration: 3000, + easing: 'easeCubic' + }); } }, 'rect'); ``` @@ -210,13 +222,13 @@ G6.registerNode('inner-animate', { download -download +download download -以上三个边动画的 demo 代码见：[边动画](https://codepen.io/Yanyan-Wang/pen/yLLJJoJ)。 +以上三个边动画的 demo 代码见：边动画。 #### 圆点运动 -本例通过在 afterDraw 方法中为边增加了一个 circle 图形，该图形沿着线运动。沿着线运动的原理：设定每一帧中，该 circle 在线上的相对位置。
+本例通过在 `afterDraw` 方法中为边增加了一个 circle 图形，该图形沿着线运动。沿着线运动的原理：设定每一帧中，该 circle 在线上的相对位置。
download @@ -239,20 +251,18 @@ G6.registerEdge('circle-running', { }); // 对红色圆点添加动画 - circle.animate({ - // 动画重复 - repeat: true, - // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。 - onFrame(ratio) { - // 根据比例值，获得在边 path 上对应比例的位置。 - const tmpPoint = shape.getPoint(ratio); - // 返回需要变化的参数集，这里返回了位置 x 和 y - return { - x: tmpPoint.x, - y: tmpPoint.y - }; - } - }, 3000); // 一次动画的时间长度 + circle.animate((ratio) => { // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。 + // 根据比例值，获得在边 path 上对应比例的位置。 + const tmpPoint = shape.getPoint(ratio); + // 返回需要变化的参数集，这里返回了位置 x 和 y + return { + x: tmpPoint.x, + y: tmpPoint.y + }; + }, { + repeat: true, // 动画重复 + duration: 3000 + }); // 一次动画的时间长度 } }, 'cubic'); // 该自定义边继承内置三阶贝塞尔曲线 cubic ``` @@ -293,20 +303,18 @@ G6.registerEdge('line-dash', { let index = 0; // 边 path 图形的动画 - shape.animate({ - // 动画重复 - repeat: true, - // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。 - onFrame(ratio) { - const cfg = { - lineDash: dashArray[index].concat(totalArray) - }; - // 每次移动 1 - index = (index + 1) % interval; - // 返回需要修改的参数集，这里只修改了 lineDash - return cfg; - } - }, 3000); // 一次动画的时长为 3000 + shape.animate((ratio) => { // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。 + const cfg = { + lineDash: dashArray[index].concat(totalArray) + }; + // 每次移动 1 + index = (index + 1) % interval; + // 返回需要修改的参数集，这里只修改了 lineDash + return cfg; + }, { + repeat: true, // 动画重复 + duration: 3000 + }); // 一次动画的时长为 3000 } }, 'cubic'); // 该自定义边继承了内置三阶贝塞尔曲线边 cubic ``` @@ -321,32 +329,30 @@ G6.registerEdge('line-growth', { afterDraw(cfg, group) { const shape = group.get('children')[0]; const length = group.getTotalLength(); - shape.animate({ - // 动画重复 - repeat: true, - // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。 - onFrame(ratio) { - const startLen = ratio * length; - // 计算线的lineDash - const cfg = { - lineDash: [startLen, length - startLen] - }; - return cfg; - } - }, 2000); // 一次动画的时长为 2000 + shape.animate((ratio) => { // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。 + const startLen = ratio * length; + // 计算线的lineDash + const cfg = { + lineDash: [startLen, length - startLen] + }; + return cfg; + }, { + repeat: true, // 动画重复 + duration: 2000 // 一次动画的时长为 2000 + }); } }, 'cubic'); // 该自定义边继承了内置三阶贝塞尔曲线边 cubic ``` ### 交互动画 -在交互的过程中也可以添加动画。如下图所示，当鼠标移到节点上时，所有与该节点相关联的边都展示虚线运动的动画。
![交互动画.gif](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-90pSrm4hkUAAAAAAAAAAABkARQnAQ)
上图完整 demo 即代码参见：[状态切换动画](/zh/examples/scatter/stateChange)。 +在交互的过程中也可以添加动画。如下图所示，当鼠标移到节点上时，所有与该节点相关联的边都展示虚线运动的动画。
![交互动画.gif](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-90pSrm4hkUAAAAAAAAAAABkARQnAQ)
上图完整 demo 即代码参见：状态切换动画。 这种动画涉及到了边的 [状态](/zh/docs/manual/middle/states/state)。在自定义边时复写 `setState` 方法，可对边的各种状态进行监听。鼠标移动到节点上，相关边的某个状态被开启，`setState` 方法中监听到后开启动画效果。步骤如下： - 自定义边中复写 `setState` 方法监听该边的状态，以及某状态下的动画效果； - 监听中间的节点的 `mouseenter` 和 `mouseleave` 事件，触发相关边的状态变化。 -下面代码节选自 demo [状态切换动画](/zh/examples/scatter/stateChange)，请注意省略了部分代码，只展示了交互相关以及边动画相关的代码。 +下面代码节选自 demo 状态切换动画，请注意省略了部分代码，只展示了交互相关以及边动画相关的代码。 ```javascript // const data = ... // const graph = new G6.Graph({...}); @@ -382,18 +388,16 @@ G6.registerEdge('can-running', { totalArray = totalArray.concat(lineDash); } let index = 0; - shape.animate({ - // 动画重复 - repeat: true, - // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。 - onFrame(ratio) { - const cfg = { - lineDash: dashArray[index].concat(totalArray) - }; - index = (index + 1) % interval; - return cfg; - } - }, 3000); // 一次动画的时长为 3000 + shape.animate((ratio) => { // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。 + const cfg = { + lineDash: dashArray[index].concat(totalArray) + }; + index = (index + 1) % interval; + return cfg; + }, { + repeat: true, // 动画重复 + duration: 3000 // 一次动画的时长为 3000 + }); } else { // running 状态为 false 时 // 结束动画 shape.stopAnimate(); @@ -428,6 +432,6 @@ graph.on('node:mouseleave', ev => { // graph.render(); ``` -   注意： -running 为 false 时，要停止动画，同时把 lineDash 清空。 +   ⚠️注意: +`running` 为 `false` 时，要停止动画，同时把 `lineDash` 清空。 diff --git a/docs/manual/advanced/create-node-group.en.md b/docs/manual/advanced/create-node-group.en.md index 19a96e9bd6..6f7ce411bc 100644 --- a/docs/manual/advanced/create-node-group.en.md +++ b/docs/manual/advanced/create-node-group.en.md @@ -1,19 +1,17 @@ --- -title: 手动创建节点分组 Group +title: Create Node Group order: 8 --- -CustomGroup 为节点分组，支持 Circle 和 Rect 两种类型。用户可通过 CustomGroup 创建节点分组、设置分组的样式、计算分组的坐标及宽高、收起和展开分组。 +By default, the Node Groups are rendered according to the data, which means G6 will find the array `groups` in the data for rendering. if the `groups` does not exist, the `groupId` in each element of `nodes` will take effect. No group will be rendered when both the `groups` and `groupId`s do not exist. -分组默认是根据数据自动渲染的，当数据中存在 `groups` 时根据 `groups` 字段渲染分组，当不存在 `groups` 时，则根据 `nodes` 数据中是否存在 `groupId` 来渲染分组。 +CustomGroup is the customized Node Group, which supports Circle and Rect type Group. You can create a Node Group by CustomGroup, and set the group style, calculate the groups, and collapse / extend groups. -当需要通过手动创建分组时候，可以参考下面的文档。 +## Instantialize the CustomGroup +The instances of CustomGroup will be created while instantiating the Graph. No manual instantiation is required. -## CustomGroup 实例化 -CustomGroup 实例会在实例化 Graph 的过程中自动创建，不需要用户手动实例化。 - -## 配置项 -在实例化 Graph 的时候，通过配置 `groupType` 和 `groupStyle` 来指定分组的类型及样式。 +## Configuration +Configure the `groupType` and `groupStyle` to assign the group type and styles respectively when instantiating the Graph. ```javascript const graph = new G6.Graph({ container: 'mountNode', @@ -29,46 +27,54 @@ const graph = new G6.Graph({ ``` ### groupType -groupType 属性用于指定分组的类型，默认为 `circle`，支持 `circle` 和 `rect`两种。 +groupType is a string indicating the type of the Node Group. Options `'circle'` and `'rect'`. `'circle'` by default. -**groupType 指定为 `circle` 时**的效果如下。
+The reuslt of **groupType: `'circle'`**
download -
**groupType 指定为 `rect` 时**的效果如下图。
+
The reuslt of **groupType: `'rect'`**
download ### groupStyle -`groupStyle` 用于指定分组在默认（default）、交互过程中（hover）及收起（collapse）状态下的样式。 +`groupStyle` indicates the styles of the Node Groups in different states, e.g. default state, hover state, and collapse state. -#### 通用属性 -default、hover 和 collapse 支持的所有通用的属性参考[属性配置项](/zh/docs/api/properties/NodeProperties)。除过这些通用的属性，default 和 collapse 分别还支持以下特有属性。 +#### Common Property +The common propertoes of the groups in the default, hover and collapse states are similar to nodes, which are introduced in [Shape Properties](/en/docs/api/shapeProperties). Besides, the group style in default and collapse states have some special properties below: #### default -| 属性名称 | 含义 | 类型 | 备注 | +| Name | Description | Type | Remark | | --- | --- | --- | --- | -| minDis | 距离右上角最小距离 | number | 不存在嵌套分组时使用该值 | -| maxDis | 距离右上角最大距离 | number | 存在嵌套分组时使用该值 | +| minDis | The padding of the Groups without nested structure | Number | No nested Group is the Group containing no other Groups | +| maxDis | Tha padding of the Groups with nested structure | Number | Nested Group is the Group containing other Groups | +The sketch about the `minDis` and `maxDis` when `groupType` is `'circle'`, where the group1 is the Group without nested structure, and the group2 is a nested Group. +
+download + + +The sketch about the `minDis` and `maxDis` when `groupType` is `'rect'`, where the group1 is the Group without nested structure, and the group2 is a nested Group. +
+download #### collapse -| 属性名称 | 含义 | 类型 | 备注 | +| Name | Description | Type | Remark | | --- | --- | --- | --- | -| r | 分组的半径 | number | 当 groupType 为 circle 时有效 | -| width | 分组宽度 | number | 当 groupType 为 rect 时有效 | -| height | 分组高度 | number | 当 groupType 为 rect 时有效 | +| r | The radius of the circle Group | Number | Takes effect when `groupType` is `'circle'` | +| width | The width of the rect Group | Number | Takes effect when `groupType` is `'rect'` | +| height | The height of the rect Group | Number | Takes effect when `groupType` is `'rect'` | ## add / addItem -用于生成分组。 +Create Group. -| 参数 | 含义 | 类型 | 备注 | +| Name | Description | Type | Remark | | --- | --- | --- | --- | -| groupId | 分组ID | string | | -| nodes | 分组中包含的节点或节点ID | array | 节点实例或节点 ID | -| type | 分组类型 | string | 默认 circle ，支持 circle 和 rect | -| zIndex | 分组层级 | number | 默认 0 | -| title | 分组标题配置 | object | string | 为 string 类型时，不能配置其他属性，为 object 时的配置参考[这里](https://www.yuque.com/antv/g6/inxeg8#07gsB) | +| groupId | The id of the Group | String | | +| nodes | The nodes or the id of the ndoes in the Group | Array | The array of node objects or ids | +| type | The type of the Group | String | Options: `'circle'`, `'rect'`. `'circle'` by default | +| zIndex | The zIndex of the Group | Number | `0` by default | +| title | The title text or the configurations | Object / String | When it is a string, the styles of it is uneditable. When it is an object, the configurations can be found in [Node Group](/en/docs/manual/middle/nodeGroup/#data-structure) | ```javascript const nodes = ['node1', 'node2'] @@ -77,9 +83,9 @@ graph.addItem('group', { nodes, type: 'rect', zIndex: 2, - title: '分组标题', + title: 'The title text', title: { - text: '分组标题', + text: 'The title text', stroke: '', fill: '', offsetX: 10, @@ -88,11 +94,11 @@ graph.addItem('group', { }) ``` ## collapseGroup -收起分组，收起分组后，隐藏分组中的所有节点和边，分组外部与分组内节点有连线的则临时连接到分组上面。 +Hide the nodes and the edges when the Group is collapsed. The edges linked to the inner nodes will link to the group; -| 参数 | 含义 | 类型 | 备注 | +| Name | Description | Type | Remark | | --- | --- | --- | --- | -| groupId | 分组ID | string | | +| groupId | The id of the Group | String | | ```javascript @@ -100,11 +106,11 @@ graph.collapseGroup('groupId') ``` ## expandGroup -展开分组，显示分组中的所有节点和边，恢复收起前的连接情况。 +The nodes and the edges will be restored when the Group is expand. -| 参数 | 含义 | 类型 | 备注 | +| Name | Description | Type | Remark | | --- | --- | --- | --- | -| groupId | 分组ID | string | | +| groupId | The id of the Group | String | | ```javascript diff --git a/docs/manual/advanced/create-node-group.zh.md b/docs/manual/advanced/create-node-group.zh.md index 19a96e9bd6..5495ad0c6f 100644 --- a/docs/manual/advanced/create-node-group.zh.md +++ b/docs/manual/advanced/create-node-group.zh.md @@ -3,9 +3,9 @@ title: 手动创建节点分组 Group order: 8 --- -CustomGroup 为节点分组，支持 Circle 和 Rect 两种类型。用户可通过 CustomGroup 创建节点分组、设置分组的样式、计算分组的坐标及宽高、收起和展开分组。 +节点分组在默认情况下是根据数据自动渲染的，当数据中存在 `groups` 时根据 `groups` 字段渲染分组，当不存在 `groups` 时，则根据 `nodes` 数据中是否存在 `groupId` 来渲染分组。当数据中即不存在 `groups`，节点数据中也不存在 `groupId` 时，将不会渲染节点分组。 -分组默认是根据数据自动渲染的，当数据中存在 `groups` 时根据 `groups` 字段渲染分组，当不存在 `groups` 时，则根据 `nodes` 数据中是否存在 `groupId` 来渲染分组。 +CustomGroup 为节点分组，支持 Circle 和 Rect 两种类型。用户可通过 CustomGroup 创建节点分组、设置分组的样式、计算分组的坐标及宽高、收起和展开分组。 当需要通过手动创建分组时候，可以参考下面的文档。 @@ -29,34 +29,42 @@ const graph = new G6.Graph({ ``` ### groupType -groupType 属性用于指定分组的类型，默认为 `circle`，支持 `circle` 和 `rect`两种。 +`groupType` 属性用于指定分组的类型，默认为 `'circle'`，支持 `'circle'` 和 `'rect'`两种。 -**groupType 指定为 `circle` 时**的效果如下。
+**groupType 指定为 `'circle'` 时**的效果如下。
download -
**groupType 指定为 `rect` 时**的效果如下图。
+
**groupType 指定为 `'rect'` 时**的效果如下图。
download ### groupStyle `groupStyle` 用于指定分组在默认（default）、交互过程中（hover）及收起（collapse）状态下的样式。 #### 通用属性 -default、hover 和 collapse 支持的所有通用的属性参考[属性配置项](/zh/docs/api/properties/NodeProperties)。除过这些通用的属性，default 和 collapse 分别还支持以下特有属性。 +default、hover 和 collapse 支持的所有通用的属性参考[图形属性](/zh/docs/api/shapeProperties)。除过这些通用的属性，default 和 collapse 分别还支持以下特有属性。 #### default | 属性名称 | 含义 | 类型 | 备注 | | --- | --- | --- | --- | -| minDis | 距离右上角最小距离 | number | 不存在嵌套分组时使用该值 | -| maxDis | 距离右上角最大距离 | number | 存在嵌套分组时使用该值 | +| minDis | 最内层（无嵌套）的 Group 的 padding | Number | 无嵌套，即该 Group 内不含有其他 Group | +| maxDis | 内嵌有其他节点分组的 Group 的 padding | Number | 嵌套 Group，即该 Group 内有其他 Group 时使用该值 | +`groupType` 指定为 `'circle'` 时的 `minDis` 与 `maxDis` 示意图。其中 group1 为无嵌套的 Group（即最内层的 Group），group2 为嵌套 Group。 +
+download + + +`groupType` 指定为 `'rect'` 时的 `minDis` 与 `maxDis` 示意图。其中 group1 为无嵌套的 Group（即最内层的 Group），group2 为嵌套 Group。 +
+download #### collapse | 属性名称 | 含义 | 类型 | 备注 | | --- | --- | --- | --- | -| r | 分组的半径 | number | 当 groupType 为 circle 时有效 | -| width | 分组宽度 | number | 当 groupType 为 rect 时有效 | -| height | 分组高度 | number | 当 groupType 为 rect 时有效 | +| r | 分组的半径 | Number | 当 `groupType` 为 `'circle'` 时有效 | +| width | 分组宽度 | Number | 当 `groupType` 为 `'rect'` 时有效 | +| height | 分组高度 | Number | 当 `groupType` 为 `'rect'` 时有效 | ## add / addItem @@ -64,11 +72,11 @@ default、hover 和 collapse 支持的所有通用的属性参考[属性配置 | 参数 | 含义 | 类型 | 备注 | | --- | --- | --- | --- | -| groupId | 分组ID | string | | -| nodes | 分组中包含的节点或节点ID | array | 节点实例或节点 ID | -| type | 分组类型 | string | 默认 circle ，支持 circle 和 rect | -| zIndex | 分组层级 | number | 默认 0 | -| title | 分组标题配置 | object | string | 为 string 类型时，不能配置其他属性，为 object 时的配置参考[这里](https://www.yuque.com/antv/g6/inxeg8#07gsB) | +| groupId | 分组 ID | String | | +| nodes | 分组中包含的节点或节点 ID | Array | 节点实例或节点 ID | +| type | 分组类型 | String | 默认 `'circle'` ，支持 `'circle'` 和 `'rect'` | +| zIndex | 分组层级 | Number | 默认 `0` | +| title | 分组标题配置 | Object / String | 为 String 类型时，不能配置其他属性，为 Object 时的配置参考[这里](/zh/docs/manual/middle/nodeGroup/#数据结构) | ```javascript const nodes = ['node1', 'node2'] @@ -92,7 +100,7 @@ graph.addItem('group', { | 参数 | 含义 | 类型 | 备注 | | --- | --- | --- | --- | -| groupId | 分组ID | string | | +| groupId | 分组 ID | String | | ```javascript @@ -104,7 +112,7 @@ graph.collapseGroup('groupId') | 参数 | 含义 | 类型 | 备注 | | --- | --- | --- | --- | -| groupId | 分组ID | string | | +| groupId | 分组 ID | String | | ```javascript diff --git a/docs/manual/advanced/custom-behavior.en.md b/docs/manual/advanced/custom-behavior.en.md index 16bfebbb42..bdd881a7a2 100644 --- a/docs/manual/advanced/custom-behavior.en.md +++ b/docs/manual/advanced/custom-behavior.en.md @@ -1,50 +1,51 @@ --- -title: 自定义交互 Behavior +title: Custom Behavior order: 5 --- -G6 除了提供丰富的 [内置交互行为 Behavior](/zh/docs/manual/middle/states/defaultBehavior) 外，还提供了自定义交互行为的机制，方便用户开发更加定制化的交互行为。 +G6 provides abundant [Built-in Behavior](/en/docs/manual/middle/states/defaultBehavior). Besides, you can custom your type of behaviors to satisfy the special requirements. -在交互行为上， G6 主要考虑了三个场景： +In G6, we mainly take three scenarios into consideration: -- 展示关系数据； -- 可视化建模； -- 图分析。 +- Demonstrating the relational data; +- Modeling the visualization; +- Analyzing the graph. -在这些场景中只要用户可能无法一眼看清楚所有需要的信息，都需要进行交互，例如： +It is necessary to incorporate the interactions when the information is too complex to be understand in one glance: -- 图太大，需要缩放； -- 单个节点上展示的信息太少，需要通过 tooltip 显示详情； -- 对节点进行增删改查。 +- Zooming a large graph; +- Utilizing the ttoltip to show the detail information of a node; +- Adding/removing/modifying/querying a graph item. -我们无法将所有常用的交互全部内置到 G6 中。由于场景不一样，业务不一样，同样的目的需要的交互都不一样： +Due to the complex and the diversity of the interactions in different scenarios and bussiness, we did not build all the interactions into G6: -- 有些系统需要从工具栏上点击后添加节点，有些系统需要从面板栏上拖出出新的节点； -- 有的业务添加边需要从锚点上拖拽出来，而有些直接点击节点后就可以拖拽出边； -- 有些边可以连接到所有节点上，而有些边不能连接到具体某个节点的某个锚点上； -- 所有的交互的触发、持续、结束都要允许能够进行个性化的判定。 +- Some systems require to add nodes by clicking a tool bar, some require toe add by dragging from a panel; +- Some scenarios add edges by dragging from an anchor point, some add by clicking the end nodes; +- Some edges are allowed to link to any node, some only can be linked to specific anchor points; +- Some users require to custom the process of activating and endding. +- ... -我们可以看到在图上的交互是繁杂多变的。各种冲突、各种配置项会让用户和开发者疲于应对。出于这些考虑， G6 提供了一套非常简单而灵活的机制来实现交互。 +We found the interactions are sundry and versatile. And the conflicts and configurations will make the users and developers collapse. Thus, G6 designs a set of simple and flexible implemention of interaction behavior. -## Behavior 的生命周期 -为实现交互，首先需要了解交互的生命周期。交互起源于用户在系统上的所有事件，是否允许交互发生同事件密切相关。所以我们看到交互的生命周期，即操作事件的过程如下： +## The Life Cycle of Behavior +To customize a Behavior, it is important to comprehend the life cycle of Behavior. Interaction Behaviors are related to the events from users, including the processes: -- 绑定事件； -- 触发事件； -- 持续事件； -- 结束事件； -- 移除事件。 +- Bind the event; +- Activate the event; +- Keep the event; +- End the event; +- Remove the event. -## 自定义交互 registerBehavior -通过 `G6.registerBehavior` 自定义 Behavior。下面代码实现了名为 `'activate-node' `的交互行为，在终端用户点击节点时，置该节点的 `active` 状态为 `true`；再次点击或点击画布时，置该节点的 `active` 状态为 `false`。 +## registerBehavior +You can customize a Behavior by `G6.registerBehavior`. The following code implements a custom Behavior named `'activate-node'`, which changes the state `active` of the clicked node to be `true`, and restores the state `active` to be `false` when the user clicking the node again or clicking the canvas. -   注意： +   ⚠️**Attension:** -- 下面代码仅设置了不同交互后节点的状态，没有指定这些状态下节点的样式。若需要根据节点状态变化它的样式，参见 [配置不同 State 样式](/zh/docs/manual/middle/states/state)。 -- 自定义 Behavior 时，可选的方法请参数 [Behavior API](/zh/docs/api/Behavior)； -- `getEvent` 返回该 Behavior 所需监听事件的对象，G6 中支持的所有事件，请参考 [Event API](/zh/docs/api/Event)。 +- The following code set the states for different behaviors, but does not assign the state styles for manipulated nodes. To change the styles when the states changed, refer to [State Styles](/en/docs/manual/middle/states/state). +- The configurations of customizing Behavior are introduced in [Behavior API](/en/docs/api/Behavior)； +- `getEvent` returns the events which are listened by the Behavior. The events in G6 are introduced in [Event API](/en/docs/api/Event). ```javascript G6.registerBehavior('activate-node', { @@ -66,21 +67,21 @@ G6.registerBehavior('activate-node', { graph.setItemState(item, 'active', false); return; } - // this 上即可取到配置，如果不允许多个active，先取消其他节点的active状态 + // Get the configurations by this. If you do not allow multiple nodes to be 'active', cancel the 'active' state for other nodes if (!this.multiple) { this.removeNodesState(); } - // 置点击的节点状态为active + // Set the 'active' state of the clicked node to be true graph.setItemState(item, 'active', true); }, onCanvasClick(e) { - // shouldUpdate可以由用户复写，返回 true 时取消所有节点的active状态 + // shouldUpdate can be rewrited by users. Returning true means turning the 'active' to be false for all the nodes if (this.shouldUpdate(e)) { removeNodesState(); } }, removeNodesState() { - graph.findAllByState('active').forEach(node => { + graph.findAllByState('node', 'active').forEach(node => { graph.setItemState(node, 'active', false); }); } @@ -88,15 +89,15 @@ G6.registerBehavior('activate-node', { ``` -## 使用自定义的 Behavior -有了上面代码定义的名为 `'activate-node'` 的 Behavior 以后，在实例化 Graph 时，在 `modes` 中将其配置到默认或其他[行为模式](/zh/docs/manual/middle/states/mode)中。下面代码将其配置到了默认行为模式中，在默认模式下，该行为将会生效。 +## Using Behavior +Now, you have a type of Behavior named `'activate-node'`. To use it, configure it into a mode of `modes` when instantiating a Graph. [Mode](/en/docs/manual/middle/states/mode). The following code configure the `'activate-node'` into the default mode, which means the `'activate-node'` Behavior will take effect in the default mode. ```javascript const graph = new G6.Graph({ container: 'mountNode', width: 500, height: 500, modes: { - // 定义的 behavior 指定到这里，就可以支持Behavior中定义的交互 + // Configure the custom Behavior here to use it default: ['activate-node'] } }); diff --git a/docs/manual/advanced/custom-behavior.zh.md b/docs/manual/advanced/custom-behavior.zh.md index 16bfebbb42..75197068d2 100644 --- a/docs/manual/advanced/custom-behavior.zh.md +++ b/docs/manual/advanced/custom-behavior.zh.md @@ -22,9 +22,10 @@ G6 除了提供丰富的 [内置交互行为 Behavior](/zh/docs/manual/middle/st - 有些系统需要从工具栏上点击后添加节点，有些系统需要从面板栏上拖出出新的节点； - 有的业务添加边需要从锚点上拖拽出来，而有些直接点击节点后就可以拖拽出边； - 有些边可以连接到所有节点上，而有些边不能连接到具体某个节点的某个锚点上； -- 所有的交互的触发、持续、结束都要允许能够进行个性化的判定。 +- 所有的交互的触发、持续、结束都要允许能够进行个性化的判定； +- …… -我们可以看到在图上的交互是繁杂多变的。各种冲突、各种配置项会让用户和开发者疲于应对。出于这些考虑， G6 提供了一套非常简单而灵活的机制来实现交互。 +我们可以看到在图上的交互是繁杂多变的。各种冲突、各种配置项会让用户和开发者疲于应对。出于这些考虑，G6 提供了一套非常简单而灵活的机制来实现交互。 ## Behavior 的生命周期 @@ -38,11 +39,11 @@ G6 除了提供丰富的 [内置交互行为 Behavior](/zh/docs/manual/middle/st ## 自定义交互 registerBehavior -通过 `G6.registerBehavior` 自定义 Behavior。下面代码实现了名为 `'activate-node' `的交互行为，在终端用户点击节点时，置该节点的 `active` 状态为 `true`；再次点击或点击画布时，置该节点的 `active` 状态为 `false`。 +通过 `G6.registerBehavior` 自定义 Behavior。下面代码实现了名为 `'activate-node'` 的交互行为，在终端用户点击节点时，置该节点的 `active` 状态为 `true`；再次点击或点击画布时，置该节点的 `active` 状态为 `false`。 -   注意： +   ⚠️注意: -- 下面代码仅设置了不同交互后节点的状态，没有指定这些状态下节点的样式。若需要根据节点状态变化它的样式，参见 [配置不同 State 样式](/zh/docs/manual/middle/states/state)。 +- 下面代码仅设置了不同交互后节点的状态，没有指定这些状态下节点的样式。若需要根据节点状态变化它的样式，参见 [配置不同 State 下的节点样式](/zh/docs/manual/middle/states/state)。 - 自定义 Behavior 时，可选的方法请参数 [Behavior API](/zh/docs/api/Behavior)； - `getEvent` 返回该 Behavior 所需监听事件的对象，G6 中支持的所有事件，请参考 [Event API](/zh/docs/api/Event)。 @@ -66,21 +67,21 @@ G6.registerBehavior('activate-node', { graph.setItemState(item, 'active', false); return; } - // this 上即可取到配置，如果不允许多个active，先取消其他节点的active状态 + // this 上即可取到配置，如果不允许多个 'active'，先取消其他节点的 'active' 状态 if (!this.multiple) { this.removeNodesState(); } - // 置点击的节点状态为active + // 置点击的节点状态 'active' 为 true graph.setItemState(item, 'active', true); }, onCanvasClick(e) { - // shouldUpdate可以由用户复写，返回 true 时取消所有节点的active状态 + // shouldUpdate 可以由用户复写，返回 true 时取消所有节点的 'active' 状态，即将 'active' 状态置为 false if (this.shouldUpdate(e)) { removeNodesState(); } }, removeNodesState() { - graph.findAllByState('active').forEach(node => { + graph.findAllByState('node', 'active').forEach(node => { graph.setItemState(node, 'active', false); }); } @@ -96,7 +97,7 @@ const graph = new G6.Graph({ width: 500, height: 500, modes: { - // 定义的 behavior 指定到这里，就可以支持Behavior中定义的交互 + // 定义的 Behavior 指定到这里，就可以支持 Behavior 中定义的交互 default: ['activate-node'] } }); diff --git a/docs/manual/advanced/custom-edge.en.md b/docs/manual/advanced/custom-edge.en.md index a322374230..5767aae3a9 100644 --- a/docs/manual/advanced/custom-edge.en.md +++ b/docs/manual/advanced/custom-edge.en.md @@ -1,23 +1,27 @@ --- -title: 自定义边 +title: Custom Edge order: 3 --- -G6 除了提供丰富的 [内置边](/zh/docs/manual/middle/elements/defaultEdge) 外，还提供了自定义边的机制，方便用户开发更加定制化的边，包括含有复杂图形的边、复杂交互的边、带有动画的边等。 +G6 provides abundant [Built-in Edges](/en/docs/manual/middle/elements/edges/defaultEdge). Besides, the custom machanism allows the users to design their own type of edges. An edge with complex graphics shapes, complex interactions, fantastic animations can be implemented easily. -在本章中我们会通过四个案例，从简单到复杂讲解边的自定义：
1. 从无到有的定义边；
2. 扩展现有边：
3. 边的交互样式；
4. 自定义带箭头的边。 +In this document, we will introduce the custom edge by four examples: +
1. Register a bran-new edge; +
2. Register an edge by extending a built-in edge; +
3. Register an edge with interactions and styles; +
4. Register an edge with custom arrow. -## 1. 从无到有定义边 -我们来实现垂直的折线：
+## 1. Register a Bran-new Edge +Now, we are goint to register a perpendicular polyline:
img img img -> （左）直线边。（中）默认的折线边。（右）调整了节点的控制点后的折线边。 +> (Left) Straight line edge. (Center) A custom polyline edge. (Right) The result after modifying the link points of the end nodes. -### 自定义边 +### Register a Custom Edge ```javascript G6.registerEdge('hvh', { draw(cfg, group) { @@ -28,8 +32,8 @@ G6.registerEdge('hvh', { stroke: '#333', path: [ ['M', startPoint.x, startPoint.y], - ['L', endPoint.x / 3 + 2 / 3 * startPoint.x , startPoint.y], // 三分之一处 - ['L', endPoint.x / 3 + 2 / 3 * startPoint.x , endPoint.y], // 三分之二处 + ['L', endPoint.x / 3 + 2 / 3 * startPoint.x , startPoint.y], // 1/3 + ['L', endPoint.x / 3 + 2 / 3 * startPoint.x , endPoint.y], // 2/3 ['L', endPoint.x, endPoint.y] ] } @@ -39,11 +43,12 @@ G6.registerEdge('hvh', { }); ``` -- 默认的 `startPoint`， `endPoint` 是两个端点中点的连接线分别同圆的交点； -- 修改节点的锚点可以修改 `startPoint` 和 `endPoint` 的位置。 +Now, we have registered a custom edge named `'hvh'` whose result is shown in the center of the figure above. The default `startPoint` and `endPoint` in the custom edge are the intersection of the edge and the end nodes. -### 示例数据 -通过以下的数据，使用自定义的 hvh 边，就可以实现上图最右边的效果。 +To achieve the result shown in the right of the figure, we modify the anchorPoints (link points) of the end nodes to change the positions of `startPoint` and `endPoint`. + +### Modify the anchorPoints in Data +Now, we modify `anchorPoints` in the node data, and then assign `shape` to `'hvh'` in edge data as shown below. ```javascript const data = { nodes: [{ @@ -82,50 +87,53 @@ const data = { }; ``` -## 2. 扩展现有边 -通过 `afterDraw` 接口给现有的曲线增加动画。 +## 2. Extend the Built-in Edge +In this section, we add animation to a built-in edge by `afterDraw`. -img +img ```javascript G6.registerEdge('line-growth', { afterDraw(cfg, group) { const shape = group.get('children')[0]; const length = shape.getTotalLength(); - shape.animate({ - onFrame(ratio) { - const startLen = ratio * length; - const cfg = { - lineDash: [startLen, length - startLen] - }; - return cfg; - }, - repeat: true - }, 2000); + shape.animate((ratio) => { + const startLen = ratio * length; + const cfg = { + lineDash: [startLen, length - startLen] + }; + return cfg; + }, { + repeat: true, + duration: 2000 + }); } }, 'cubic'); ```
-## 3. 边的交互样式 -以点击选中、鼠标 hover 到边为示例，实现如下需求： +## 3. Custom Edge with Interaction Styles +In this section, we implement a type of edge with the interaction styles below: -- 点击边时边变粗，再点击变成细； -- 鼠标移动上去变成红色，离开变成 `'#333'` 。 +- Widen the edge by clicking. Restore it by clicking again; +- Turn to red by mouse hovering. Restore it by mouse leaving. -效果如下图所示。
+The result:
img -
提示：边如果过细点击时很难击中，可以设置 `**lineAppendWidth**` 来提升击中范围。 +
+ +⚠️Attention: + when the edge is too thin to be hitted by mouse, set `lineAppendWidth` to enlarge the hitting area. ```javascript -// 基于 line 扩展出新的图形 +// Extend a new type of edge by extending line edge G6.registerEdge('custom-edge', { - // 设置状态 + // Response the states change setState(name, value, item) { const group = item.getContainer(); - const shape = group.get('children')[0]; // 顺序根据 draw 时确定 + const shape = group.get('children')[0]; // The order is determined by the ordering of been draw if(name === 'active') { if(value) { shape.attr('stroke', 'red'); @@ -143,10 +151,10 @@ G6.registerEdge('custom-edge', { } }, 'line'); -// 点击时选中，再点击时取消 +// Select by clicking, cancel by clicking again graph.on('edge:click', ev=> { const edge = ev.item; - graph.setItemState(edge, 'selected', !edge.hasState('selected')); // 切换选中 + graph.setItemState(edge, 'selected', !edge.hasState('selected')); // Switch the 'selected' state }); graph.on('edge:mouseenter' ,ev=> { @@ -163,12 +171,12 @@ graph.on('edge:mouseleave' , ev=> {
-## 4. 自定义带箭头的边 -很多时候，G6 默认提供的箭头并不能满足业务上的需求，这个时候，就需要我们自定义箭头。当然了，G6 也支持箭头样式的自定义。
+## 4. Register Edge with Custom Arrow +The default end arrows might not meet the requirements sometimes. You can register an edge with a custom arrow by the custom mechanism of G6.
img -> （左）G6 内置箭头。（右）自定义边带有自定义箭头。 +> (Left) Built-in arrow of G6. (Right) A custom edge with custom arrow. ```javascript diff --git a/docs/manual/advanced/custom-edge.zh.md b/docs/manual/advanced/custom-edge.zh.md index a322374230..f3fae8d680 100644 --- a/docs/manual/advanced/custom-edge.zh.md +++ b/docs/manual/advanced/custom-edge.zh.md @@ -3,7 +3,7 @@ title: 自定义边 order: 3 --- -G6 除了提供丰富的 [内置边](/zh/docs/manual/middle/elements/defaultEdge) 外，还提供了自定义边的机制，方便用户开发更加定制化的边，包括含有复杂图形的边、复杂交互的边、带有动画的边等。 +G6 除了提供丰富的 [内置边](/zh/docs/manual/middle/elements/edges/defaultEdge) 外，还提供了自定义边的机制，方便用户开发更加定制化的边，包括含有复杂图形的边、复杂交互的边、带有动画的边等。 在本章中我们会通过四个案例，从简单到复杂讲解边的自定义：
1. 从无到有的定义边；
2. 扩展现有边：
3. 边的交互样式；
4. 自定义带箭头的边。 @@ -15,7 +15,7 @@ G6 除了提供丰富的 [内置边](/zh/docs/manual/middle/elements/defaultEdge img img -> （左）直线边。（中）默认的折线边。（右）调整了节点的控制点后的折线边。 +> （左）直线边。（中）默认的折线边。（右）调整了节点的锚点（连入点）后的折线边。 ### 自定义边 ```javascript @@ -39,10 +39,10 @@ G6.registerEdge('hvh', { }); ``` -- 默认的 `startPoint`， `endPoint` 是两个端点中点的连接线分别同圆的交点； -- 修改节点的锚点可以修改 `startPoint` 和 `endPoint` 的位置。 +- 上面自定义边中的 `startPoint` 和 `endPoint` 分别是是边两端与起始节点和结束节点的交点； +- 可以通过修改节点的锚点（边连入点）来改变 `startPoint` 和 `endPoint` 的位置。 -### 示例数据 +### 在数据中修改 anchorPoints 通过以下的数据，使用自定义的 hvh 边，就可以实现上图最右边的效果。 ```javascript const data = { @@ -85,23 +85,23 @@ const data = { ## 2. 扩展现有边 通过 `afterDraw` 接口给现有的曲线增加动画。 -img +img ```javascript G6.registerEdge('line-growth', { afterDraw(cfg, group) { const shape = group.get('children')[0]; const length = shape.getTotalLength(); - shape.animate({ - onFrame(ratio) { - const startLen = ratio * length; - const cfg = { - lineDash: [startLen, length - startLen] - }; - return cfg; - }, - repeat: true - }, 2000); + shape.animate((ratio) => { + const startLen = ratio * length; + const cfg = { + lineDash: [startLen, length - startLen] + }; + return cfg; + }, { + repeat: true, + duration: 2000 + }); } }, 'cubic'); ``` @@ -117,12 +117,15 @@ G6.registerEdge('line-growth', { 效果如下图所示。
img -
提示：边如果过细点击时很难击中，可以设置 `**lineAppendWidth**` 来提升击中范围。 +
+⚠️注意: + +边如果过细点击时很难击中，可以设置 `lineAppendWidth` 来提升击中范围。 ```javascript -// 基于 line 扩展出新的图形 +// 基于 line 扩展出新的边 G6.registerEdge('custom-edge', { - // 设置状态 + // 响应状态变化 setState(name, value, item) { const group = item.getContainer(); const shape = group.get('children')[0]; // 顺序根据 draw 时确定 diff --git a/docs/manual/advanced/custom-layout.en.md b/docs/manual/advanced/custom-layout.en.md index f9d30f3a56..919350b7c2 100644 --- a/docs/manual/advanced/custom-layout.en.md +++ b/docs/manual/advanced/custom-layout.en.md @@ -1,64 +1,64 @@ --- -title: 自定义布局 Layout +title: Custom Layout order: 4 --- -G6 提供了一般图和树图的一些常用布局，使用方式参见：中级教程 [使用布局 Layout](/zh/docs/manual/middle/layout)，[Layout API](/zh/docs/api/Layout)。当这些内置布局无法满足需求时，G6 还提供了一般图的自定义布局的机制，方便用户进行更定制化的扩展。 +G6 provides abundant commonly used built-in layouts for Graph and TreeGraph respectively. The usage can be found in: [Utilizing Layout](/en/docs/manual/middle/layout), [Layout API](/en/docs/api/layout/Layout). Custom layout mechanism of G6 allows the users to design their own type of layout to meet their special requirements. -   注意： -树图暂时不支持自定义布局。 +   ⚠️Attention: +The TreeGraph does not support custom layout temporarily. -本文将会通过自定义 Bigraph 布局的例子讲解自定义布局。 +In this document, we will introduce the custom layout by registering a layout for Bigraph. -## 自定义布局 API -G6 中自定义布局的 API 如下： +## The API of Cumstom Layout + ```javascript /** - * 注册布局的方法 - * @param {string} type 布局类型，外部引用指定必须，不要与已有布局类型重名 - * @param {object} layout 布局方法 + * Register a Layout + * @param {string} type The layout type is must assigned to an unique string + * @param {object} layout The layout method */ Layout.registerLayout = function(type, { /** - * 定义自定义行为的默认参数，会与用户传入的参数进行合并 + * The default configurations of the custom layout. It will be mixed by the configurations from users */ getDefaultCfg() { return {}; }, /** - * 初始化 - * @param {object} data 数据 + * Initialize + * @param {object} data data */ init(data) {}, /** - * 执行布局 + * Execute the layout */ execute() {}, /** - * 根据传入的数据进行布局 + * Layout with the data * @param {object} data 数据 */ layout(data) {}, /** - * 更新布局配置，但不执行布局 - * @param {object} cfg 需要更新的配置项 + * Update the layout configurations, but do not execute the layout + * @param {object} cfg The new configurations */ updateCfg(cfg) {}, /** - * 销毁 + * Destroy */ destroy() {}, }); ``` -## 自定义布局 -下面，我们将讲解如何自定义布局如下图的二分图 Bigraph。二分图只存在两部分节点之间的边，同属于一个部分的节点之间没有边。我们希望布局能够对两部分节点分别进行排序，减少边的交叉。
+## Custom Layout +Now, we are going to register a layout for Bigraph. Bigraph is the graph with nodes divided into two parts. There will be no edges between the nodes which are belong to the same part. In the custom layout, we sort the nodes according to their topology to reduce the edge crossings.
img -该二分图数据如下，节点根据 `cluster` 字段分为 了 `'part1'` 和 `'part2'`，代表二分图的两部分。 +The data of the Bigraph is shown below, where the nodes are divided into `'part1'` and `'part2'` by the property `cluster`. ```javascript const data = { nodes: [ @@ -91,32 +91,32 @@ const data = { }; ``` -### 需求分析 -为了减少边的交叉，可以通过排序，将 `'part1'` 的节点 A 对齐到所有与 A 相连的 `'part2'` 中的节点的平均中心；同样将 `'part2'` 中的节点 a 对齐到所有与 a 相连的 `'part1'` 中的节点的平均中心。可以描述成如下过程： +### Requirements Analysis +To reduce the edge crossings, we sort the nodes in `part1` and `part2` respectively. The process is: -- Step 1：为 `'part1'` 和 `'part2'` 的节点初始化随机序号 index，都分别从 0 开始； -- Step 2：遍历 `'part1'` 的节点，对每一个节点 A： - - 找到与 A 相连的属于 `'part2'` 的节点的集合 ![]( https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-WOhQIGg9l8AAAAAAAAAAABkARQnAQ)，加和 ![]( https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-WOhQIGg9l8AAAAAAAAAAABkARQnAQ) 中所有节点的 index，并除以 ![]( https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-WOhQIGg9l8AAAAAAAAAAABkARQnAQ) 的元素个数，得数覆盖 A 的 index 值：![](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*VfXiSK1f02cAAAAAAAAAAABkARQnAQ) -- Step 3：遍历 `'part1'` 的节点，对每一个节点 B（与 Step 2 相似）： - - 找到与 B 相连的属于 `'part2'` 的节点的集合 ![](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*GqZiSKI-nB8AAAAAAAAAAABkARQnAQ)，加和 ![](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*GqZiSKI-nB8AAAAAAAAAAABkARQnAQ) 中所有节点的 index，并除以 ![](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*GqZiSKI-nB8AAAAAAAAAAABkARQnAQ) 的元素个数，得数覆盖 B 的 index 值：![](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-8b2Spfb4HIAAAAAAAAAAABkARQnAQ) -- Step 4：两部分节点分别按照节点的序号 index 进行排序，最终按照节点顺序安排节点位置。 +- Step 1: Assign the index from 0 randomly for the nodes in `'part1'` and `'part2'` respectively; +- Step 2: Traverse the nodes in `'part1'`. For each node A: + - Find the set of related nodes of A (connect to A directly) in `'part2'` ![]( https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-WOhQIGg9l8AAAAAAAAAAABkARQnAQ). Sum up the indexes of the nodes in ![]( https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-WOhQIGg9l8AAAAAAAAAAABkARQnAQ), and divided it by the number of elements in ![]( https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-WOhQIGg9l8AAAAAAAAAAABkARQnAQ). Replace the index of A by the result: ![](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*VfXiSK1f02cAAAAAAAAAAABkARQnAQ) +- Step 3: Tranverse the nodes in `'part2'`. For each node A(Similar to the Step 2): + - Find the set of related nodes of B (connect to B directly) in `'part1'` ![](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*GqZiSKI-nB8AAAAAAAAAAABkARQnAQ). Sum up the indexes of the nodes in ![](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*GqZiSKI-nB8AAAAAAAAAAABkARQnAQ), and divided it by the number of elements in ![](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*GqZiSKI-nB8AAAAAAAAAAABkARQnAQ). Replace the index of A by the result: ![](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-8b2Spfb4HIAAAAAAAAAAABkARQnAQ) +- Step 4: Sort the nodes in `part1` and `part2` respectively according to their indexed. The result order determine the postions of the nodes in the final layout. -## 实现 -下面代码展示了自定义名为 `'bigraph-layout'` 的二分图布局，完整代码参见：[自定义布局-二分图](/zh/examples/net/layoutMechanism#customBigraph)。使用该布局的方式与使用内置布局方式相同，都是在实例化图时将其配置到 `layout` 配置项中，详见：[使用布局 Layout](/zh/docs/manual/middle/layout)。 +## Implementation +The following code below register a layout named `'bigraph-layout'` for Bigraph. The complete code can be found in: Cusom Layout-Bigraph. The usage of custom layout is the same as built-in layouts: configure the `layout` to the graph when instantiating. Refer to: [Utilizing Layout](/en/docs/manual/middle/layout). ```javascript G6.registerLayout('bigraph-layout', { - // 默认参数 + // Default configurations getDefaultCfg: function getDefaultCfg() { return { - center: [0, 0], // 布局的中心 - biSep: 100, // 两部分的间距 - nodeSep: 20, // 同一部分的节点艰巨 - direction: 'horizontal', // 两部分的分布方向 - nodeSize: 20 // 节点大小 + center: [0, 0], // The center of the layout + biSep: 100, // The separation of these two parts + nodeSep: 20, // The separation between nodes in the same part + direction: 'horizontal', // The direction of the two parts + nodeSize: 20 // The node size }; }, - // 执行布局 + // Execute the layout execute: function execute() { var self = this; var center = self.center; @@ -125,7 +125,7 @@ G6.registerLayout('bigraph-layout', { var nodeSize = self.nodeSize; var part1Pos = 0, part2Pos = 0; - // 若指定为横向分布 + // Layout the graph in horizontally if (self.direction === 'horizontal') { part1Pos = center[0] - biSep / 2; part2Pos = center[0] + biSep / 2; @@ -136,7 +136,7 @@ G6.registerLayout('bigraph-layout', { var part2Nodes = []; var part1NodeMap = new Map(); var part2NodeMap = new Map(); - // separate the nodes and init the positions + // Separate the nodes and init the positions nodes.forEach(function(node, i) { if (node.cluster === 'part1') { part1Nodes.push(node); @@ -147,7 +147,7 @@ G6.registerLayout('bigraph-layout', { } }); - // 对 part1 的节点进行排序 + // Sort the nodes in part1 part1Nodes.forEach(function(p1n) { var index = 0; var adjCount = 0; @@ -169,7 +169,7 @@ G6.registerLayout('bigraph-layout', { return a.index - b.index; }); - // 对 part2 的节点进行排序 + // Sort the nodes in part2 part2Nodes.forEach(function(p2n) { var index = 0; var adjCount = 0; @@ -191,7 +191,7 @@ G6.registerLayout('bigraph-layout', { return a.index - b.index; }); - // 放置节点 + // Place the ndoes var hLength = part1Nodes.length > part2Nodes.length ? part1Nodes.length : part2Nodes.length; var height = hLength * (nodeSep + nodeSize); var begin = center[1] - height / 2; diff --git a/docs/manual/advanced/custom-layout.zh.md b/docs/manual/advanced/custom-layout.zh.md index f9d30f3a56..b8181ade75 100644 --- a/docs/manual/advanced/custom-layout.zh.md +++ b/docs/manual/advanced/custom-layout.zh.md @@ -3,9 +3,9 @@ title: 自定义布局 Layout order: 4 --- -G6 提供了一般图和树图的一些常用布局，使用方式参见：中级教程 [使用布局 Layout](/zh/docs/manual/middle/layout)，[Layout API](/zh/docs/api/Layout)。当这些内置布局无法满足需求时，G6 还提供了一般图的自定义布局的机制，方便用户进行更定制化的扩展。 +G6 提供了一般图和树图的一些常用布局，使用方式参见：中级教程 [使用布局 Layout](/zh/docs/manual/middle/layout)，[Layout API](/zh/docs/api/layout/Layout)。当这些内置布局无法满足需求时，G6 还提供了一般图的自定义布局的机制，方便用户进行更定制化的扩展。 -   注意： +   ⚠️注意: 树图暂时不支持自定义布局。 本文将会通过自定义 Bigraph 布局的例子讲解自定义布局。 @@ -97,12 +97,12 @@ const data = { - Step 1：为 `'part1'` 和 `'part2'` 的节点初始化随机序号 index，都分别从 0 开始； - Step 2：遍历 `'part1'` 的节点，对每一个节点 A： - 找到与 A 相连的属于 `'part2'` 的节点的集合 ![]( https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-WOhQIGg9l8AAAAAAAAAAABkARQnAQ)，加和 ![]( https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-WOhQIGg9l8AAAAAAAAAAABkARQnAQ) 中所有节点的 index，并除以 ![]( https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-WOhQIGg9l8AAAAAAAAAAABkARQnAQ) 的元素个数，得数覆盖 A 的 index 值：![](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*VfXiSK1f02cAAAAAAAAAAABkARQnAQ) -- Step 3：遍历 `'part1'` 的节点，对每一个节点 B（与 Step 2 相似）： - - 找到与 B 相连的属于 `'part2'` 的节点的集合 ![](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*GqZiSKI-nB8AAAAAAAAAAABkARQnAQ)，加和 ![](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*GqZiSKI-nB8AAAAAAAAAAABkARQnAQ) 中所有节点的 index，并除以 ![](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*GqZiSKI-nB8AAAAAAAAAAABkARQnAQ) 的元素个数，得数覆盖 B 的 index 值：![](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-8b2Spfb4HIAAAAAAAAAAABkARQnAQ) +- Step 3：遍历 `'part2'` 的节点，对每一个节点 B（与 Step 2 相似）： + - 找到与 B 相连的属于 `'part1'` 的节点的集合 ![](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*GqZiSKI-nB8AAAAAAAAAAABkARQnAQ)，加和 ![](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*GqZiSKI-nB8AAAAAAAAAAABkARQnAQ) 中所有节点的 index，并除以 ![](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*GqZiSKI-nB8AAAAAAAAAAABkARQnAQ) 的元素个数，得数覆盖 B 的 index 值：![](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-8b2Spfb4HIAAAAAAAAAAABkARQnAQ) - Step 4：两部分节点分别按照节点的序号 index 进行排序，最终按照节点顺序安排节点位置。 ## 实现 -下面代码展示了自定义名为 `'bigraph-layout'` 的二分图布局，完整代码参见：[自定义布局-二分图](/zh/examples/net/layoutMechanism#customBigraph)。使用该布局的方式与使用内置布局方式相同，都是在实例化图时将其配置到 `layout` 配置项中，详见：[使用布局 Layout](/zh/docs/manual/middle/layout)。 +下面代码展示了自定义名为 `'bigraph-layout'` 的二分图布局，完整代码参见：自定义布局-二分图。使用该布局的方式与使用内置布局方式相同，都是在实例化图时将其配置到 `layout` 配置项中，详见：[使用布局 Layout](/zh/docs/manual/middle/layout)。 ```javascript G6.registerLayout('bigraph-layout', { @@ -111,7 +111,7 @@ G6.registerLayout('bigraph-layout', { return { center: [0, 0], // 布局的中心 biSep: 100, // 两部分的间距 - nodeSep: 20, // 同一部分的节点艰巨 + nodeSep: 20, // 同一部分的节点间距 direction: 'horizontal', // 两部分的分布方向 nodeSize: 20 // 节点大小 }; diff --git a/docs/manual/advanced/custom-node.en.md b/docs/manual/advanced/custom-node.en.md index a97bcb0ea4..eb321aa20f 100644 --- a/docs/manual/advanced/custom-node.en.md +++ b/docs/manual/advanced/custom-node.en.md @@ -1,26 +1,31 @@ --- -title: 自定义节点 +title: Custom Node order: 2 --- -G6 提供了一系列[内置节点](/zh/docs/manual/middle/elements/defaultNode)，包括 [circle](/zh/docs/manual/middle/elements/nodes/circle)、[rect](https://www.yuque.com/antv/g6/vdqpdt)、[ellipse](/zh/docs/manual/middle/elements/nodes/ellipse)、[diamond](/zh/docs/manual/middle/elements/nodes/diamond)、[triangle](/zh/docs/manual/middle/elements/nodes/triangle)、[star](/zh/docs/manual/middle/elements/nodes/star)、[image](/zh/docs/manual/middle/elements/nodes/image)、[modelRect](/zh/docs/manual/middle/elements/nodes/modelRect)。若内置节点无法满足需求，用户还可以通过 `G6.registerNode('nodeName', options)` 进行自定义节点，方便用户开发更加定制化的节点，包括含有复杂图形的节点、复杂交互的节点、带有动画的节点等。 +G6 provides abundant [Built-in Nodes](/en/docs/manual/middle/elements/nodes/defaultNode), including [circle](/en/docs/manual/middle/elements/nodes/circle), [rect](/en/docs/manual/middle/elements/nodes/rect, [ellipse](/en/docs/manual/middle/elements/nodes/ellipse), [diamond](/en/docs/manual/middle/elements/nodes/diamond), [triangle](/en/docs/manual/middle/elements/nodes/triangle), [star](/en/docs/manual/middle/elements/nodes/star), [image](/en/docs/manual/middle/elements/nodes/image), [modelRect](/en/docs/manual/middle/elements/nodes/modelRect). Besides, the custom machanism allows the users to design their own type of nodes by `G6.registerNode('nodeName', options)`. A node with complex graphics shapes, complex interactions, fantastic animations can be implemented easily. -在本章中我们会通过四个案例，从简单到复杂讲解节点的自定义。这四个案例是： -
-1. 从无到有的定义节点：绘制图形；优化性能。 -
-2. 扩展现有的节点：附加图形；增加动画。 -
-3. 调整节点的锚点； -
-4. 调整节点的鼠标选中/悬浮样式。样式变化响应；动画响应。 +In this document, we will introduce the custom enodeby four examples: +
1. Register a bran-new edge; +
2. Register an edge by extending a built-in edge; +
3. Register an edge with interactions and styles; +
4. Register an edge with custom arrow. -通过 [图形 Shape](/zh/docs/manual/middle/keyConcept) 章节的学习，我们应该已经知道了自定义节点时需要满足以下两点： +
+1. Register a bran-new node: Draw the graphics; Optimize the performance. +
+2. Register a node by extending a built-in node: Add extra graphics shape; Add animation. +
+3. Adjust the anchorPoints(link points); +
+4. Register a node with state styles: Response the states change by styles and animations -- 控制节点的生命周期； -- 解析用户输入的数据，在图形上展示。 +As stated in [Shape](/en/docs/manual/middle/keyconcept/shape-keyshape), there are two points should be satisfied when customize a node: -G6 中自定义节点的 API 如下： +- Controll the life cycle of the node; +- Analyze the input data and show it by graphics. + +The API of cumstom node: ```javascript G6.registerNode('nodeName', { options: { @@ -31,83 +36,83 @@ G6.registerNode('nodeName', { } }, /** - * 绘制节点/边，包含文本 - * @param {Object} cfg 节点的配置项 - * @param {G.Group} group 节点的容器 - * @return {G.Shape} 绘制的图形，通过node.get('keyShape') 可以获取到 + * Draw the node with label + * @param {Object} cfg The configurations of the node + * @param {G.Group} group The container of the node + * @return {G.Shape} The keyShape of the node. It can be obtained by node.get('keyShape') */ draw(cfg, group) {}, /** - * 绘制后的附加操作，默认没有任何操作 - * @param {Object} cfg 节点的配置项 - * @param {G.Group} group 节点的容器 + * The extra operations after drawing the node. There is no operation in this function by default + * @param {Object} cfg The configurations of the node + * @param {G.Group} group The container of the node */ afterDraw(cfg, group) {}, /** - * 更新节点，包含文本 + * Update the node and its label * @override - * @param {Object} cfg 节点的配置项 - * @param {Node} node 节点 + * @param {Object} cfg The configurations of the node + * @param {Node} node The node item */ update(cfg, node) {}, /** - * 更新节点后的操作，一般同 afterDraw 配合使用 + * The operations after updating the node. It is combined with afterDraw generally * @override - * @param {Object} cfg 节点的配置项 - * @param {Node} node 节点 + * @param {Object} cfg The configurations of the node + * @param {Node} node The node item */ afterUpdate(cfg, node) {}, /** - * 设置节点的状态，主要是交互状态，业务状态请在 draw 方法中实现 - * 单图形的节点仅考虑 selected、active 状态，有其他状态需求的用户自己复写这个方法 - * @param {String} name 状态名称 - * @param {Object} value 状态值 - * @param {Node} node 节点 + * Response the node states change. Mainly the interaction states. The business states should be handled in the draw function + * The states 'selected' and 'active' will be responsed on keyShape by default. To response more states, implement this function. + * @param {String} name The name of the state + * @param {Object} value The value of the state + * @param {Node} node The node item */ setState(name, value, node) {}, /** - * 获取控制点 - * @param {Object} cfg 节点、边的配置项 - * @return {Array|null} 控制点的数组,如果为 null，则没有控制点 + * Get the anchorPoints(link points for related edges) + * @param {Object} cfg The configurations of the node + * @return {Array|null} The array of anchorPoints(link points for related edges). Null means there are no anchorPoints */ getAnchorPoints(cfg) {} }, extendNodeName); ``` -   注意： +   ⚠️Attention: -- 如果不从任何现有的节点扩展新节点时，`draw` 方法是必须的； -- `update` 方法可以不定义，数据更新时会走 draw 方法，所有图形清除重绘； -- `afterDraw`，`afterUpdate` 方法一般用于扩展已有的节点/和边，例如：在矩形上附加图片，线上增加动画等； -- `setState` 方法一般也不需要复写，有全局的样式可以替换； -- `getAnchorPoints` 方法仅在需要限制与边的连接点时才需要复写，也可以在数据中直接指定。 +- `draw` is required if the custom node does not extend any parent; +- `update` is not required. If it is undefined, the `draw` will be called when updating the node, which means all the graphics will be cleared and repaint; +- `afterDraw` and `afterUpdate` are used for extending the exited nodes in general. e.g. adding extra image on rect node, adding animation on a circle node, ...; +- In general, `setState` is not required; +- `getAnchorPoints` is only required when you want to contrain the link points for nodes and their related edges. The anchorPoints can be assigned in the node data as well. -## 1. 从无到有定义节点 -### 绘制图形 -我们自己来实现一个菱形的节点，如下图所示。 -> G6 有内置的菱形节点 diamond。为了演示，这里实现了一个自定义的菱形，相当于复写了内置的 diamond。 +## 1. Register a Bran-new Edge +### Render the Node +Now, we are going to register a diamond node: +> Although there is a built-in diamond node in G6, we implement it here to rewrite it for demonstration. img ```javascript G6.registerNode('diamond', { draw(cfg, group) { - // 如果 cfg 中定义了 style 需要同这里的属性进行融合 + // If there is style object in cfg, it should be mixed here const shape = group.addShape('path', { attrs: { - path: this.getPath(cfg), // 根据配置获取路径 - stroke: cfg.color // 颜色应用到边上，如果应用到填充，则使用 fill: cfg.color + path: this.getPath(cfg), // Get the path by cfg + stroke: cfg.color // Apply the color to the stroke. For filling, use fill: cfg.color instead } }); - if(cfg.label) { // 如果有文本 - // 如果需要复杂的文本配置项，可以通过 labeCfg 传入 + if(cfg.label) { // If the label exists + // The complex label configurations can be defined by labeCfg // const style = (cfg.labelCfg && cfg.labelCfg.style) || {}; // style.text = cfg.label; group.addShape('text', { // attrs: style attrs: { - x: 0, // 居中 + x: 0, // center y: 0, textAlign: 'center', textBaseline: 'middle', @@ -118,34 +123,34 @@ G6.registerNode('diamond', { } return shape; }, - // 返回菱形的路径 + // Return the path of a diamond getPath(cfg) { - const size = cfg.size || [40, 40]; // 如果没有 size 时的默认大小 + const size = cfg.size || [40, 40]; const width = size[0]; const height = size[1]; // / 1 \ // 4 2 // \ 3 / const path = [ - ['M', 0, 0 - height / 2], // 上部顶点 - ['L', width / 2, 0], // 右侧顶点 - ['L', 0, height / 2], // 下部顶点 - ['L', - width / 2, 0], // 左侧顶点 - ['Z'] // 封闭 + ['M', 0, 0 - height / 2], // Top + ['L', width / 2, 0], // Right + ['L', 0, height / 2], // Bottom + ['L', - width / 2, 0], // Left + ['Z'] // Close the path ]; return path; }, }); ``` -上面的代码自定义了一个菱形节点，然后我们使用下面的数据输入就会绘制出 diamond 这个节点。 +We have registered a dimond node. The following code use the diamond node: ```javascript const data = { nodes: [ - {x: 50, y: 100, shape: 'diamond'}, // 最简单的 - {x: 150, y: 100, shape: 'diamond', size: [50, 100]}, // 添加宽高 - {x: 250, y: 100, color: 'red', shape: 'diamond'}, // 添加颜色 - {x: 350, y: 100, label: '菱形', shape: 'diamond'} // 附加文本 + {x: 50, y: 100, shape: 'diamond'}, // The simplest form + {x: 150, y: 100, shape: 'diamond', size: [50, 100]}, // Add the size + {x: 250, y: 100, color: 'red', shape: 'diamond'}, // Add the color + {x: 350, y: 100, label: '菱形', shape: 'diamond'} // Add the label ] }; const graph = new G6.Graph({ @@ -159,49 +164,47 @@ graph.render(); img -### 优化性能 -当图中节点或边通过 `graph.update(item, cfg)` 重绘时，默认情况下会调用节点的 `draw` 方法进行重新绘制。在数据量大或节点上图形数量非常多（特别是文本多）的情况下，`draw` 方法中对所有图形、赋予样式将会非常消耗性能。 +### Optimize the Performance +When the nodes or edges are updated by `graph.update(item, cfg)`, the `draw` will be called for repainting. But in the situation with large amount of data (especially the text), repainting all the graphics shapes by `draw` has bad performance. -在自定义节点时，重写 `update` 方法，在更新时将会调用该方法替代 `draw`。我们可以在该方法中指定需要更新的图形，从而避免频繁调用 `draw` 、全量更新节点上的所有图形。当然，`update` 方法是可选的，如果没有性能优化的需求可以不重写该方法。 +Therefore, rewrite the `update` function when registering a node for partial repainting is necessary. We can repaint some of the graphics shapes instead of all the graphis by `update`. The `update` is not required if you have no performance problem. -在实现 diamond 的过程中，重写 `update` 方法，找到需要更新的 shape 进行更新，从而优化性能。寻找需要更新的图形可以通过： +To update a few graphics shapes of a node in `update`, you need find the graphics shapes to be updated frist: -- `group.get('children')[0]` 找到 [关键图形 keyShape](/zh/docs/manual/middle/keyConcept)，也就是 `draw` 方法返回的 shape； -- `group.get('children')[1]` 找到 label 图形。 +- Find the [keyShape](/en/docs/manual/middle/keyconcept/shape-keyshape#keyshape) by `group.get('children')[0]`, which is the return value of `draw`; +- Find the graphics shape of label by `group.get('children')[1]`. -下面代码仅更新了 diamond 的关键图形的路径和颜色。 +The code shown below update the path and the color of the keyShape of the diamond: ```javascript G6.registerNode('diamond', { draw(cfg, group) { - // ... // 见前面代码 + // ... // Same as the code above }, getPath(cfg) { - // ... // 见前面代码 + // ... // Same as the code above }, update(cfg, node) { - const group = node.getContainer(); // 获取容器 - const shape = group.get('children')[0]; // 按照添加的顺序 + const group = node.getContainer(); // Get the container of the node + const shape = group.get('children')[0]; // Find the first graphics shape of the node. It is determined by the order of being added const style = { path: this.getPath(cfg), stroke: cfg.color }; - shape.attr(style); // 更新属性 - // 更新文本的逻辑类似，但是需要考虑 cfg.label 是否存在的问题 - // 通过 label.attr() 更新文本属性即可 + shape.attr(style); // Update } }); ``` -## 2. 扩展现有节点 -### 扩展 Shape -G6 中已经[内置了一些节点](/zh/docs/manual/middle/elements/defaultNode)，如果用户仅仅想对现有节点进行调整，复用原有的代码，则可以基于现有的节点进行扩展。同样实现 diamond ，可以基于 circle、ellipse、rect 等内置节点的进行扩展。[simple-shape](https://github.com/antvis/g6/blob/master/src/shape/single-shape-mixin.js) 是这些内置节点图形的基类，也可以基于它进行扩展。 +## 2. Extend a Built-in Node +### Extend the Shape +There are several [Built-in Nodes](/en/docs/manual/middle/elements/nodes/defaultNode) in G6. You can extend them to make some modification on them. It is similar to register the diamond node. single-shape is the base class of all the graphics shape, you can also extend it. -下面以基于 single-shape 为例进行扩展。`draw`，`update`，`setState` 方法在 [simple-shape ](https://github.com/antvis/g6/blob/master/src/shape/single-shape-mixin.js)中都有实现，这里仅需要复写 `getShapeStyle` 方法即可。返回的对象中包含自定义图形的路径和其他样式。 +For example, we are going to extend the single-shape. `draw`, `update`, and `setState` have been implemented in the single-shape. Thus, we only rewrite the `getShapeStyle`, which returns the path and the styles of graphics shapes. ```javascript G6.registerNode('diamond', { - shapeType: 'path', // group.addShape 时需要指定的类型 + shapeType: 'path', // It is required when the shape inherits from 'single-shape', not required otherwise getShapeStyle(cfg) { - const size = this.getSize(cfg); // 转换成 [width, height] 的模式 + const size = this.getSize(cfg); // translate to [width, height] const color = cfg.color; const width = size[0]; const height = size[1]; @@ -209,11 +212,11 @@ G6.registerNode('diamond', { // 4 2 // \ 3 / const path = [ - ['M', 0, 0 - height / 2], // 上部顶点 - ['L', width / 2, 0], // 右侧顶点 - ['L', 0, height / 2], // 下部顶点 - ['L', - width / 2, 0], // 左侧顶点 - ['Z'] // 封闭 + ['M', 0, 0 - height / 2], // Top + ['L', width / 2, 0], // Right + ['L', 0, height / 2], // Bottom + ['L', - width / 2, 0], // Left + ['Z'] // Close the path ]; const style = Util.mix({}, { path: path, @@ -222,27 +225,25 @@ G6.registerNode('diamond', { return style; } }, -// 注意这里继承了 'single-shape' +// Extend the 'single-shape' 'single-shape'); ``` -### 添加动画 -通过 `afterDraw` 同样可以实现扩展，下面我们来看一个节点的动画场景，如下图所示。
+### Add Animation +We are going to add animation by `afterDraw` in this section. The result:
img -上面的动画效果，可以通过以下方式实现： - -- 扩展内置的 rect，在 rect 中添加一个图形； -- 反复执行新添加图形的旋转动画。 +- Extend the built-in rect node, and add a graphics shape in the rect; +- Execute the animation repeatly. ```javascript -// 自定义一个名为 inner-animate 的节点 +// Register a type of custom node named inner-animate G6.registerNode('inner-animate', { afterDraw(cfg, group) { const size = cfg.size; const width = size[0] - 14; const height = size[1] - 14; - // 添加图片 + // Add an image shape const image = group.addShape('image', { attrs: { x: - width / 2, @@ -252,49 +253,50 @@ G6.registerNode('inner-animate', { img: cfg.img } }); - // 执行旋转动画 - image.animate({ - onFrame(ratio) { - const matrix = Util.mat3.create(); - const toMatrix = Util.transform(matrix, [ - ['r', ratio * Math.PI * 2] - ]) ; - return { - matrix: toMatrix - }; - }, - repeat: true - }, 3000, 'easeCubic'); + // Execute the animation + image.animate((ratio) => { + const matrix = Util.mat3.create(); + const toMatrix = Util.transform(matrix, [ + ['r', ratio * Math.PI * 2] + ]) ; + return { + matrix: toMatrix + }; + }, { + repeat: true, + duration: 3000, + easing: 'easeCubic' + }); } }, -// 继承了 rect 节点 +// Extend the rect node 'rect'); ``` -更多关于动画的实现，请参考[基础动画](/zh/docs/manual/advanced/animation)章节。 +For more information about animation, please refer to [Basic Ainmation](/en/docs/manual/advanced/animation).
-## 3. 调整锚点 anchorPoint -节点上的[锚点 anchorPoint](/zh/docs/manual/middle/keyConcept) 作用是**确定节点与边的相交的位置**，看下面的场景：
+## 3. Adjust the anchorPoint +The [anchorPoint](/en/docs/manual/middle/keyconcept/anchorpoint) of a node is **the intersection of the node and its related edges**.
img img -> （左）没有设置锚点时。（右）diamond 设置了锚点后。 +> (Left) The diamond node has no anchorPoints. (Right) The diamond node has anchorPoints. -有两种方式来调整节点上的锚点： +There are two ways to adjust the anchorPoints of the node: -- 在数据里面指定 `anchorPoints`。 +- Configure the `anchorPoints` in the data. -      **适用场景：**可以为不同节点配置不同的锚点，更定制化。 +      **Applicable Scene:** Assign different anchorPoints for different nodes. -- 自定义节点中通过 `getAnchorPoints` 方法指定锚点。 +- Assign `getAnchorPoints` when registering a custom node. -      **适用场景：**全局配置锚点，所有该自定义节点类型的节点都相同。 +      **Applicable Scene:** Configure the anchorPoints globally for this type of node. -### 数据中指定锚点 +### Configure the anchorPoints in Data ```javascript const data = { nodes: [{ @@ -302,49 +304,49 @@ const data = { x: 100, y: 100, anchorPoints: [ - [0, 0.5], // 左侧中间 - [1, 0.5] // 右侧中间 + [0, 0.5], // The center of the left border + [1, 0.5] // The center of the right border ]}, - //... // 其他节点 + //... // Other nodes ], edges: [ - //... // 边 + //... // Other edges ] }; ``` -### 自定义时指定锚点 +### Assign anchorPoints When Registering Node ```javascript G6.registerNode('diamond', { - //... // 其他方法 + //... // Other functions getAnchorPoints() { return [ - [0, 0.5], // 左侧中间 - [1, 0.5] // 右侧中间 + [0, 0.5], // The center of the left border + [1, 0.5] // The center of the right border ] } }, 'rect'); ``` -## 4. 调整状态样式 -常见的交互都需要节点和边通过样式变化做出反馈，例如鼠标移动到节点上、点击选中节点/边、通过交互激活边上的交互等，都需要改变节点和边的样式，有两种方式来实现这种效果： +## 4. Register Node with State Styles +In general, nodes and edges should response the states change by styles chaging. For example, highlight the node or edge clicked/hovered by user. We can achieve it by two ways: -1. 在数据上添加标志字段，在自定义 shape 过程中根据约定进行渲染； -1. 将交互状态同原始数据和绘制节点的逻辑分开，仅更新节点。 +1. Add a flag on the node data, control the style according to the flag in `draw` when registering a custom node; +2. Separate the interactive states from source data and `draw`, update the node only. -我们推荐用户使用第二种方式来实现节点的状态调整，可以通过以下方式来实现： +We recommend adjust the state styles by the second way, which can be achieved by: -- 在 G6 中自定义节点/边时在 `setState` 方法中进行节点状态的设置； -- 通过 `graph.setItemState()` 方法来设置状态。 +- Response the states in `setState` function when registering a node/edge; +- Set/change the state by `graph.setItemState()`. -基于 rect 扩展出一个 custom 图形，默认填充色为白色，当鼠标点击时变成红色，实现这一效果的示例代码如下： +Based on rect node, we extend a custom node with white filling. It will be turned to red when the mouse clicks it. Implement it by the code below: ```javascript -// 基于 rect 扩展出新的图形 +// Extend rect G6.registerNode('custom', { - // 设置状态 + // Response the states setState(name, value, item) { const group = item.getContainer(); - const shape = group.get('children')[0]; // 顺序根据 draw 时确定 + const shape = group.get('children')[0]; // Find the first graphics shape of the node. It is determined by the order of being added if(name === 'selected') { if(value) { shape.attr('fill', 'red'); @@ -355,28 +357,30 @@ G6.registerNode('custom', { } }, 'rect'); -// 点击时选中，再点击时取消 +// Click to select, cancel by clicking again graph.on('node:click', ev=> { const node = ev.item; - graph.setItemState(node, 'selected', !node.hasState('selected')); // 切换选中 + graph.setItemState(node, 'selected', !node.hasState('selected')); // Switch the selected state }); ``` -G6 并未限定节点的状态，只要你在 `setState` 方法中进行处理你可以实现任何交互，如实现鼠标放到节点上后节点逐渐变大的效果。
+G6 does not limit the states for nodes/edges, you can assign any states to a node once you response it in the `setState` function. e.g. magnify the node by hovering:
img ```javascript G6.registerNode('custom', { - // 设置状态 + // Response the states change setState(name, value, item) { const group = item.getContainer(); - const shape = group.get('children')[0]; // 顺序根据 draw 时确定 + const shape = group.get('children')[0]; // Find the first graphics shape of the node. It is determined by the order of being added if(name === 'running') { if(value) { shape.animate({ - r: 20, - repeat: true - }, 1000); + r: 20 + }, { + repeat: true, + duration: 1000 + }); } else { shape.stopAnimate(); shape.attr('r', 10); @@ -385,7 +389,7 @@ G6.registerNode('custom', { } }, 'circle'); -// 鼠标移动到上面 running，移出结束 +// Activate 'running' by mouse entering. Turn it of by mouse leaving. graph.on('node:mouseenter', ev=> { const node = ev.item; graph.setItemState(node, 'running', true); diff --git a/docs/manual/advanced/custom-node.zh.md b/docs/manual/advanced/custom-node.zh.md index a97bcb0ea4..6e33cf8697 100644 --- a/docs/manual/advanced/custom-node.zh.md +++ b/docs/manual/advanced/custom-node.zh.md @@ -3,7 +3,7 @@ title: 自定义节点 order: 2 --- -G6 提供了一系列[内置节点](/zh/docs/manual/middle/elements/defaultNode)，包括 [circle](/zh/docs/manual/middle/elements/nodes/circle)、[rect](https://www.yuque.com/antv/g6/vdqpdt)、[ellipse](/zh/docs/manual/middle/elements/nodes/ellipse)、[diamond](/zh/docs/manual/middle/elements/nodes/diamond)、[triangle](/zh/docs/manual/middle/elements/nodes/triangle)、[star](/zh/docs/manual/middle/elements/nodes/star)、[image](/zh/docs/manual/middle/elements/nodes/image)、[modelRect](/zh/docs/manual/middle/elements/nodes/modelRect)。若内置节点无法满足需求，用户还可以通过 `G6.registerNode('nodeName', options)` 进行自定义节点，方便用户开发更加定制化的节点，包括含有复杂图形的节点、复杂交互的节点、带有动画的节点等。 +G6 提供了一系列[内置节点](/zh/docs/manual/middle/elements/nodes/defaultNode)，包括 [circle](/zh/docs/manual/middle/elements/nodes/circle)、[rect](/zh/docs/manual/middle/elements/nodes/rect)、[diamond](/zh/docs/manual/middle/elements/nodes/diamond)、[triangle](/zh/docs/manual/middle/elements/nodes/triangle)、[star](/zh/docs/manual/middle/elements/nodes/star)、[image](/zh/docs/manual/middle/elements/nodes/image)、[modelRect](/zh/docs/manual/middle/elements/nodes/modelRect)。若内置节点无法满足需求，用户还可以通过 `G6.registerNode('nodeName', options)` 进行自定义节点，方便用户开发更加定制化的节点，包括含有复杂图形的节点、复杂交互的节点、带有动画的节点等。 在本章中我们会通过四个案例，从简单到复杂讲解节点的自定义。这四个案例是：
@@ -15,7 +15,7 @@ G6 提供了一系列[内置节点](/zh/docs/manual/middle/elements/defaultNode)
4. 调整节点的鼠标选中/悬浮样式。样式变化响应；动画响应。 -通过 [图形 Shape](/zh/docs/manual/middle/keyConcept) 章节的学习，我们应该已经知道了自定义节点时需要满足以下两点： +通过 [图形 Shape](/zh/docs/manual/middle/keyconcept/shape-keyshape) 章节的学习，我们应该已经知道了自定义节点时需要满足以下两点： - 控制节点的生命周期； - 解析用户输入的数据，在图形上展示。 @@ -31,10 +31,10 @@ G6.registerNode('nodeName', { } }, /** - * 绘制节点/边，包含文本 + * 绘制节点，包含文本 * @param {Object} cfg 节点的配置项 * @param {G.Group} group 节点的容器 - * @return {G.Shape} 绘制的图形，通过node.get('keyShape') 可以获取到 + * @return {G.Shape} 绘制的图形，通过 node.get('keyShape') 可以获取到 */ draw(cfg, group) {}, /** @@ -58,27 +58,27 @@ G6.registerNode('nodeName', { */ afterUpdate(cfg, node) {}, /** - * 设置节点的状态，主要是交互状态，业务状态请在 draw 方法中实现 - * 单图形的节点仅考虑 selected、active 状态，有其他状态需求的用户自己复写这个方法 + * 响应节点的状态变化，主要是交互状态，业务状态请在 draw 方法中实现 + * 默认情况下，节点的 keyShape 将会响应 selected、active 状态，有其他状态需求的用户自己复写这个方法 * @param {String} name 状态名称 * @param {Object} value 状态值 * @param {Node} node 节点 */ setState(name, value, node) {}, /** - * 获取控制点 - * @param {Object} cfg 节点、边的配置项 - * @return {Array|null} 控制点的数组,如果为 null，则没有控制点 + * 获取锚点（相关边的连入点） + * @param {Object} cfg 节点的配置项 + * @return {Array|null} 锚点（相关边的连入点）的数组,如果为 null，则没有控制点 */ getAnchorPoints(cfg) {} }, extendNodeName); ``` -   注意： +   ⚠️注意: - 如果不从任何现有的节点扩展新节点时，`draw` 方法是必须的； -- `update` 方法可以不定义，数据更新时会走 draw 方法，所有图形清除重绘； -- `afterDraw`，`afterUpdate` 方法一般用于扩展已有的节点/和边，例如：在矩形上附加图片，线上增加动画等； +- `update` 方法可以不定义，数据更新时会走 `draw` 方法，所有图形清除重绘； +- `afterDraw`，`afterUpdate` 方法一般用于扩展已有的节点，例如：在矩形节点上附加图片，圆节点增加动画等； - `setState` 方法一般也不需要复写，有全局的样式可以替换； - `getAnchorPoints` 方法仅在需要限制与边的连接点时才需要复写，也可以在数据中直接指定。 @@ -97,7 +97,7 @@ G6.registerNode('diamond', { const shape = group.addShape('path', { attrs: { path: this.getPath(cfg), // 根据配置获取路径 - stroke: cfg.color // 颜色应用到边上，如果应用到填充，则使用 fill: cfg.color + stroke: cfg.color // 颜色应用到描边上，如果应用到填充，则使用 fill: cfg.color } }); if(cfg.label) { // 如果有文本 @@ -166,7 +166,7 @@ graph.render(); 在实现 diamond 的过程中，重写 `update` 方法，找到需要更新的 shape 进行更新，从而优化性能。寻找需要更新的图形可以通过： -- `group.get('children')[0]` 找到 [关键图形 keyShape](/zh/docs/manual/middle/keyConcept)，也就是 `draw` 方法返回的 shape； +- `group.get('children')[0]` 找到 [关键图形 keyShape](/zh/docs/manual/middle/keyconcept/shape-keyshape#keyshape)，也就是 `draw` 方法返回的 shape； - `group.get('children')[1]` 找到 label 图形。 下面代码仅更新了 diamond 的关键图形的路径和颜色。 @@ -194,12 +194,12 @@ G6.registerNode('diamond', { ## 2. 扩展现有节点 ### 扩展 Shape -G6 中已经[内置了一些节点](/zh/docs/manual/middle/elements/defaultNode)，如果用户仅仅想对现有节点进行调整，复用原有的代码，则可以基于现有的节点进行扩展。同样实现 diamond ，可以基于 circle、ellipse、rect 等内置节点的进行扩展。[simple-shape](https://github.com/antvis/g6/blob/master/src/shape/single-shape-mixin.js) 是这些内置节点图形的基类，也可以基于它进行扩展。 +G6 中已经[内置了一些节点](/zh/docs/manual/middle/elements/nodes/defaultNode)，如果用户仅仅想对现有节点进行调整，复用原有的代码，则可以基于现有的节点进行扩展。同样实现 diamond ，可以基于 circle、ellipse、rect 等内置节点的进行扩展。single-shape 是这些内置节点图形的基类，也可以基于它进行扩展。 -下面以基于 single-shape 为例进行扩展。`draw`，`update`，`setState` 方法在 [simple-shape ](https://github.com/antvis/g6/blob/master/src/shape/single-shape-mixin.js)中都有实现，这里仅需要复写 `getShapeStyle` 方法即可。返回的对象中包含自定义图形的路径和其他样式。 +下面以基于 single-shape 为例进行扩展。`draw`，`update`，`setState` 方法在 single-shape 中都有实现，这里仅需要复写 `getShapeStyle` 方法即可。返回的对象中包含自定义图形的路径和其他样式。 ```javascript G6.registerNode('diamond', { - shapeType: 'path', // group.addShape 时需要指定的类型 + shapeType: 'path', // 继承自 'single-shape' 时必须指定，否则不需要填写 getShapeStyle(cfg) { const size = this.getSize(cfg); // 转换成 [width, height] 的模式 const color = cfg.color; @@ -253,18 +253,19 @@ G6.registerNode('inner-animate', { } }); // 执行旋转动画 - image.animate({ - onFrame(ratio) { - const matrix = Util.mat3.create(); - const toMatrix = Util.transform(matrix, [ - ['r', ratio * Math.PI * 2] - ]) ; - return { - matrix: toMatrix - }; - }, + image.animate((ratio) => { + const matrix = Util.mat3.create(); + const toMatrix = Util.transform(matrix, [ + ['r', ratio * Math.PI * 2] + ]) ; + return { + matrix: toMatrix + }; + }, { repeat: true - }, 3000, 'easeCubic'); + duration: 3000, + easing: 'easeCubic' + }); } }, // 继承了 rect 节点 @@ -276,7 +277,7 @@ G6.registerNode('inner-animate', {
## 3. 调整锚点 anchorPoint -节点上的[锚点 anchorPoint](/zh/docs/manual/middle/keyConcept) 作用是**确定节点与边的相交的位置**，看下面的场景：
+节点上的[锚点 anchorPoint](/zh/docs/manual/middle/keyconcept/anchorpoint) 作用是**确定节点与边的相交的位置**，看下面的场景：
img img @@ -330,18 +331,18 @@ G6.registerNode('diamond', { 常见的交互都需要节点和边通过样式变化做出反馈，例如鼠标移动到节点上、点击选中节点/边、通过交互激活边上的交互等，都需要改变节点和边的样式，有两种方式来实现这种效果： 1. 在数据上添加标志字段，在自定义 shape 过程中根据约定进行渲染； -1. 将交互状态同原始数据和绘制节点的逻辑分开，仅更新节点。 +2. 将交互状态同原始数据和绘制节点的逻辑分开，仅更新节点。 我们推荐用户使用第二种方式来实现节点的状态调整，可以通过以下方式来实现： -- 在 G6 中自定义节点/边时在 `setState` 方法中进行节点状态的设置； +- 在 G6 中自定义节点/边时在 `setState` 方法中进行节点状态变化的响应； - 通过 `graph.setItemState()` 方法来设置状态。 基于 rect 扩展出一个 custom 图形，默认填充色为白色，当鼠标点击时变成红色，实现这一效果的示例代码如下： ```javascript // 基于 rect 扩展出新的图形 G6.registerNode('custom', { - // 设置状态 + // 响应状态变化 setState(name, value, item) { const group = item.getContainer(); const shape = group.get('children')[0]; // 顺序根据 draw 时确定 @@ -367,16 +368,18 @@ G6 并未限定节点的状态，只要你在 `setState` 方法中进行处理 ```javascript G6.registerNode('custom', { - // 设置状态 + // 响应状态变化 setState(name, value, item) { const group = item.getContainer(); const shape = group.get('children')[0]; // 顺序根据 draw 时确定 if(name === 'running') { if(value) { shape.animate({ - r: 20, - repeat: true - }, 1000); + r: 20 + }, { + repeat: true, + duration: 1000 + }); } else { shape.stopAnimate(); shape.attr('r', 10); diff --git a/docs/manual/advanced/graphics-group.en.md b/docs/manual/advanced/graphics-group.en.md deleted file mode 100644 index 85fd5ecba0..0000000000 --- a/docs/manual/advanced/graphics-group.en.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: 关键概念-图形分组 Group -order: 1 ---- - -   注意： -
图形分组 Group 与 [节点分组 Group](/zh/docs/manual/middle/nodeGroup) 虽然都名为 Group，但属于不同层次的概念。 - -- 图形分组针对 [图形 Shape](/zh/docs/manual/middle/keyConcept) 层次的分组； -- [节点分组 Group](/zh/docs/manual/middle/nodeGroup) 是针对 [节点](/zh/docs/manual/middle/elements/defaultNode) 的分组，与数据结构中的层次、分组对应。 - -
- -## 什么是图形分组 Group -图形分组 group 类似于 [SVG 中的 ](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/g)[``](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/g)[ 标签](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/g)：元素 `g` 是用来组合图形对象的容器。在 group 上添加变换（例如剪裁、旋转、放缩、平移等）会应用到其所有的子元素上。在 group 上添加属性（例如颜色、位置等）会被其所有的子元素继承。此外， group 可以多层嵌套使用，因此可以用来定义复杂的对象。 - -在 G6 中，Graph 的一个实例中的所有节点属于同一个变量名为 `nodeGroup` 的 group，所有的边属于同一个变量名为 `edgeGroup` 的 group。节点 group 在视觉上的层级（zIndex）高于边 group，即所有节点会绘制在所有边的上层。
如下图（左）三个节点属于 `nodeGroup` ，两条边属于 `edgeGroup` ， `nodeGroup` 层级高于 `edgeGroup` ，三个节点绘制在三条边的上层。下图（右）是（左）图的节点降低透明度后的效果，可以更清晰看到边绘制在节点下方。
- -![image.png](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*oqKUSoRWMrcAAAAAAAAAAABkARQnAQ)![image.png](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*cudnTqD-g_4AAAAAAAAAAABkARQnAQ) -> （左）节点和边的图形分组 Group 演示。（右）给左图的节点降低了透明度。 - - -## 何时使用图形分组 Group -[自定义节点](https://www.yuque.com/antv/g6/self-node)、[自定义边](https://www.yuque.com/antv/g6/self-edge)时将会涉及到图形分组 Group 的概念。图形分组 Group 方便了用户对节点或边上元素的组合和管理。
例如，如下图中的节点 A 有一个包含节点 A 中所有图形的 group，该 group 中包含了一个 circle 图形和一个文本图形。节点 B 是一个自定义节点，有一个包含节点 B 中所有图形的 group，该 group 包含了 circle 图形、rect 图形、文本图形。
- -img -img - -
- -## 如何使用图形分组 Group -以下方法将会在[自定义节点](/zh/docs/manual/advanced/custom-node)、[自定义边](/zh/docs/manual/advanced/custom-edge)时用到。 - -### 声明实例 -``` -const group = new Group(cfgs); -``` - -### 实例方法 - -- addGroup(cfgs) - -向分组中添加新的分组。 - -```javascript -const subGroup = group.addGroup({ - id: 'rect' -}) -``` - -- addShape(type, cfgs) - -向分组中添加新的图形。 - -```javascript -const keyShape = group.addShape('rect', { - attrs: { - stroke: 'red' - } -}) -``` - - -提示：在分组上添加的 `clip`， `transform` 等会影响到该分组中的所有图形。 diff --git a/docs/manual/advanced/iconfont.en.md b/docs/manual/advanced/iconfont.en.md index 95aa5015f3..8a54ba2e23 100644 --- a/docs/manual/advanced/iconfont.en.md +++ b/docs/manual/advanced/iconfont.en.md @@ -1,33 +1,33 @@ --- -title: 使用 Iconfont +title: Utilizing Iconfont order: 9 --- -## 简介 -为什么使用 iconfont？ 兼容性好、种类多、多色等。在此不做过多介绍，请直接移步[阿里巴巴-iconfont平台](https://www.iconfont.cn)。 +## Introduction +Due to the good compatibility, type diversity, color diversity, The iconfont is popupar for front-end developments now. Refer to the Iconfont Library of Alibaba. -## 效果 +## Effect result -## 下载字体图标 -直接去到[阿里巴巴字体图标库](https://www.iconfont.cn)搜索下载即可，简要操作流程是：搜索图标（例如篮球） ->  选择自己喜欢的图标添加入库  ->  点击页面右上角的购物车可以看到我们加入的图标 -> 添加至项目，如果没有项目到话可以新建一个  ->  在我到项目里面点击下载至本地 -> 解压。如果一切操作正常的话可以得到如下解压文件：
+## Download the iconfont +Browse the Iconfont Library of Alibaba and download the iconfont you like by searching a iconfont -> adding it to your library -> going to your library by clicking the shopping cart logo on the right top -> adding it to your project (new one if you do not have any project) -> downloading the iconfont in 'my project' -> decompressing. You will get the files as shown below if everything is right:
download -选中红色区域的所有文件（这里面很多文件是不需要的，为了方便起见，我们全部复制即可，不需要的也不会被打包），复制到项目里面，一般放在目录 'static/icons' 或者 'assets/icons' 下面，如果没有的话可以新建目录，当然你也可以放到任意你喜欢的位置，只要引入的时候路径对即可，到此 iconfont 引入完毕。 +Copy the files in the red area (there are lots of unecessary files, we can still copy them all since the unused files will not be packed)to your project. In general, the iconfont files are on the directory of 'static/icons' or 'assets/icons'. New the directory if there is no such directory. It is also fine to put them into any directory. But note to import the right path when you use it. Now, the importing process is done. -PS: 本案文件目录为 '/static/icons' +PS: The directory for this example is '/static/icons'. -## 引入G6 -多种引入方式，请移步[快速上手](/zh/docs/manual/getting-started)。 -
PS: 本案例简单粗暴，通过CDN的方式引入。 +## Import G6 +There are several ways to import G6 introduced in [Getting Started](/en/docs/manual/getting-started). +
PS: We import G6 by CDN in this example. ```html ``` -## 添加字体图标 -引入方式可自行选择，下面为在 HTML 中引入的例子： +## Import the Iconfont +We import the iconfont in HTML here: ```html ``` -## 使用字体 +## Using Iconfont ```javascript -G6.registerNode("iconfont", { +G6.registerNode('iconfont', { draw(cfg, group) { - const { - backgroundConfig: backgroundStyle, - style, - labelCfg: labelStyle - } = cfg; + const { backgroundConfig: backgroundStyle, style, labelCfg: labelStyle } = cfg; if (backgroundStyle) { - group.addShape("circle", { + group.addShape('circle', { attrs: { x: 0, y: 0, r: cfg.size, - ...backgroundStyle - } + ...backgroundStyle, + }, }); } - const keyShape = group.addShape("text", { + const keyShape = group.addShape('text', { attrs: { x: 0, y: 0, - fontFamily: "iconfont", // 对应css里面的font-family: "iconfont"; - textAlign: "center", - textBaseline: "middle", + fontFamily: 'iconfont', // 对应css里面的font-family: "iconfont"; + textAlign: 'center', + textBaseline: 'middle', text: cfg.text, fontSize: cfg.size, - ...style - } + ...style, + }, }); const labelY = backgroundStyle ? cfg.size * 2 : cfg.size; - group.addShape("text", { + group.addShape('text', { attrs: { x: 0, y: labelY, - textAlign: "center", + textAlign: 'center', text: cfg.label, - ...labelStyle.style - } + ...labelStyle.style, + }, }); return keyShape; - } + }, }); -const COLOR = "#40a9ff"; +const COLOR = '#40a9ff'; const graph = new G6.TreeGraph({ - container: "mountNode", + container: 'mountNode', width: 800, height: 600, modes: { - default: ["collapse-expand", "drag-canvas", "drag-node"] + default: ['collapse-expand', 'drag-canvas', 'drag-node'], }, defaultNode: { backgroundConfig: { - backgroundType: "circle", + backgroundType: 'circle', fill: COLOR, - stroke: "LightSkyBlue" + stroke: 'LightSkyBlue', }, - shape: "iconfont", + shape: 'iconfont', size: 12, style: { - fill: "#fff" + fill: '#fff', }, labelCfg: { style: { fill: COLOR, - fontSize: 12 - } - } + fontSize: 12, + }, + }, }, // 布局相关 layout: { - type: "compactBox", - direction: "LR", + type: 'compactBox', + direction: 'LR', getId(d) { return d.id; }, @@ -127,166 +123,205 @@ const graph = new G6.TreeGraph({ }, getHGap() { return 60; - } - } + }, + }, }); graph.edge(({ target }) => { - const fill = - target.get("model").backgroundConfig && - target.get("model").backgroundConfig.fill; + const fill = target.get('model').backgroundConfig && target.get('model').backgroundConfig.fill; return { - shape: "cubic-horizontal", + shape: 'cubic-horizontal', color: fill || COLOR, - label: target.get("model").relation || "", + label: target.get('model').relation || '', labelCfg: { style: { fill: fill || COLOR, - fontSize: 12 - } - } + fontSize: 12, + }, + }, }; }); const data = { isRoot: true, - id: "Root", - label: "可疑人员王**", - text: "", // 对应字体图标的Unicode码， + id: 'Root', + label: '可疑人员王**', + text: '\ue6b2', // 对应iconfont.css 里面的content，注意加u，后面的自行修改一下。 style: { - fill: "red" + fill: 'red', }, labelCfg: { style: { - fill: "red" - } + fill: 'red', + }, }, backgroundConfig: null, // 自定义项，用于判读是否需要圆背景 size: 30, children: [ { - id: "SubTreeNode1", - label: "**网咖", - text: "", - relation: "上网", + id: 'SubTreeNode1', + label: '**网咖', + text: '', + relation: '上网', children: [ { - id: "SubTreeNode2", - label: "多伦多", - text: "" + id: 'SubTreeNode2', + label: '多伦多', + text: '', }, { - id: "id1", - label: "小王", - text: "", + id: 'id1', + label: '小王', + text: '', children: [ { - id: "SubTreeNode1.2.1", - label: "182****2123", - text: "" + id: 'SubTreeNode1.2.1', + label: '182****2123', + text: '', }, { - id: "SubTreeNode4", - label: "今晚在吗", - text: "" - } - ] - } - ] + id: 'SubTreeNode4', + label: '今晚在吗', + text: '', + }, + ], + }, + ], }, { - id: "SubTreeNode3", - label: "subway", - text: "", + id: 'SubTreeNode3', + label: 'subway', + text: '', children: [ { - id: "SubTreeNode3.1", - label: "王五", - text: "" + id: 'SubTreeNode3.1', + label: '王五', + text: '', }, { - id: "SubTreeNode3.2", - label: "张三", - text: "" - } - ] + id: 'SubTreeNode3.2', + label: '张三', + text: '', + }, + ], }, { - id: "SubTreeNode5", - label: "小花", - relation: "老婆", - text: "", + id: 'SubTreeNode5', + label: '小花', + relation: '老婆', + text: '', backgroundConfig: { - fill: "Coral" + fill: 'Coral', }, style: { - fill: "#fff" + fill: '#fff', }, labelCfg: { style: { - fill: "Coral" - } + fill: 'Coral', + }, }, children: [ { - id: "SubTreeNode1.2.1", - label: "182****2123", - text: "", - relation: "通话", + id: 'SubTreeNode1.2.1', + label: '182****2123', + text: '', + relation: '通话', backgroundConfig: { - fill: "Coral" + fill: 'Coral', }, style: { - fill: "#fff" + fill: '#fff', }, labelCfg: { style: { - fill: "Coral" - } - } + fill: 'Coral', + }, + }, }, { - id: "SubTreeNode3.3", - label: "凶器", - text: "", - relation: "指纹", + id: 'SubTreeNode3.3', + label: '凶器', + text: '', + relation: '指纹', backgroundConfig: { - fill: "Coral" + fill: 'Coral', }, style: { - fill: "#fff" + fill: '#fff', }, labelCfg: { style: { - fill: "Coral" - } - } - } - ] + fill: 'Coral', + }, + }, + }, + ], }, { - id: "SubTreeNode6", - label: "马航37*", - relation: "乘坐", - text: "" - } - ] + id: 'SubTreeNode6', + label: '马航37*', + relation: '乘坐', + text: '', + }, + ], }; graph.data(data); graph.render(); ``` -## 注意事项 -看了代码大家应该很清楚了，实质就是用了 text 图形，但有几个需要注意的地方：
**1、text的fontFamily必须和iconfont.css里面的font-family保持一致：**
+## Attention +In fact, iconfont is a text shape. +
**1、The `fontFamily` of the text and the `font-family` in iconfont.css shoulde be kept consistent:**
download download -**2、data 里面的 text 使用的是 Unicode，需要自行复制。**
+**2、The `text` in data is the `content` in iconfont.css. And add an `u` after `\`.**
-download +download -download +download + + +## Tool Function getIcon +You can write a function as below to transform unicode. Attention, unicode cannot be connected manually (`\\u${icon.unicode}`). Here we use the `code_decimal` in iconfont.json. For more detail, please refer to [MDN String.fromCodePoint](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCodePoint). + +```javascript +import fonts from '../fonts/iconfont.json'; + +const icons = fonts.glyphs.map(icon => { + return { + name: icon.name, + unicode: String.fromCodePoint(icon.unicode_decimal), // `\\u${icon.unicode}`, + }; +}); +const getIcon = (type: string) => { + const matchIcon = icons.find(icon => { + return icon.name === type; + }) || { unicode: '', name: 'default' }; + return matchIcon.unicode; +}; +``` + +### Usage + +```javascript + { + shape: 'text', + attrs: { + id: 'node-icon', + x: 0, + y: 0, + fontSize: iconSize, + fill: primaryColor, + text: getIcon('logo'), //logo is the name of the unicode + fontFamily: 'iconfont', // same as font-family: "iconfont"; in CSS + textAlign: 'center', + textBaseline: 'middle', + }, + } +``` \ No newline at end of file diff --git a/docs/manual/advanced/iconfont.zh.md b/docs/manual/advanced/iconfont.zh.md index 95aa5015f3..f2b0f5a73c 100644 --- a/docs/manual/advanced/iconfont.zh.md +++ b/docs/manual/advanced/iconfont.zh.md @@ -4,23 +4,23 @@ order: 9 --- ## 简介 -为什么使用 iconfont？ 兼容性好、种类多、多色等。在此不做过多介绍，请直接移步[阿里巴巴-iconfont平台](https://www.iconfont.cn)。 +为什么使用 iconfont？ 兼容性好、种类多、多色等。在此不做过多介绍，请直接移步 阿里巴巴-iconfont平台。 ## 效果 result ## 下载字体图标 -直接去到[阿里巴巴字体图标库](https://www.iconfont.cn)搜索下载即可，简要操作流程是：搜索图标（例如篮球） ->  选择自己喜欢的图标添加入库  ->  点击页面右上角的购物车可以看到我们加入的图标 -> 添加至项目，如果没有项目到话可以新建一个  ->  在我到项目里面点击下载至本地 -> 解压。如果一切操作正常的话可以得到如下解压文件：
+直接到 阿里巴巴字体图标库 搜索下载即可，简要操作流程是：搜索图标（例如篮球）-> 选择自己喜欢的图标添加入库 -> 点击页面右上角的购物车可以看到我们加入的图标 -> 添加至项目，如果没有项目到话可以新建一个 -> 在我到项目里面点击下载至本地 -> 解压。如果一切操作正常的话可以得到如下解压文件：
download 选中红色区域的所有文件（这里面很多文件是不需要的，为了方便起见，我们全部复制即可，不需要的也不会被打包），复制到项目里面，一般放在目录 'static/icons' 或者 'assets/icons' 下面，如果没有的话可以新建目录，当然你也可以放到任意你喜欢的位置，只要引入的时候路径对即可，到此 iconfont 引入完毕。 -PS: 本案文件目录为 '/static/icons' +PS: 本案文件目录为 '/static/icons'。 -## 引入G6 +## 引入 G6 多种引入方式，请移步[快速上手](/zh/docs/manual/getting-started)。 -
PS: 本案例简单粗暴，通过CDN的方式引入。 +
PS: 本案例简单粗暴，通过 CDN 的方式引入。 ```html @@ -37,82 +37,78 @@ PS: 本案文件目录为 '/static/icons' ## 使用字体 ```javascript -G6.registerNode("iconfont", { +G6.registerNode('iconfont', { draw(cfg, group) { - const { - backgroundConfig: backgroundStyle, - style, - labelCfg: labelStyle - } = cfg; + const { backgroundConfig: backgroundStyle, style, labelCfg: labelStyle } = cfg; if (backgroundStyle) { - group.addShape("circle", { + group.addShape('circle', { attrs: { x: 0, y: 0, r: cfg.size, - ...backgroundStyle - } + ...backgroundStyle, + }, }); } - const keyShape = group.addShape("text", { + const keyShape = group.addShape('text', { attrs: { x: 0, y: 0, - fontFamily: "iconfont", // 对应css里面的font-family: "iconfont"; - textAlign: "center", - textBaseline: "middle", + fontFamily: 'iconfont', // 对应css里面的font-family: "iconfont"; + textAlign: 'center', + textBaseline: 'middle', text: cfg.text, fontSize: cfg.size, - ...style - } + ...style, + }, }); const labelY = backgroundStyle ? cfg.size * 2 : cfg.size; - group.addShape("text", { + group.addShape('text', { attrs: { x: 0, y: labelY, - textAlign: "center", + textAlign: 'center', text: cfg.label, - ...labelStyle.style - } + ...labelStyle.style, + }, }); return keyShape; - } + }, }); -const COLOR = "#40a9ff"; +const COLOR = '#40a9ff'; const graph = new G6.TreeGraph({ - container: "mountNode", + container: 'mountNode', width: 800, height: 600, modes: { - default: ["collapse-expand", "drag-canvas", "drag-node"] + default: ['collapse-expand', 'drag-canvas', 'drag-node'], }, defaultNode: { backgroundConfig: { - backgroundType: "circle", + backgroundType: 'circle', fill: COLOR, - stroke: "LightSkyBlue" + stroke: 'LightSkyBlue', }, - shape: "iconfont", + shape: 'iconfont', size: 12, style: { - fill: "#fff" + fill: '#fff', }, labelCfg: { style: { fill: COLOR, - fontSize: 12 - } - } + fontSize: 12, + }, + }, }, // 布局相关 layout: { - type: "compactBox", - direction: "LR", + type: 'compactBox', + direction: 'LR', getId(d) { return d.id; }, @@ -127,150 +123,148 @@ const graph = new G6.TreeGraph({ }, getHGap() { return 60; - } - } + }, + }, }); graph.edge(({ target }) => { - const fill = - target.get("model").backgroundConfig && - target.get("model").backgroundConfig.fill; + const fill = target.get('model').backgroundConfig && target.get('model').backgroundConfig.fill; return { - shape: "cubic-horizontal", + shape: 'cubic-horizontal', color: fill || COLOR, - label: target.get("model").relation || "", + label: target.get('model').relation || '', labelCfg: { style: { fill: fill || COLOR, - fontSize: 12 - } - } + fontSize: 12, + }, + }, }; }); const data = { isRoot: true, - id: "Root", - label: "可疑人员王**", - text: "", // 对应字体图标的Unicode码， + id: 'Root', + label: '可疑人员王**', + text: '\ue6b2', // 对应iconfont.css 里面的content，注意加u，后面的自行修改一下。 style: { - fill: "red" + fill: 'red', }, labelCfg: { style: { - fill: "red" - } + fill: 'red', + }, }, backgroundConfig: null, // 自定义项，用于判读是否需要圆背景 size: 30, children: [ { - id: "SubTreeNode1", - label: "**网咖", - text: "", - relation: "上网", + id: 'SubTreeNode1', + label: '**网咖', + text: '', + relation: '上网', children: [ { - id: "SubTreeNode2", - label: "多伦多", - text: "" + id: 'SubTreeNode2', + label: '多伦多', + text: '', }, { - id: "id1", - label: "小王", - text: "", + id: 'id1', + label: '小王', + text: '', children: [ { - id: "SubTreeNode1.2.1", - label: "182****2123", - text: "" + id: 'SubTreeNode1.2.1', + label: '182****2123', + text: '', }, { - id: "SubTreeNode4", - label: "今晚在吗", - text: "" - } - ] - } - ] + id: 'SubTreeNode4', + label: '今晚在吗', + text: '', + }, + ], + }, + ], }, { - id: "SubTreeNode3", - label: "subway", - text: "", + id: 'SubTreeNode3', + label: 'subway', + text: '', children: [ { - id: "SubTreeNode3.1", - label: "王五", - text: "" + id: 'SubTreeNode3.1', + label: '王五', + text: '', }, { - id: "SubTreeNode3.2", - label: "张三", - text: "" - } - ] + id: 'SubTreeNode3.2', + label: '张三', + text: '', + }, + ], }, { - id: "SubTreeNode5", - label: "小花", - relation: "老婆", - text: "", + id: 'SubTreeNode5', + label: '小花', + relation: '老婆', + text: '', backgroundConfig: { - fill: "Coral" + fill: 'Coral', }, style: { - fill: "#fff" + fill: '#fff', }, labelCfg: { style: { - fill: "Coral" - } + fill: 'Coral', + }, }, children: [ { - id: "SubTreeNode1.2.1", - label: "182****2123", - text: "", - relation: "通话", + id: 'SubTreeNode1.2.1', + label: '182****2123', + text: '', + relation: '通话', backgroundConfig: { - fill: "Coral" + fill: 'Coral', }, style: { - fill: "#fff" + fill: '#fff', }, labelCfg: { style: { - fill: "Coral" - } - } + fill: 'Coral', + }, + }, }, { - id: "SubTreeNode3.3", - label: "凶器", - text: "", - relation: "指纹", + id: 'SubTreeNode3.3', + label: '凶器', + text: '', + relation: '指纹', backgroundConfig: { - fill: "Coral" + fill: 'Coral', }, style: { - fill: "#fff" + fill: '#fff', }, labelCfg: { style: { - fill: "Coral" - } - } - } - ] + fill: 'Coral', + }, + }, + }, + ], }, { - id: "SubTreeNode6", - label: "马航37*", - relation: "乘坐", - text: "" - } - ] + id: 'SubTreeNode6', + label: '马航37*', + relation: '乘坐', + text: '', + }, + ], }; graph.data(data); @@ -278,15 +272,55 @@ graph.render(); ``` ## 注意事项 -看了代码大家应该很清楚了，实质就是用了 text 图形，但有几个需要注意的地方：
**1、text的fontFamily必须和iconfont.css里面的font-family保持一致：**
+看了代码大家应该很清楚了，实质就是用了 text 图形，但有几个需要注意的地方：
**1、text 的 `fontFamily` 必须和 iconfont.css 里面的 `font-family` 保持一致：**
download download -**2、data 里面的 text 使用的是 Unicode，需要自行复制。**
+**2、data 里面的 `text` 使用的是 iconfont.css 里面的 `content`，注意加 `u` 。如有需要可自行复制。**
-download +download -download +download + + +## 工具函数 getIcon +我们可以将 unicode 的转化封装成函数使用。这里注意，手动拼接 unicode 是不行的（`\\u${icon.unicode}`）。这里采用 iconfont.json 中的 `code_decimal` 进行转化。详细参考《[MDN String.fromCodePoint](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCodePoint)》。 + +```javascript +import fonts from '../fonts/iconfont.json'; + +const icons = fonts.glyphs.map(icon => { + return { + name: icon.name, + unicode: String.fromCodePoint(icon.unicode_decimal), // `\\u${icon.unicode}`, + }; +}); +const getIcon = (type: string) => { + const matchIcon = icons.find(icon => { + return icon.name === type; + }) || { unicode: '', name: 'default' }; + return matchIcon.unicode; +}; +``` + +### 用法 + +```javascript + { + shape: 'text', + attrs: { + id: 'node-icon', + x: 0, + y: 0, + fontSize: iconSize, + fill: primaryColor, + text: getIcon('logo'), // logo 为 unicode 对应的 name + fontFamily: 'iconfont', // 对应 CSS 里面的 font-family: "iconfont"; + textAlign: 'center', + textBaseline: 'middle', + }, + } +``` \ No newline at end of file diff --git a/docs/manual/advanced/keyconcept/graphics-group.en.md b/docs/manual/advanced/keyconcept/graphics-group.en.md new file mode 100644 index 0000000000..a18bc43a3d --- /dev/null +++ b/docs/manual/advanced/keyconcept/graphics-group.en.md @@ -0,0 +1,68 @@ +--- +title: Graphics Group +order: 1 +--- + +   ⚠️Attention: +
Graphics Group and [Node Group](/en/docs/manual/middle/nodeGroup) are totally different concepts with the same name Group. + +- Graphics Group is the group for [Graphics Shape](/en/docs/manual/middle/keyconcept/shape-keyshape); +- [Node Group](/en/docs/manual/middle/nodeGroup) is the group for [Node](/en/docs/manual/middle/elements/nodes/defaultNode)s, which is related to the hierarchy and groups in the data. + +
+ +## What +Graphics Group (hereinafter referred to as Group) in G6 is similar to `` tag in SVG : Group a container of a group of graphics. The transformations on a Group such as clipping, rotating, zooming, and translating will be applied to all the children of the Group. The properties like color and position will also be inherited by its children. Besides, Group can be nested for complicated objects. + +In G6, all the nodes instances in a Graph is grouped by a Group named `nodeGroup`, all the edges instances are grouped by `edgeGroup`. And the visual level (zIndex) of `nodeGroup` is higher than `edgeGroup`, which means all the nodes will be drawed on the top of all the edges. + +
As shown in the figure below: The three nodes in (Left) are belong to the `nodeGroup`, the two edges are belong to the `edgeGroup`. The visual level (zIndex) of `nodeGroup` is higher than `edgeGroup`, so the three nodes are drawed on the top of the two edges. We reduce the opacity of the nodes in (Right) to clearly see the edges are drawed under the nodes.
+ +![image.png](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*oqKUSoRWMrcAAAAAAAAAAABkARQnAQ)![image.png](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*cudnTqD-g_4AAAAAAAAAAABkARQnAQ) +> (Left) Demonstration of the graphics Group of nodes and edges. (Right) Nodes with opacity. + + +## When +Graphics Group is refered by [Custom Node](/en/docs/manual/advanced/custom-node) and [Custom Edge](/en/docs/manual/advanced/custom-edge). It is a mechanism to combine and manage the graphis shapes. + +
For example, there is a node A which has a group contains all the graphics shapes (a circle and a text shape) of A. Node B is a custom node which also has a group contains all the graphics shapes (a circle, a rect, and a text shape) of B.
+ +img +img + +
+ +## How +The functions below will be used in [Custom Node](/en/docs/manual/advanced/custom-node) and [Custom Edge](/en/docs/manual/advanced/custom-edge). + +### Instantiating a Group +``` +const group = new Group(cfgs); +``` + +### Functions of Group + +- addGroup(cfgs) + +Add a new group to the group. + +```javascript +const subGroup = group.addGroup({ + id: 'rect' +}) +``` + +- addShape(type, cfgs) + +Add a shape to the group. + +```javascript +const keyShape = group.addShape('rect', { + attrs: { + stroke: 'red' + } +}) +``` + + +**Tips:** The `clip`, `transform`, and other operations on a group will affect all the elements in the group. diff --git a/docs/manual/advanced/graphics-group.zh.md b/docs/manual/advanced/keyconcept/graphics-group.zh.md similarity index 57% rename from docs/manual/advanced/graphics-group.zh.md rename to docs/manual/advanced/keyconcept/graphics-group.zh.md index 85fd5ecba0..f9c95c2719 100644 --- a/docs/manual/advanced/graphics-group.zh.md +++ b/docs/manual/advanced/keyconcept/graphics-group.zh.md @@ -1,27 +1,27 @@ --- -title: 关键概念-图形分组 Group +title: 图形分组 Group order: 1 --- -   注意： +   ⚠️注意:
图形分组 Group 与 [节点分组 Group](/zh/docs/manual/middle/nodeGroup) 虽然都名为 Group，但属于不同层次的概念。 -- 图形分组针对 [图形 Shape](/zh/docs/manual/middle/keyConcept) 层次的分组； -- [节点分组 Group](/zh/docs/manual/middle/nodeGroup) 是针对 [节点](/zh/docs/manual/middle/elements/defaultNode) 的分组，与数据结构中的层次、分组对应。 +- 图形分组针对 [图形 Shape](/zh/docs/manual/middle/keyconcept/shape-keyshape) 层次的分组； +- [节点分组 Group](/zh/docs/manual/middle/nodeGroup) 是针对 [节点](/zh/docs/manual/middle/elements/nodes/defaultNode) 的分组，与数据结构中的层次、分组对应。
## 什么是图形分组 Group -图形分组 group 类似于 [SVG 中的 ](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/g)[``](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/g)[ 标签](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/g)：元素 `g` 是用来组合图形对象的容器。在 group 上添加变换（例如剪裁、旋转、放缩、平移等）会应用到其所有的子元素上。在 group 上添加属性（例如颜色、位置等）会被其所有的子元素继承。此外， group 可以多层嵌套使用，因此可以用来定义复杂的对象。 +图形分组 group 类似于 SVG 中的 `` 标签：元素 `g` 是用来组合图形对象的容器。在 group 上添加变换（例如剪裁、旋转、放缩、平移等）会应用到其所有的子元素上。在 group 上添加属性（例如颜色、位置等）会被其所有的子元素继承。此外， group 可以多层嵌套使用，因此可以用来定义复杂的对象。 -在 G6 中，Graph 的一个实例中的所有节点属于同一个变量名为 `nodeGroup` 的 group，所有的边属于同一个变量名为 `edgeGroup` 的 group。节点 group 在视觉上的层级（zIndex）高于边 group，即所有节点会绘制在所有边的上层。
如下图（左）三个节点属于 `nodeGroup` ，两条边属于 `edgeGroup` ， `nodeGroup` 层级高于 `edgeGroup` ，三个节点绘制在三条边的上层。下图（右）是（左）图的节点降低透明度后的效果，可以更清晰看到边绘制在节点下方。
+在 G6 中，Graph 的一个实例中的所有节点属于同一个变量名为 `nodeGroup` 的 group，所有的边属于同一个变量名为 `edgeGroup` 的 group。节点 group 在视觉上的层级（zIndex）高于边 group，即所有节点会绘制在所有边的上层。
如下图（左）三个节点属于 `nodeGroup` ，两条边属于 `edgeGroup` ， `nodeGroup` 层级高于 `edgeGroup` ，三个节点绘制在两条边的上层。下图（右）是（左）图的节点降低透明度后的效果，可以更清晰看到边绘制在节点下方。
![image.png](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*oqKUSoRWMrcAAAAAAAAAAABkARQnAQ)![image.png](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*cudnTqD-g_4AAAAAAAAAAABkARQnAQ) > （左）节点和边的图形分组 Group 演示。（右）给左图的节点降低了透明度。 ## 何时使用图形分组 Group -[自定义节点](https://www.yuque.com/antv/g6/self-node)、[自定义边](https://www.yuque.com/antv/g6/self-edge)时将会涉及到图形分组 Group 的概念。图形分组 Group 方便了用户对节点或边上元素的组合和管理。
例如，如下图中的节点 A 有一个包含节点 A 中所有图形的 group，该 group 中包含了一个 circle 图形和一个文本图形。节点 B 是一个自定义节点，有一个包含节点 B 中所有图形的 group，该 group 包含了 circle 图形、rect 图形、文本图形。
+[自定义节点](/zh/docs/manual/advanced/custom-node)、[自定义边](/zh/docs/manual/advanced/custom-edge)时将会涉及到图形分组 Group 的概念。图形分组 Group 方便了用户对节点或边上元素的组合和管理。
例如，如下图中的节点 A 有一个包含节点 A 中所有图形的 group，该 group 中包含了一个 circle 图形和一个文本图形。节点 B 是一个自定义节点，有一个包含节点 B 中所有图形的 group，该 group 包含了 circle 图形、rect 图形、文本图形。
img img @@ -61,4 +61,4 @@ const keyShape = group.addShape('rect', { ``` -提示：在分组上添加的 `clip`， `transform` 等会影响到该分组中的所有图形。 +提示：在分组上添加的 `clip`， `transform` 等会影响到该分组中的所有元素（子分组或图形）。 diff --git a/docs/manual/advanced/keyconcept/shape-and-properties.en.md b/docs/manual/advanced/keyconcept/shape-and-properties.en.md new file mode 100644 index 0000000000..d26e182a25 --- /dev/null +++ b/docs/manual/advanced/keyconcept/shape-and-properties.en.md @@ -0,0 +1,293 @@ +--- +title: Graphics Shape Properties +order: 0 +--- + +An item (node/edge) in G6 **Consists of One or More** [**Graphics Shape**](/en/docs/manual/middle/keyconcept/shape-keyshape). You can add shapes to a custom item by `group.addShape` in the `draw` function of registering item. The shapes in G6: + +- [circle](#circle); +- [rect](#rect); +- [ellipse](#ellipse); +- [polygon](#polygon); +- [fan](#fan); +- [image](#image); +- [marker](#marker); +- [path](#path); +- [text](#text). + +## The Common Properties of Shapes + + +| Name | Description | Remark | +| --- | --- | --- | +| fill | The color, gradient color, or the pattern for filling | Corresponds to the `fillStyle` of Canvas | +| stroke | The color, gradient color, or pattern for the stroke | Corresponds to the `strokeStyle` of Canvas | +| shadowColor | The color for shadow | | +| shadowBlur | The blur level for shadow | Larger the value, more blur | +| shadowOffsetX | The horizontal offset of the shadow | | +| shadowOffsetY | The vertical offset of the shadow | | +| opacity | The opacity (alpha value) of the shape | Corresponds to the `globalAlpha` of Canvas | + +### Usage +```javascript +group.addShape('rect', { + attrs: { + fill: 'red', + shadowOffsetX: 10, + shadowOffsetY: 10, + shadowColor: 'blue', + shadowBlur: 10, + opacity: 0.8 + } +}) +``` + +## Circle +### Property +| Name | Description | +| --- | --- | +| x | The x coordinate of the center | +| y | The y coordinate of the center | +| r | The radius | + + +### Usage +```javascript +group.addShape('circle', { + attrs: { + x: 100, + y: 100, + r: 50, + fill: 'blue' + } +}) +``` + + +## Rect +### Property +| Name | Description | Remark | +| --- | --- | --- | +| x | The x coordinate of the left top | | +| y | The y coordinate of the left top | | +| width | The width of the rect | | +| height | The height of the rect | | +| radius | The border radius. | It can be an integer or an array, representing the border radii of lefttop, righttop, rightbottom, leftbotton respectively.
- `radius: 1` or `radius: [ 1 ]` is equal to `radius: [ 1, 1, 1, 1 ]`
- `radius: [ 1, 2 ]` is equal to `radius: [ 1, 2, 1, 2 ]`
- `radius: [ 1, 2, 3 ]` is equal to `radius: [ 1, 2, 3, 2 ]`
| + + +### Usage +```javascript +group.addShape('rect', { + attrs: { + x: 150, + y: 150, + width: 150, + height: 150, + stroke: 'black', + radius: [2, 4] + } +}); +``` + +## Ellipse +### Property +| Name | Description | +| --- | --- | +| x | The x coordinate of the center | +| y | The y coordinate of the center | +| rx | The horizontal radius of the ellipse | +| ry | The vertical radius of the ellipse | + + +### Usage +```javascript +group.addShape('ellipse', { + attrs: { + x: 100, + y: 100, + rx: 50, + ry: 50, + fill: 'blue' + } +}) +``` + +## Polygon +### Property +| Name | Description | Remark | +| --- | --- | --- | +| points | A set of vertexes' coordinates of the polygon | It is an array | + + +### Usage +```javascript +group.addShape('polygon', { + attrs: { + points:[[ 30, 30 ], [ 40, 20 ], [ 30, 50 ], [ 60, 100 ]], + fill: 'red' + } +}); +``` + +## Fan +### Property +| Name | Description | Remark | +| --- | --- | --- | +| x | The x coordinate of the center | | +| y | The y coordinate of the center | | +| rs | The horizontal radius of the fan | | +| re | The vertical radius of the fan | | +| startAngle | The start angle | Radian system represented by Math.PI | +| endAngle | The end angle | Radian system represented by Math.PI | +| clockwise | It will be rendered clockwisely if it is `true`, counterclockwisely if it is `false` | | + + +### Usage +```javascript +group.addShape('fan', { + attrs: { + x: 50, + y: 50, + re: 40, + rs: 30, + startAngle: 1/2 * Math.PI, + endAngle: Math.PI, + clockwise: false, + fill: '#b7eb8f' + } +}) +``` + +## Image +### Property +| Name | Description | Remark | +| --- | --- | --- | +| x | The x coordinate of the left top of the image | | +| y | The y coordinate of the left top of the image | | +| width | The width of the image | | +| height | The height of the image | | +| img | The source of the image | Supports: url, ImageData, Image, and canvas | + + +### Usage +```javascript +group.addShape('image', { + attrs: { + x: 0, + y: 0, + img:'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png' + } +}) +``` + +## Marker +### Property +| Name | Description | Remark | +| --- | --- | --- | +| x | The x coordinate of the center | | +| y | The y coordinate of the center | | +| r | The radius of the marker | | +| symbol | The shape | We built in some commonly used shapes for it: `circle`, `square`, `diamond`, `triangle`, and `triangle-down`. You can customize it by path | + + +### Usage +```javascript +group.addShape('marker', { + attrs: { + x: 10, + y: 10, + r: 10, + symbol: function(x, y, r) { + return [ + [ 'M', x, y ], + [ 'L', x + r, y + r ], + [ 'L', x + r * 2, y ], + [ 'Z' ] + ] + } + } +}); +``` + +## Path +   ⚠️Attention: + When the edge is too thin to be hitted by mouse, set **lineAppendWidth** to enlarge the hitting area. + +### Property +| Name | Description | Remark | +| --- | --- | --- | +| path | The path. | It can be a String, or an Array of path | +| startArrow | The arrow on the start of the path | When `startArrow` is `true`, show a default arrow on the start of the path. User can customize an arrow by path | +| endArrow | The arrow on the end of the path | When `startArrow` is `true`, show a default arrow on the end of the path. User can customize an arrow by path | +| lineAppendWidth | The hitting area of the path | Enlarge the hitting area by enlarging its value | +| lineCap | The style of two ends of the path | | +| lineJoin | The style of the intersection of two path | | +| lineWidth | The line width of the current path | | +| miterLimit | The maximum miter length | | +| lineDash | The style of the dash line | It is an array that describes the length of gaps and line segments. If the number of the elements in the array is odd, the elements will be dulplicated. Such as [5, 15, 25] will be regarded as [5, 15, 25, 5, 15, 25] | + + +### Usage +```javascript +group.addShape('path', { + attrs: { + startArrow: { + path: 'M 10,0 L -10,-10 L -10,10 Z', // The custom arrow is a path centered at (0, 0), and points to the positive direction of x-axis + d: 10 + }, + endArrow: { + path: 'M 10,0 L -10,-10 L -10,10 Z', // The custom arrow is a path centered at (0, 0), and points to the positive direction of x-axis + d: 10 + }, + path: [ + [ 'M', 100, 100 ], + [ 'L', 200, 200 ] + ], + stroke: '#000', + lineWidth: 8, + lineAppendWidth: 5 + } +}); +``` + +## Text +### Properties + +| Name | Description | Remark | +| --- | --- | --- | +| fill | The color or gradient color for filling. | The corresponding property in Canvas is `fillStyle`. | +| stroke | The color, gradient color, or pattern for stroke. | The corresponding property in Canvas is `strokeStyle`. | +| shadowColor | The color for shadow. | | +| shadowBlur | The blur level for shadow. | Larger the value, more blur. | +| shadowOffsetX | The horizontal offset of the shadow. | | +| shadowOffsetY | The vertical offset of the shadow. | | +| opacity | The opacity (alpha value) of the shape. | The corresponding property in Canvas is `globalAlpha`. | +| font | The font of the text. | | +| textAlign | The align way of the text. | Options: `'center'` / `'end'` / `'left'` / `'right'` / `'start'`. `'start'` by default. | +| textBaseline | The base line of the text. | Options:
`'top'` / `'middle'` / `'bottom'` / `'alphabetic'` / `'hanging'`. `'bottom'` by default. | +| fontStyle | The font style of the text. | The corresponding property in CSS is `font-style` | +| fontVariant | The font variant of the text. | The corresponding property in CSS is `font-variant` | +| fontWeight | The font weight of the text. | The corresponding property in CSS is `font-weight` | +| fontSize | The font size of the text. | The corresponding property in CSS is `font-size` | +| fontFamily | The font family of the text. | The corresponding property in CSS is `font-family` | +| autoRotate | Wheter rotate the text according to the edge automatically if it is a label of an edge. | | + + +### Usage + +```javascript +group.addShape('text', { + attrs: { + text: 'test text', + fill: 'red', + fontWeight: 400, + shadowOffsetX: 10, + shadowOffsetY: 10, + shadowColor: 'blue', + shadowBlur: 10 + } +}); +``` + + + diff --git a/docs/manual/advanced/shape-and-properties.zh.md b/docs/manual/advanced/keyconcept/shape-and-properties.zh.md similarity index 61% rename from docs/manual/advanced/shape-and-properties.zh.md rename to docs/manual/advanced/keyconcept/shape-and-properties.zh.md index 377071376e..906e373355 100644 --- a/docs/manual/advanced/shape-and-properties.zh.md +++ b/docs/manual/advanced/keyconcept/shape-and-properties.zh.md @@ -1,32 +1,31 @@ --- -title: 关键概念-图形 Shape 及其属性 +title: 图形 Shape 及其属性 order: 0 --- -G6 中的元素（节点/边）是**由一个或多个小**[**图形 Shape**](https://www.yuque.com/antv/g6/shape-crycle)**组成**，主要通过自定义节点或自定义边时在 `draw` 方法中使用 `group.addShape` 添加，G6 中支持以下的图形 Shape： +G6 中的元素（节点/边）是**由一个或多个**[**图形 Shape**](/zh/docs/manual/middle/keyconcept/shape-keyshape)**组成**，主要通过自定义节点或自定义边时在 `draw` 方法中使用 `group.addShape` 添加，G6 中支持以下的图形 Shape： -- circle：圆； -- rect：矩形； -- ellipse：椭圆； -- image：图片； -- text：文本的属性请参考[这里](https://www.yuque.com/antv/g6/gs4gno)； -- fan：扇形； -- marker：标记； -- polygon：多边形； -- path：路径。 +- [circle](#圆图形-circle)：圆； +- [rect](#矩形图形-rect)：矩形； +- [ellipse](#椭圆图形-ellipse)：椭圆； +- [polygon](#多边形图形-polygon)：多边形； +- [fan](#扇形图形-fan)：扇形； +- [image](#图片图形-image)：图片； +- [marker](#标记图形-marker)：标记； +- [path](#路径-path)：路径。 +- [text](#文本-text)：文本； ## 各图形 Shape 的通用属性 - | 属性名 | 含义 | 备注 | | --- | --- | --- | -| fill | 设置用于填充绘画的颜色、渐变或模式 | 对应 canvas 属性 `fillStyle` | -| stroke | 设置用于笔触的颜色、渐变或模式 | 对应 canvas 属性 `strokeStyle` | +| fill | 设置用于填充绘画的颜色、渐变或模式 | 对应 Canvas 属性 `fillStyle` | +| stroke | 设置用于笔触的颜色、渐变或模式 | 对应 Canvas 属性 `strokeStyle` | | shadowColor | 设置用于阴影的颜色 | | | shadowBlur | 设置用于阴影的模糊级别 | 数值越大，越模糊 | | shadowOffsetX | 设置阴影距形状的水平距离 | | | shadowOffsetY | 设置阴影距形状的垂直距离 | | -| opacity | 设置绘图的当前 alpha 或透明值 | 对应 canvas 属性 `globalAlpha` | +| opacity | 设置绘图的当前 alpha 或透明值 | 对应 Canvas 属性 `globalAlpha` | ### 用法 ```javascript @@ -44,11 +43,11 @@ group.addShape('rect', { ## 圆图形 Circle ### 属性 -| 属性名 | 含义 | 备注 | -| --- | --- | --- | -| x | 圆心的 x 坐标 | | -| y | 圆心的 y 坐标 | | -| r | 圆的半径 | | +| 属性名 | 含义 | +| --- | --- | +| x | 圆心的 x 坐标 | +| y | 圆心的 y 坐标 | +| r | 圆的半径 | ### 用法 @@ -63,14 +62,41 @@ group.addShape('circle', { }) ``` -## 椭圆图形 Ellipse + +## 矩形图形 Rect ### 属性 | 属性名 | 含义 | 备注 | | --- | --- | --- | -| x | 圆心的 x 坐标 | | -| y | 圆心的 y 坐标 | | -| rx | 水平半径 | | -| ry | 垂直半径 | | +| x | 矩形左上角的 x 坐标 | | +| y | 矩形左上角的 y 坐标 | | +| width | 矩形的宽度 | | +| height | 矩形的高度 | | +| radius | 定义圆角 | 支持整数或数组形式， 分别对应左上、右上、右下、左下角的半径：
- radius 缩写为 1 或 [ 1 ] 相当于 [ 1, 1, 1, 1 ]
- radius 缩写为 [ 1, 2 ] 相当于 [ 1, 2, 1, 2 ]
- radius 缩写为 [ 1, 2, 3 ] 相当于 [ 1, 2, 3, 2 ]
| + + +### 用法 +```javascript +group.addShape('rect', { + attrs: { + x: 150, + y: 150, + width: 150, + height: 150, + stroke: 'black', + radius: [2, 4] + } +}); +``` + + +## 椭圆图形 Ellipse +### 属性 +| 属性名 | 含义 | +| --- | --- | +| x | 圆心的 x 坐标 | +| y | 圆心的 y 坐标 | +| rx | 水平半径 | +| ry | 垂直半径 | ### 用法 @@ -86,6 +112,23 @@ group.addShape('ellipse', { }) ``` +## 多边形图形 Polygon +### 属性 +| 属性名 | 含义 | 备注 | +| --- | --- | --- | +| points | 多边形的所有端点坐标 | 数组形式 | + + +### 用法 +```javascript +group.addShape('polygon', { + attrs: { + points:[[ 30, 30 ], [ 40, 20 ], [ 30, 50 ], [ 60, 100 ]], + fill: 'red' + } +}); +``` + ## 扇形图形 Fan ### 属性 | 属性名 | 含义 | 备注 | @@ -94,8 +137,8 @@ group.addShape('ellipse', { | y | 扇形圆心的 y 坐标 | | | rs | 水平半径 | | | re | 垂直半径 | | -| startAngle | 起点弧度 | 弧度是弧度，即使用 Math.PI 表示 | -| endAngle | 终点弧度 | | +| startAngle | 起点弧度 | 弧度制，即使用 Math.PI 表示 | +| endAngle | 终点弧度 | 弧度制，即使用 Math.PI 表示 | | clockwise | 为 `true` 时顺时针渲染，为 `false` 时逆时针渲染 | | @@ -166,57 +209,15 @@ group.addShape('marker', { }); ``` -## 多边形图形 Polygon -### 属性 -| 属性名 | 含义 | 备注 | -| --- | --- | --- | -| points | 多边形的所有端点坐标 | 数组形式 | - - -### 用法 -```javascript -group.addShape('polygon', { - attrs: { - points:[[ 30, 30 ], [ 40, 20 ], [ 30, 50 ], [ 60, 100 ]], - fill: 'red' - } -}); -``` - -## 矩形图形 Rect -### 属性 -| 属性名 | 含义 | 备注 | -| --- | --- | --- | -| x | 矩形左上角的 x 坐标 | | -| y | 矩形左上角的 y 坐标 | | -| width | 矩形的宽度 | | -| height | 矩形的高度 | | -| radius | 定义圆角 | 支持整数或数组形式， 分别对应左上、右上、右下、左下角的半径：
- radius 缩写为 1 或 [ 1 ] 相当于 [ 1, 1, 1, 1 ]
- radius 缩写为 [ 1, 2 ] 相当于 [ 1, 2, 1, 2 ]
- radius 缩写为 [ 1, 2, 3 ] 相当于 [ 1, 2, 3, 2 ]
| - - -### 用法 -```javascript -group.addShape('rect', { - attrs: { - x: 150, - y: 150, - width: 150, - height: 150, - stroke: 'black', - radius: [2, 4] - } -}); -``` - ## 路径 Path -   注意： +   ⚠️注意: 边太细时候点击不中，请设置 `lineAppendWidth` 属性值。 ### 属性 | 属性名 | 含义 | 备注 | | --- | --- | --- | | path | 线条路径 | 可以是 String 形式，也可以是线段的数组。 | -| startArrow | 起始端的箭头 | 为 `true` 时为默认的箭头效果，也可以是一个自定义箭头 | -| endArrow | 末尾端的箭头 | 为 `true` 时为默认的箭头效果，也可以是一个自定义箭头 | +| startArrow | 起始端的箭头 | 为 `true` 时在边的结束端绘制默认箭头，为 `false` 时不绘制结束端箭头。也可以是一个通过 path 自定义的箭头 | +| endArrow | 末尾端的箭头 | 为 `true` 时在边的开始端绘制默认箭头，为 `false` 时不绘制开始端箭头。也可以是一个通过 path 自定义的箭头 | | lineAppendWidth | 边的击中范围 | 提升边的击中范围，扩展响应范围，数值越大，响应范围越广 | | lineCap | 设置线条的结束端点样式 | | | lineJoin | 设置两条线相交时，所创建的拐角形状 | | @@ -230,11 +231,11 @@ group.addShape('rect', { group.addShape('path', { attrs: { startArrow: { - path: 'M 10,0 L -10,-10 L -10,10 Z', // 自定义箭头为中心点在(0, 0)，指向 x 轴正方向的path + path: 'M 10,0 L -10,-10 L -10,10 Z', // 自定义箭头为中心点在(0, 0)，指向 x 轴正方向的 path d: 10 }, endArrow: { - path: 'M 10,0 L -10,-10 L -10,10 Z', // 自定义箭头为中心点在(0, 0)，指向 x 轴正方向的path + path: 'M 10,0 L -10,-10 L -10,10 Z', // 自定义箭头为中心点在(0, 0)，指向 x 轴正方向的 path d: 10 }, path: [ @@ -248,5 +249,42 @@ group.addShape('path', { }); ``` +## 文本 Text +### 属性 + +| 属性名 | 含义 | 备注 | +| --- | --- | --- | +| fill | 设置用于填充绘画的颜色、渐变或模式 | 对应 Canvas 属性 `fillStyle` | +| stroke | 设置用于笔触的颜色、渐变或模式 | 对应 Canvas 属性 `strokeStyle` | +| shadowColor | 设置用于阴影的颜色 | | +| shadowBlur | 设置用于阴影的模糊级别 | 数值越大，越模糊 | +| shadowOffsetX | 设置阴影距形状的水平距离 | | +| shadowOffsetY | 设置阴影距形状的垂直距离 | | +| opacity | 设置绘图的当前 alpha 或透明值 | 对应 Canvas 属性 `globalAlpha` | +| font | 设置文本内容的当前字体属性 | | +| textAlign | 设置文本内容的当前对齐方式 | 支持的属性：`center` / `end` / `left` / `right` / `start`，默认值为 `start` | +| textBaseline | 设置在绘制文本时使用的当前文本基线 | 支持的属性:
`top` / `middle` / `bottom` / `alphabetic` / `hanging`。默认值为 `bottom` | +| fontStyle | 字体样式 | 对应 `font-style` | +| fontVariant | 设置为小型大写字母字体 | 对应 `font-variant` | +| fontWeight | 字体粗细 | 对应 `font-weight` | +| fontSize | 字体大小 | 对应 `font-size` | +| fontFamily | 字体系列 | 对应 `font-family` | + +### 用法 + +```javascript +group.addShape('text', { + attrs: { + text: 'test text', + x: 0, + y: 10, + fontSize: 14, + textAlign: 'left', + textBaseline: 'middle', + fill: '#0000D9' + } +}); +``` + diff --git a/docs/manual/advanced/label-properties.en.md b/docs/manual/advanced/label-properties.en.md deleted file mode 100644 index a07ab7182a..0000000000 --- a/docs/manual/advanced/label-properties.en.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: 文本属性 -order: 4 ---- - -## 属性 -文本有以下可用的属性。 - -| 属性名 | 含义 | 备注 | -| --- | --- | --- | -| fill | 设置用于填充绘画的颜色、渐变或模式 | 对应 canvas 属性 `fillStyle` | -| stroke | 设置用于笔触的颜色、渐变或模式 | 对应 canvas 属性 `strokeStyle` | -| shadowColor | 设置用于阴影的颜色 | | -| shadowBlur | 设置用于阴影的模糊级别 | 数值越大，越模糊 | -| shadowOffsetX | 设置阴影距形状的水平距离 | | -| shadowOffsetY | 设置阴影距形状的垂直距离 | | -| opacity | 设置绘图的当前 alpha 或透明值 | 对应 canvas 属性 `globalAlpha` | -| font | 设置文本内容的当前字体属性 | | -| textAlign | 设置文本内容的当前对齐方式 | 支持的属性：`center`|`end`|`left`|`right`|`start`，默认值为`start` | -| textBaseline | 设置在绘制文本时使用的当前文本基线 | 支持的属性:
`top`|`middle`|`bottom` |`alphabetic`|`hanging`。默认值为 `bottom` | -| fontStyle | 字体样式 | 对应 font-style | -| fontVariant | 设置为小型大写字母字体 | 对应 font-variant | -| fontWeight | 字体粗细 | 对应 font-weight | -| fontSize | 字体大小 | 对应 font-size | -| fontFamily | 字体系列 | 对应 font-family | -| autoRotate | 是否自动旋转 | | - -## 案例 -```javascript -const data = { - nodes: [ - { - id: 'node1', - x: 100, - y: 100, - shape: 'rect', - label: 'rect' - } - ] -} - -const graph = new G6.Graph({ - container: 'mountNode', - width: 500, - height: 500 -}); -graph.data(data); -graph.render(); - -const node = graph.findById('node1') -graph.update(node, { - style: { - stroke: 'blue' - }, - labelCfg: { - style: { - fill: 'red', - shadowOffsetX: 10, - shadowOffsetY: 10, - shadowColor: 'blue', - shadowBlur: 10 - } - } -}) -``` - -通过以上代码修改node中文本的样式，效果如下图： - -download \ No newline at end of file diff --git a/docs/manual/advanced/label-properties.zh.md b/docs/manual/advanced/label-properties.zh.md deleted file mode 100644 index a07ab7182a..0000000000 --- a/docs/manual/advanced/label-properties.zh.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: 文本属性 -order: 4 ---- - -## 属性 -文本有以下可用的属性。 - -| 属性名 | 含义 | 备注 | -| --- | --- | --- | -| fill | 设置用于填充绘画的颜色、渐变或模式 | 对应 canvas 属性 `fillStyle` | -| stroke | 设置用于笔触的颜色、渐变或模式 | 对应 canvas 属性 `strokeStyle` | -| shadowColor | 设置用于阴影的颜色 | | -| shadowBlur | 设置用于阴影的模糊级别 | 数值越大，越模糊 | -| shadowOffsetX | 设置阴影距形状的水平距离 | | -| shadowOffsetY | 设置阴影距形状的垂直距离 | | -| opacity | 设置绘图的当前 alpha 或透明值 | 对应 canvas 属性 `globalAlpha` | -| font | 设置文本内容的当前字体属性 | | -| textAlign | 设置文本内容的当前对齐方式 | 支持的属性：`center`|`end`|`left`|`right`|`start`，默认值为`start` | -| textBaseline | 设置在绘制文本时使用的当前文本基线 | 支持的属性:
`top`|`middle`|`bottom` |`alphabetic`|`hanging`。默认值为 `bottom` | -| fontStyle | 字体样式 | 对应 font-style | -| fontVariant | 设置为小型大写字母字体 | 对应 font-variant | -| fontWeight | 字体粗细 | 对应 font-weight | -| fontSize | 字体大小 | 对应 font-size | -| fontFamily | 字体系列 | 对应 font-family | -| autoRotate | 是否自动旋转 | | - -## 案例 -```javascript -const data = { - nodes: [ - { - id: 'node1', - x: 100, - y: 100, - shape: 'rect', - label: 'rect' - } - ] -} - -const graph = new G6.Graph({ - container: 'mountNode', - width: 500, - height: 500 -}); -graph.data(data); -graph.render(); - -const node = graph.findById('node1') -graph.update(node, { - style: { - stroke: 'blue' - }, - labelCfg: { - style: { - fill: 'red', - shadowOffsetX: 10, - shadowOffsetY: 10, - shadowColor: 'blue', - shadowBlur: 10 - } - } -}) -``` - -通过以上代码修改node中文本的样式，效果如下图： - -download \ No newline at end of file diff --git a/docs/manual/advanced/lock-node.en.md b/docs/manual/advanced/lock-node.en.md new file mode 100644 index 0000000000..c0c2b38028 --- /dev/null +++ b/docs/manual/advanced/lock-node.en.md @@ -0,0 +1,213 @@ +--- +title: Lock Node +order: 10 +--- + +The functions for locking a node `lock()`, `unlock()`, and `hasLocked()` are supported by the versions from G6 V3.1.4. The locked node will not response the drag event any more. But it still can be moved while dragging and zooming the canvas. You can register a [Custom Behavior](/en/docs/manual/advanced/custom-behavior) to fix the node when dragging and zooming. + + +## Fix the Locked Node While Dragging +The built-in `drag-canvas` in G6 does not take the locked node into consideration. In most situations, it is a reasonable Behavior. For some special requirements that require to fix hte locked node when dragging, you can register a custom Behavior as shown bolow to achieve them. +```javascript +import G6 from '@antv/g6'; +const Util = G6.Util; +const abs = Math.abs; +const DRAG_OFFSET = 10; +const body = document.body; +const ALLOW_EVENTS = [ 16, 17, 18 ]; + +G6.registerBehavior('drag-canvas-exclude-lockedNode', { + getDefaultCfg() { + return { + direction: 'both' + }; + }, + getEvents() { + return { + 'canvas:mousedown': 'onMouseDown', + 'canvas:mousemove': 'onMouseMove', + 'canvas:mouseup': 'onMouseUp', + 'canvas:click': 'onMouseUp', + 'canvas:mouseleave': 'onOutOfRange', + keyup: 'onKeyUp', + keydown: 'onKeyDown' + }; + }, + updateViewport(e) { + const origin = this.origin; + const clientX = +e.clientX; + const clientY = +e.clientY; + if (isNaN(clientX) || isNaN(clientY)) { + return; + } + let dx = clientX - origin.x; + let dy = clientY - origin.y; + if (this.get('direction') === 'x') { + dy = 0; + } else if (this.get('direction') === 'y') { + dx = 0; + } + this.origin = { + x: clientX, + y: clientY + }; + // The difference to built-in drag-canvas: + const lockedNodes = this.graph.findAll('node', node => !node.hasLocked()); + lockedNodes.forEach(node => { + node.get('group').translate(dx, dy); + }); + this.graph.paint(); + }, + onMouseDown(e) { + if (this.keydown) { + return; + } + + this.origin = { x: e.clientX, y: e.clientY }; + this.dragging = false; + }, + onMouseMove(e) { + if (this.keydown) { + return; + } + + e = Util.cloneEvent(e); + const graph = this.graph; + if (!this.origin) { return; } + if (this.origin && !this.dragging) { + if (abs(this.origin.x - e.clientX) + abs(this.origin.y - e.clientY) < DRAG_OFFSET) { + return; + } + if (this.shouldBegin.call(this, e)) { + e.type = 'dragstart'; + graph.emit('canvas:dragstart', e); + this.dragging = true; + } + } + if (this.dragging) { + e.type = 'drag'; + graph.emit('canvas:drag', e); + } + if (this.shouldUpdate.call(this, e)) { + this.updateViewport(e); + } + }, + onMouseUp(e) { + if (this.keydown) { + return; + } + + if (!this.dragging) { + this.origin = null; + return; + } + e = Util.cloneEvent(e); + const graph = this.graph; + if (this.shouldEnd.call(this, e)) { + this.updateViewport(e); + } + e.type = 'dragend'; + graph.emit('canvas:dragend', e); + this.endDrag(); + }, + endDrag() { + if (this.dragging) { + this.origin = null; + this.dragging = false; + // Check whether it exists mouseup event outside. Unbind it if it exists. + const fn = this.fn; + if (fn) { + body.removeEventListener('mouseup', fn, false); + this.fn = null; + } + } + }, + // If user move the mouse out of the canvas when dragging, the drag event might not be ended by releasing the mouse. Thus, listen to the mouseup event ouside the canvas to end it. + onOutOfRange(e) { + if (this.dragging) { + const self = this; + const canvasElement = self.graph.get('canvas').get('el'); + const fn = ev => { + if (ev.target !== canvasElement) { + self.onMouseUp(e); + } + }; + this.fn = fn; + body.addEventListener('mouseup', fn, false); + } + }, + onKeyDown(e) { + const code = e.keyCode || e.which; + if (!code) { + return; + } + if (ALLOW_EVENTS.indexOf(code) > -1) { + this.keydown = true; + } else { + this.keydown = false; + } + }, + onKeyUp() { + this.keydown = false; + } +}); + +``` + + +## Fix the Locked Node While Zooming +Built-in Behavior `zoom-canvas` zooms all the nodes including locked nodes. Register a custom Behavior to fix the locked nodes. + +```javascript +const DELTA = 0.05; + +G6.registerBehavior('zoom-canvas-exclude-lockedNode', { + getDefaultCfg() { + return { + sensitivity: 2, + minZoom: 0.1, + maxZoom: 10 + }; + }, + getEvents() { + return { + wheel: 'onWheel' + }; + }, + onWheel(e) { + e.preventDefault(); + if (!this.shouldUpdate.call(this, e)) { + return; + } + const graph = this.graph; + const canvas = graph.get('canvas'); + const point = canvas.getPointByClient(e.clientX, e.clientY); + const sensitivity = this.get('sensitivity'); + let ratio = graph.getZoom(); + // To be Compatible with IE, Firefox, and Chrome + if (e.wheelDelta < 0) { + ratio = 1 - DELTA * sensitivity; + } else { + ratio = 1 + DELTA * sensitivity; + } + const zoom = ratio * graph.getZoom(); + if (zoom > this.get('maxZoom') || zoom < this.get('minZoom')) { + return; + } + graph.zoom(ratio, { x: point.x, y: point.y }); + const lockedNodes = this.graph.findAll('node', node => !node.hasLocked()); + lockedNodes.forEach(node => { + const matrix = Util.clone(node.get('group').getMatrix()); + const center = node.getModel(); + Util.mat3.translate(matrix, matrix, [ -center.x, -center.y ]); + Util.mat3.scale(matrix, matrix, [ ratio, ratio ]); + Util.mat3.translate(matrix, matrix, [ center.x, center.y ]); + node.get('group').setMatrix(matrix); + }); + graph.paint(); + graph.emit('wheelzoom', e); + } +}); + +``` + diff --git a/docs/manual/advanced/lock-node.md b/docs/manual/advanced/lock-node.zh.md similarity index 97% rename from docs/manual/advanced/lock-node.md rename to docs/manual/advanced/lock-node.zh.md index dd02fe2b54..524efe2248 100644 --- a/docs/manual/advanced/lock-node.md +++ b/docs/manual/advanced/lock-node.zh.md @@ -1,5 +1,5 @@ --- -title: 锁定节点 +title: Lock Node order: 10 --- @@ -183,10 +183,9 @@ G6.registerBehavior('zoom-canvas-exclude-lockedNode', { const graph = this.graph; const canvas = graph.get('canvas'); const point = canvas.getPointByClient(e.clientX, e.clientY); - const pixelRatio = canvas.get('pixelRatio'); const sensitivity = this.get('sensitivity'); let ratio = graph.getZoom(); - // 兼容IE、Firefox及Chrome + // 兼容 IE、Firefox 及 Chrome if (e.wheelDelta < 0) { ratio = 1 - DELTA * sensitivity; } else { @@ -196,7 +195,7 @@ G6.registerBehavior('zoom-canvas-exclude-lockedNode', { if (zoom > this.get('maxZoom') || zoom < this.get('minZoom')) { return; } - graph.zoom(ratio, { x: point.x / pixelRatio, y: point.y / pixelRatio }); + graph.zoom(ratio, { x: point.x, y: point.y }); const lockedNodes = this.graph.findAll('node', node => !node.hasLocked()); lockedNodes.forEach(node => { const matrix = Util.clone(node.get('group').getMatrix()); diff --git a/docs/manual/advanced/mode-and-custom-behavior.en.md b/docs/manual/advanced/mode-and-custom-behavior.en.md index 02dc5993ed..4f77bc05dc 100644 --- a/docs/manual/advanced/mode-and-custom-behavior.en.md +++ b/docs/manual/advanced/mode-and-custom-behavior.en.md @@ -1,31 +1,32 @@ --- -title: 交互模式 Mode +title: Interaction Mode order: 7 --- -本章以添加节点及在两个节点之间连线为例进行介绍 G6 中的交互。在阅读本章之前，需要先熟悉以下内容： +In this chapter, we will introduce the interactions in G6 by adding nodes and edges. You nee to be familiar with the following before reading this chapter: -- [自定义交互行为 Behavior](/zh/docs/manual/advanced/custom-behavior)； -- [交互模式 Mode](/zh/docs/manual/middle/states/mode)。 +- [Custom Behavior](/en/docs/manual/advanced/custom-behavior); +- [Mode](/en/docs/manual/middle/states/mode). -
上图是本文要实现的最终效果。完整 demo 代码参见：[动态添加元素](https://codepen.io/Yanyan-Wang/pen/qBBNaye)。
方下拉菜单中有三个选项，用于切换交互模式 mode： +
The final result in shown above. The complete code: Adding Items
There are three mode options in the drop-down menu on the upper left. -- 选择“默认”按钮时，切换到 default 交互模式：拖拽节点时节点跟随鼠标移动；点击节点时选中该节点； -- 选择“添加节点”按钮时，切换到 addNode 交互模式：点击空白区域在点击处增加一个节点；点击节点时选中该节点； -- 选择“添加边”按钮时，切换到 addEdge 交互模式：依次点击两个节点将会在这两个节点之间添加一条边。 +- Switch to the default interactive mode when the "Default" button is selected: The dragged node will move with the mouse; The node will be selected by clicking; +- Switch to the addNode interactive mode when the "Add Node" button is selected: Add a node by clicking canvas; Select a node by clicking node; +- Switch to the addEdge interactive mode when the "Add Edge" button is selected: Add an edge by clicking the end nodes in order. -**使用多个 mode 的原因**
  相同的鼠标操作，在不同场景下有不同的含义。例如： +**The reason for using multiple modes:**
+The same mouse operation has different meanings in different scenarios. For example: -- 点击空白画布取消目前图上所有节点的选中状态、点击空白画布在响应位置添加节点，这两种需求都对应了用户点击画布空白处的操作； -- 点击选中、点击两个节点添加边都涉及到了鼠标在节点上的点击操作。 +- Canceling the selected state by clicking the canvas V.S. Adding new node on the clicked position on the canvas. Both these two requirements are binded to the event of clicking the canvas; +- Selecting a node by clicking it V.S. Adding an edge by clicking two end nodes. Both these two requirements are binded to the event of clicking the node. -为了区分这些操作的含义，我们使用交互模式 mode 划分不同的场景。
+To distinguish the meanings of these operations, we utilize the interaction modes on a graph for different scenarios .
-## 前提代码 -下面 HTML 代码是本文的基础代码，后续功能将在这份代码中增量添加。下面代码定义了左上方的下拉菜单，以及后面将会用到图上的初始数据 `data`。 +## Prerequisite Code +Here goes the basic HTML code for this chapter. We will add new codes incrementally to enable new functions. This prerequisite code defines the drop-down menu and the source `data`. ```html @@ -34,16 +35,16 @@ order: 7 Interactively Add - +
``` -⚠️**Attention** +⚠️Attention: - Replace `{$version}` by the version number. e.g. `3.2.3`; -- The last version of G6 is 3.2.3, which can be checked on [npm](https://www.npmjs.com/package/@antv/g6); -- Please refer to the branch in Github: [https://github.com/antvis/g6/tree/master](https://github.com/antvis/g6/tree/master) for more detail. +- The last version of G6 is 3.2.3, which can be checked on NPM; +- Please refer to the branch in Github: https://github.com/antvis/g6/tree/master for more detail. ## Getting Started @@ -59,7 +59,7 @@ Create an HTML container for graph canvas, `div` tag in general. G6 will append ### Step 2 Data Preparation -The data for G6 should be JSON format, includes array attributes `nodes` and `edges`: +The data for G6 should be JSON format, includes arrays `nodes` and `edges`: ```javascript const data = { @@ -81,11 +81,11 @@ const data = { }; ``` -⚠️**Attention** +⚠️Attention: - `nodes` is an array of nodes, the `id` is unique and required property; the `x` and `y` are coordinates of the node; -- `edges` is an array of edges, `source` and `target` are required, represent the `id` of the source node and the `id` of the target node respectively. -- The properties of node and edge are described in [Properties of Nodes](/en/docs/api/properties/NodeProperties) and [Properties of Edges](/en/docs/api/properties/EdgeProperties) +- `edges` is an array of edges, `source` and `target` are required, represent the `id` of the source node and the `id` of the target node respectively; +- The properties of node and edge are described in [Built-in Nodes](/en/docs/manual/middle/elements/nodes/defaultNode) and [Built-in Edges](/en/docs/manual/middle/elements/edges/defaultEdge). ### Step 3 Instantiate the Graph @@ -167,9 +167,9 @@ graph.render(); // Render the graph ``` ## Using G6 with React -We provide a demo about using G6 with React: [Demo](https://github.com/baizn/g6-in-react). +We provide a demo about using G6 with React: Demo. -For more information about it, please refer to [Using G6 with React](/zh/docs/manual/middle/g6InReact). Welcome the [Issues](https://github.com/antvis/g6/issues)。 +For more information about it, please refer to [Using G6 with React](/en/docs/manual/middle/g6InReact). Welcome the Issues. ## More @@ -182,4 +182,4 @@ In this chapter, we only briefly introduce the installation and usage. In G6 Tut - Configure the animation; - The usage of components. -For more advanced functions, please refer to [Key Concepts](/zh/docs/manual/middle/keyConcept) and [Advanced Guides](/zh/docs/manual/advanced/shape-and-properties)。 +For more advanced functions, please refer to [Key Concepts](/en/docs/manual/middle/graph) and [Advanced Guides](/en/docs/manual/advanced/keyconcept/shape-and-properties). diff --git a/docs/manual/getting-started.zh.md b/docs/manual/getting-started.zh.md index 3f2456cc88..e95c0973fe 100644 --- a/docs/manual/getting-started.zh.md +++ b/docs/manual/getting-started.zh.md @@ -13,9 +13,9 @@ order: 1 > ## 安装 & 引用 -在项目中引入 G6 有以下两种方式：npm 引入，CDN 引入。 +在项目中引入 G6 有以下两种方式：NPM 引入；CDN 引入。 -### 1 在项目中使用 npm 包引入 +### 1 在项目中使用 NPM 包引入 **Step 1:** 使用命令行在项目目录下执行以下命令： @@ -34,11 +34,11 @@ import G6 from '@antv/g6' ``` - 注意  +⚠️注意: - 在 `{$version}` 中填写版本号，例如 `3.2.3`； -- 最新版为 3.2.3，可以在 [npm](https://www.npmjs.com/package/@antv/g6) 查看最新版本； -- 详情参考 Github 分支：[https://github.com/antvis/g6/tree/master](https://github.com/antvis/g6/tree/master) 。 +- 最新版为 3.2.3，可以在 NPM 查看最新版本； +- 详情参考 Github 分支：https://github.com/antvis/g6/tree/master。 ## 快速试用 @@ -85,7 +85,7 @@ const data = { - `nodes` 数组中包含节点对象，唯一的 `id` 是每个节点对象中必要的属性，`x`、 `y` 用于定位； - `edges` 数组中包含边对象，`source` 和 `target` 是每条边的必要属性，分别代表了该边的起始点 `id` 与 目标点 `id`。 -- 点和边的其他属性参见链接：[节点配置文档](/zh/docs/api/properties/NodeProperties) 和 [边配置文档](/zh/docs/api/properties/EdgeProperties)。 +- 点和边的其他属性参见链接：in [内置节点](/zh/docs/manual/middle/elements/nodes/defaultNode) 和 [内置](/en/docs/manual/middle/elements/edges/defaultEdge)。 ### Step 3 创建关系图 @@ -167,9 +167,9 @@ graph.render(); // 渲染图 ``` ## React 中使用 G6 -如果你想在 React 中使用 G6 ，可以参考我们提供了的 React 中使用 G6 的 [Demo](https://github.com/baizn/g6-in-react)。 +如果你想在 React 中使用 G6 ，可以参考我们提供了的 React 中使用 G6 的 Demo。 -更多关于 React 中如何使用 G6，请参考[React 中使用 G6 的文档](/zh/docs/manual/middle/g6InReact)，有任何问题都可以通过页面底部的钉钉交流群和我们沟通，也非常欢迎给我们提 [Issues](https://github.com/antvis/g6/issues)。 +更多关于 React 中如何使用 G6，请参考 [React 中使用 G6 的文档](/zh/docs/manual/middle/g6InReact)。有任何问题都可以通过页面底部的钉钉交流群和我们沟通，也非常欢迎给我们提 issues 或 PR： https://github.com/antvis/g6/tree/master。 ## 更多 @@ -182,4 +182,4 @@ graph.render(); // 渲染图 - 增加动画； - 使用辅助组件。 -想了解更高阶的功能，请参见 [G6 核心概念](/zh/docs/manual/middle/keyConcept)，[G6 高级指引](/zh/docs/manual/advanced/shape-and-properties)。 +想了解更高阶的功能，请参见 [G6 核心概念](/zh/docs/manual/middle/graph)，[G6 高级指引](/zh/docs/manual/advanced/keyconcept/shape-and-properties)。 diff --git a/docs/manual/introduction.en.md b/docs/manual/introduction.en.md index 311d685ee8..72786f17c3 100644 --- a/docs/manual/introduction.en.md +++ b/docs/manual/introduction.en.md @@ -18,7 +18,7 @@ redirect_from: ## What is G6 -[G6](https://github.com/antvis/g6) is a graph visualization engine, which provides a set of basic mechanisms, including rendering, layout, analysis, interaction, animation, and other auxiliary tools. G6 aims to simplify the complex relationships, and help people to obtain the insight of relational data. +G6 is a graph visualization engine, which provides a set of basic mechanisms, including rendering, layout, analysis, interaction, animation, and other auxiliary tools. G6 aims to simplify the complex relationships, and help people to obtain the insight of relational data. @@ -28,6 +28,13 @@ Developers are able to build graph visualization **analysis** applications or gr +> Powerful Layouts + + + + +> Powerful Animation and Interactions + ## Features - Abundant Built-in Items: Nodes and edges with free configurations; - Steerable Interactions: More than 10 basic interaction behaviors ; @@ -41,10 +48,6 @@ G6 concentrates on the principle of 'good by default'. In addition, the custom m > Abundant Built-in Items - - -> Powerful Layouts - ## Installation ```bash @@ -93,21 +96,21 @@ $ npm install @antv/g6 [![Edit compassionate-lalande-5lxm7](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/compassionate-lalande-5lxm7?fontsize=14&hidenavigation=1&theme=dark) -For more information about the usage, please refer to [Getting Started](https://antv-g6.gitee.io/en/docs/manual/getting-started). +For more information about the usage, please refer to [Getting Started](/en/docs/manual/getting-started). ## Documents - [Tutorial](/en/docs/manual/tutorial/preface) -- [Key Concepts](/en/docs/manual/middle/keyConcept) -- [Advanced Guides](/en/docs/manual/advanced/shape-and-properties) +- [Key Concepts](/en/docs/manual/middle/graph) +- [Advanced Guides](/en/docs/manual/advanced/keyconcept/shape-and-properties) - [API Reference](/en/docs/api/Graph) ## Links Some implementations combined with front-end libraries from the third party: -- [Flow visualization editor powered by G6 and React](https://github.com/guozhaolong/wfd) - [Workflow Designer](https://github.com/guozhaolong/wfd)； -- [Visualization editor powered by G6 and Vue](https://github.com/caoyu48/vue-g6-editor)； -- [Visualization and graphics editor powered by G6 and Vue](https://github.com/OXOYO/X-Flowchart-Vue) - [A visual graph editor based on G6 and Vue](https://github.com/OXOYO/X-Flowchart-Vue)。 +- Flow visualization editor powered by G6 and React - Workflow Designer; +- Visualization editor powered by G6 and Vue; +- Visualization and graphics editor powered by G6 and Vue - A visual graph editor based on G6 and Vue. ## G6 Communication Group @@ -118,12 +121,12 @@ Users are welcome to join the **G6 Communication Group** (It is a DingTalk group ## How to Contribute -Please let us know what you are you going to help. Do check out [issues](https://github.com/antvis/g6/issues) for bug reports or suggestions first. +Please let us know what you are you going to help. Do check out issues for bug reports or suggestions first. -To become a contributor, please follow our [contributing guide](https://github.com/antvis/g6/blob/master/CONTRIBUTING.md). +To become a contributor, please follow our Contributing Guide. ## License -[MIT license](./LICENSE). +MIT license. diff --git a/docs/manual/introduction.zh.md b/docs/manual/introduction.zh.md index 6c89e47cf3..910835a6a3 100644 --- a/docs/manual/introduction.zh.md +++ b/docs/manual/introduction.zh.md @@ -5,30 +5,37 @@ redirect_from: - /zh/docs/manual --- - +g6 banner [![](https://img.shields.io/travis/antvis/g6.svg)](https://travis-ci.org/antvis/g6) ![](https://img.shields.io/badge/language-javascript-red.svg) ![](https://img.shields.io/badge/license-MIT-000000.svg) [![npm package](https://img.shields.io/npm/v/@antv/g6.svg)](https://www.npmjs.com/package/@antv/g6) -[![NPM downloads](http://img.shields.io/npm/dm/@antv/g6.svg)](https://npmjs.org/package/@antv/g6) -[![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g6.svg)](http://isitmaintained.com/project/antvis/g6 "Percentage of issues still open") +[![NPM downloads](https://img.shields.io/npm/dm/@antv/g6.svg)](https://npmjs.org/package/@antv/g6) +[![Percentage of issues still open](https://isitmaintained.com/badge/open/antvis/g6.svg)](https://isitmaintained.com/project/antvis/g6 "Percentage of issues still open") [English Introduction](/en/docs/manual/introduction/) ## 什么是 G6 -[G6](https://github.com/antvis/g6) 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。 +G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。 基于 G6，用户可以快速搭建自己的 **图分析** 或 **图编辑** 应用。 -如果你还没有使用过 G6， 建议通过[快速上手](./getting-started)先体验一下 G6 的魅力。 +如果你还没有使用过 G6， 建议通过 [快速上手](/zh/docs/manual/getting-started) 抢先体验 G6 的魅力。 +> 强大的布局 + + + + +> 强大的动画及交互 + ## G6 的特性 G6 作为一款专业的图可视化引擎，具有以下特性： - 丰富的元素：内置丰富的节点与边元素，自由配置，支持自定义； @@ -43,14 +50,10 @@ G6 作为一款专业的图可视化引擎，具有以下特性： >丰富的图元素 - - -> 强大的布局及动画 - ## G6 文档 - [G6 入门教程](/zh/docs/manual/tutorial/preface) -- [G6 核心概念](/zh/docs/manual/middle/keyConcept) -- [G6 高级指引](/zh/docs/manual/advanced/shape-and-properties) +- [G6 核心概念](/zh/docs/manual/middle/graph) +- [G6 高级指引](/zh/docs/manual/advanced/keyconcept/shape-and-properties) - [API](/zh/docs/api/Graph) ## 快速上手 @@ -93,14 +96,14 @@ G6 作为一款专业的图可视化引擎，具有以下特性： graph.render(); ``` -更详细的内容请参考[快速上手](./getting-started)文档。 +更详细的内容请参考 [快速上手](/zh/docs/manual/getting-startedd) 文档。 ## 友情链接 结合前端库的第三方实现： -- [基于 G6 和 React 的可视化流程编辑器](https://github.com/guozhaolong/wfd) - [Workflow Designer](https://github.com/guozhaolong/wfd)； -- [基于 G6 和 Vue 的可视化编辑器](https://github.com/caoyu48/vue-g6-editor)； -- [基于 G6 和 Vue 的可视化图形编辑器](https://github.com/OXOYO/X-Flowchart-Vue) - [A visual graph editor based on G6 and Vue](https://github.com/OXOYO/X-Flowchart-Vue)。 +- 基于 G6 和 React 的可视化流程编辑器 - Workflow Designer； +- 基于 G6 和 Vue 的可视化编辑器[]()； +- 基于 G6 和 Vue 的可视化图形编辑器 - A visual graph editor based on G6 and Vue。 ## G6 图可视化交流群 @@ -110,11 +113,11 @@ G6 作为一款专业的图可视化引擎，具有以下特性： ## 如何贡献 -请让我们知道您要解决或贡献什么，所以在贡献之前请先提交 [issues](https://github.com/antvis/g6/issues) 描述 bug 或建议。 +请让我们知道您要解决或贡献什么，所以在贡献之前请先提交 issues 描述 bug 或建议。 -成为一个贡献者前请阅读 [代码贡献规范](https://github.com/antvis/g6/blob/master/CONTRIBUTING.zh-CN.md). +成为一个贡献者前请阅读 代码贡献规范。 ## License -[MIT license](https://github.com/antvis/g6/blob/master/LICENSE). +MIT license。 diff --git a/docs/manual/middle/elements/edgeVisible.en.md b/docs/manual/middle/elements/edgeVisible.en.md index 82fae4374f..4759b03e60 100644 --- a/docs/manual/middle/elements/edgeVisible.en.md +++ b/docs/manual/middle/elements/edgeVisible.en.md @@ -6,16 +6,16 @@ order: 5 Show and hide the node or the edge by the following four functions: ```javascript -// Show the instance of the node nodeItem. The property visible will be true after calling the following code +// Show the instance of the node nodeItem. The property `visible` of the node will be true after calling the following code nodeItem.show(); -// Hide the instance of the node nodeItem. The property visible will be false after calling the following code +// Hide the instance of the node nodeItem. The property `visible` of the node will be false after calling the following code nodeItem.hide(); -// Show the instance of the edge edgeItem. The property visible will be true after calling the following code +// Show the instance of the edge edgeItem. The property `visible` of the node will be true after calling the following code edgeItem.show(); -// Hide the instance of the edge edgeItem. The property visible will be false after calling the following code +// Hide the instance of the edge edgeItem. The property `visible` of the node will be false after calling the following code edgeItem.hide(); ``` diff --git a/docs/manual/middle/elements/edges/arc.en.md b/docs/manual/middle/elements/edges/arc.en.md index b87004ab7e..903a525b1f 100644 --- a/docs/manual/middle/elements/edges/arc.en.md +++ b/docs/manual/middle/elements/edges/arc.en.md @@ -7,7 +7,7 @@ A built-in edge Arc has the default style as below.
+### Special Property: curveOffset +`curveOffset` is the special property for arc edge, which controlls the size and the bending direction of the arc. The following code shows how to configure the `curveOffset` globally when instantiating a Graph.
```javascript const data = { @@ -114,12 +114,12 @@ graph.data(data); graph.render(); ``` -⚠️**Attention:**
`linkCenter: true` is assigned to the graph in the code above to ensure the arc edges link to the center of their end nodes. +⚠️Attention:
`linkCenter: true` is assigned to the graph in the code above to ensure the arc edges link to the center of their end nodes. ### style -`style` is an object which is the same as the common style attribute of edge. Refer to [Built-in Edges](/en/docs/manual/middle/elements/edges/defaultEdge). -Base on the code in [curveOffset](#Special Attribute: curveOffset) section, we add `style` to `defaultEdge`. +`style` is an object which is the same as the [Common Edge Style Properties](/en/docs/manual/middle/elements/edges/defaultEdge/#style). +Base on the code in [curveOffset](#special-property-curveoffset) section, we add `style` to `defaultEdge`.
! ```javascript @@ -129,7 +129,7 @@ const data = { const graph = new G6.Graph({ // ... Other configurations for graph defaultEdge: { - // ... Other attributes for edges + // ... Other properties for edges style: { stroke: '#088', lineWidth: 3 @@ -141,8 +141,8 @@ const graph = new G6.Graph({ ### labelCfg -`labelCfg` is an object which is the same as the common attribute of edge. Refer to [Built-in Edges]. -Base on the code in [Special Attribute: curveOffset](#Special Attribute: curveOffset) section, we add `labelCfg` to `defaultEdge`.
+`labelCfg` is an object which is the same as the [Common Edge Label Properties](/en/docs/manual/middle/elements/edges/defaultEdge/#label-and-labelcfg). +Base on the code in [Special Property: curveOffset](#special-property-curveoffset) section, we add `labelCfg` to `defaultEdge`.
```javascript const data = { @@ -151,7 +151,7 @@ const data = { const graph = new G6.Graph({ // ... Other configurations for graph defaultEdge: { - // ... Other attributes for edges + // ... Other properties for edges labelCfg: { autoRotate: true, refY: -30, diff --git a/docs/manual/middle/elements/edges/arc.zh.md b/docs/manual/middle/elements/edges/arc.zh.md index 47b5c560a4..0d39caff98 100644 --- a/docs/manual/middle/elements/edges/arc.zh.md +++ b/docs/manual/middle/elements/edges/arc.zh.md @@ -7,7 +7,7 @@ G6 内置了圆弧 arc 边，其默认样式如下。
+ ```javascript const data = { nodes: [{ @@ -113,11 +114,11 @@ graph.data(data); graph.render(); ``` -⚠️**注意：**
上面代码使用了 graph 的配置项 `linkCenter: true` 以设置 arc 边连入节点的中心，保证美观性。 +⚠️注意:
上面代码使用了 graph 的配置项 `linkCenter: true` 以设置 arc 边连入节点的中心，保证美观性。 ### 样式属性 style -Object 类型。配置项与边的通用样式属性相同，见 [内置边](/zh/docs/manual/middle/elements/edges/defaultEdge)。基于上面 [特殊属性：弧度 curveOffset](#特殊属性：弧度 curveOffset) 中的代码，下面代码在 `defaultEdge` 中增加了 `style` 配置项进行边的样式的配置，使之达到如下图效果。
! +Object 类型。配置项与 [边通用样式属性](/zh/docs/manual/middle/elements/edges/defaultEdge/#样式属性-style) 相同。基于上面 [特殊属性：弧度 curveOffset](#特殊属性：弧度-curveoffset) 中的代码，下面代码在 `defaultEdge` 中增加了 `style` 配置项进行边的样式的配置，使之达到如下图效果。
```javascript const data = { @@ -138,7 +139,7 @@ const graph = new G6.Graph({ ### 标签文本配置 labelCfg -Object 类型。其配置与边的通用文本配置相同，见 [内置边](/zh/docs/manual/middle/elements/edges/defaultEdge)。基于上面 [弧度 curveOffset](/zh/docs/manual/middle/elements/edges/arc/#特殊属性：弧度-curveoffset) 中的代码，下面代码在 `defaultEdge` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
+Object 类型。支持 [边通用标签配置](/zh/docs/manual/middle/elements/edges/defaultEdge/#标签文本-label-及其配置-labelcfg)。基于上面 [弧度 curveOffset](/zh/docs/manual/middle/elements/edges/arc/#特殊属性：弧度-curveoffset) 中的代码，下面代码在 `defaultEdge` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
```javascript const data = { diff --git a/docs/manual/middle/elements/edges/cubic.en.md b/docs/manual/middle/elements/edges/cubic.en.md index a16aceeb58..10f0f1e1b9 100644 --- a/docs/manual/middle/elements/edges/cubic.en.md +++ b/docs/manual/middle/elements/edges/cubic.en.md @@ -8,7 +8,7 @@ A built-in edge Cubic has the default style as below.
## Usage -As stated in [Built-in Edges](../defaultEdge) , there are two ways to configure the edge: Configure it when instantiating a Graph globally; Configure it in the data. +As stated in [Built-in Edges](/en/docs/manual/middle/elements/edges/defaultEdge) , there are two ways to configure the edge: Configure it when instantiating a Graph globally; Configure it in the data. ### 1 Global Configure When Instantiating a Graph @@ -27,7 +27,7 @@ const graph = new G6.Graph({ ### 2 Configure in the Data -To configure different edges with different attributes, you can write the attributes into the edge data. +To configure different edges with different properties, you can write the properties into the edge data. ```javascript const data = { nodes: [ @@ -39,7 +39,7 @@ const data = { shape: 'cubic', //... // Other configurations for edges style: { - //... // Style attributes for edges + //... // Style properties for edges } }, //... // Other edges @@ -48,8 +48,8 @@ const data = { ``` -## Attribute -Cubic edge has the attributes shown below. The attributes with object type will be described in detail after the table. +## Property +Cubic edge has the [Common Edge Properties](/en/docs/manual/middle/elements/edges/defaultEdge/#the-common-property), and some commonly used properties are shown below. The properties with object type will be described in detail after the table. | Name | Description | Type | Remark | | --- | --- | --- | --- | @@ -57,11 +57,12 @@ Cubic edge has the attributes shown below. The attributes with object type will | style | The default style of edge | Object | Correspond to the styles in Canvas | | label | The text of the label | String | | | labelCfg | The configurations of the label | Object | | +| controlPoints | The array of the control points for the cubic curve | Array | If it is not assgined, the default control points on the 1/3 and 2/3 of the curve will take effect. e.g. `[{ x: 10, y: 20 }, { x: 15, y: 30 }]` | ### style -`style` is an object which is the same as the common style attribute of edge. Refer to [Built-in Edges]. +`style` is an object which is the same as the [Common Edge Style Properties](/en/docs/manual/middle/elements/edges/defaultEdge/#style). The following code shows how to configure the `style` globally when instantiating a Graph.
```javascript @@ -103,7 +104,7 @@ graph.render(); ### labelCfg -`labelCfg` is an object which is the same as the common attribute of edge. Refer to [Built-in Edges](/en/docs/manual/middle/elements/edges/defaultEdge). +`labelCfg` is an object which is the same as the [Common Edge Label Properties](/en/docs/manual/middle/elements/edges/defaultEdge/#label-and-labelcfg). Base on the code in [style](#style) section, we add `labelCfg` to `defaultEdge`.
```javascript @@ -113,7 +114,7 @@ const data = { const graph = new G6.Graph({ // ... Other configurations for graph defaultEdge: { - // ... Other attributes for edges + // ... Other properties for edges labelCfg: { autoRotate: true, refY: 10, diff --git a/docs/manual/middle/elements/edges/cubic.zh.md b/docs/manual/middle/elements/edges/cubic.zh.md index 75cc73fd2f..252d27e9fb 100644 --- a/docs/manual/middle/elements/edges/cubic.zh.md +++ b/docs/manual/middle/elements/edges/cubic.zh.md @@ -8,7 +8,7 @@ G6 内置了 cubic 边，其默认样式如下。
## 使用方法 -如 [内置边](../defaultEdge) 一节所示，配置边的方式有两种：实例化图时全局配置，在数据中动态配置。 +如 [内置边](/zh/docs/manual/middle/elements/edges/defaultEdge) 一节所示，配置边的方式有两种：实例化图时全局配置，在数据中动态配置。 ### 1 实例化图时全局配置 @@ -49,7 +49,7 @@ const data = { ## 配置项说明 -quadratic 边支持以下的配置项，对于 Object 类型的配置项将在后面有详细讲解： +quadratic 边支持 [边通用配置项](zh/docs/manual/middle/elements/edges/defaultEdge/#边的通用属性)，以下表格对部分常用配置项进行说明。对于 Object 类型的配置项将在后面有详细讲解： | 名称 | 含义 | 类型 | 备注 | | --- | --- | --- | --- | @@ -57,11 +57,11 @@ quadratic 边支持以下的配置项，对于 Object 类型的配置项将在 | style | 边的样式 | Object | Canvas 支持的属性 | | label | 标签文本文字 | String | | | labelCfg | 标签文本配置项 | Object | | - +| controlPoints | 控制点数组 | Array | 不指定时将会使用默认的控制点：曲线 1/3 和 2/3 处。示例：`[{ x: 10, y: 20 }, { x: 15, y: 30 }]` | ### 样式属性 style -Object 类型。配置项与边的通用样式属性相同，见 [内置边](/zh/docs/manual/middle/elements/edges/defaultEdge)。下面代码演示在实例化图时全局配置方法中配置 `style`，以达到下图效果。
+Object 类型。配置项与 [边通用样式属性](/zh/docs/manual/middle/elements/edges/defaultEdge/#样式属性-style) 相同。下面代码演示在实例化图时全局配置方法中配置 `style`，以达到下图效果。
```javascript const data = { @@ -102,7 +102,7 @@ graph.render(); ### 标签文本配置 labelCfg -Object 类型。其配置与边的通用文本配置相同，见 [内置边](/zh/docs/manual/middle/elements/edges/defaultEdge)。基于上面 [样式属性 style](/zh/docs/manual/middle/elements/edges/defaultEdge/#样式属性-style) 中的代码，下面代码在 `defaultEdge` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
+Object 类型。支持 [边通用标签配置](/zh/docs/manual/middle/elements/edges/defaultEdge/#标签文本-label-及其配置-labelcfg)。基于上面 [样式属性 style](/zh/docs/manual/middle/elements/edges/defaultEdge/#样式属性-style) 中的代码，下面代码在 `defaultEdge` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
```javascript const data = { diff --git a/docs/manual/middle/elements/edges/defaultEdge.en.md b/docs/manual/middle/elements/edges/defaultEdge.en.md index ba26355a6d..dc1949a3f0 100644 --- a/docs/manual/middle/elements/edges/defaultEdge.en.md +++ b/docs/manual/middle/elements/edges/defaultEdge.en.md @@ -18,20 +18,20 @@ There are 9 built-in edges in G6: ## Types of Default Nodes -The table below shows the built-in edges and their special attributes: +The table below shows the built-in edges and their special properties: | Name | Description | | | --- | --- | --- | -| line | A straight line connected two end nodes:
- controlPoints do not take effect
- Refer to attributes of line for more information
| | -| polyline | A polyline with one or more control points:
- controlPoints is the set of all the control points of polyline. If it is not assigned, G6 will calculate it by [A* Algorithm](https://yuque.alibaba-inc.com/antv/blog/polyline-edges-with-border-radius)
- Refer to attributes of polyline for more information
| | -| arc | An arc connects two end nodes:
- controlPoints do not take effects
- control the bending and direction by `curveOffset`
- Refer to attributes of arc for more informatio
| | -| quadratic | A quadratic bezier curve with one control point:
- The curve will be bended on the center if the `controlPoints` is not defined
- Refer to attributes of quadratic for more informatio
| | -| cubic | A cubic bezier curve with two control points:
- The curve will be bended on the position of 1/3 and 2/3 if the `controlPoints` is not defined
- Refer to attributes of cubic for more informatio
| | +| line | A straight line connected two end nodes:
- `controlPoints` does not take effect
- Refer to properties of line for more information
| | +| polyline | A polyline with one or more control points:
- `controlPoints` is the set of all the control points of polyline. If it is not assigned, G6 will calculate it by A* algorithm
- Refer to properties of polyline for more information
| | +| arc | An arc connects two end nodes:
- `controlPoints` does not take effects
- control the bending and direction by `curveOffset`
- Refer to properties of arc for more informatio
| | +| quadratic | A quadratic bezier curve with one control point:
- The curve will be bended on the center if the `controlPoints` is not defined
- Refer to properties of quadratic for more informatio
| | +| cubic | A cubic bezier curve with two control points:
- The curve will be bended on the position of 1/3 and 2/3 if the `controlPoints` is not defined
- Refer to properties of cubic for more informatio
| | | cubic-vertical | The vertical cubic bezier curve. The user can not assign the control point for this type of edge | | -| cubic-horizontal | The horizontal cubic bezier curve. The user can not assign the control point for this type of edge | | -| loop | Self-loop edge. Refer to attributes of loop for more informatio | | +| cubic-horizontal | The horizontal cubic bezier curve. The user can not assign the control point for this type of edge | | +| loop | Self-loop edge. Refer to properties of loop for more informatio | | -## The Common Attribute +## The Common Property | Name | Required | Type | Remark | | --- | --- | --- | --- | @@ -46,21 +46,23 @@ The table below shows the built-in edges and their special attributes: | labelCfg | false | Object | The configurations of the label | -#### style -`style` is an object to configure the stroke color, shadow, and so on. Here is the commonly used attributes in `style`: + +### style +`style` is an object to configure the stroke color, shadow, and so on. Here is the commonly used properties in `style`: | Name | Required | Type | Remark | | --- | --- | --- | --- | | stroke | false | String | The stroke color | | lineWidth | false | Number | The line width | | lineAppendWidth | false | Number | The width of the response area for interaction. In other words, when the edge is too thin to be hitted by mouse, enlarge the value of `lineWidth` to widen the response area | -| endArrow | false | Boolean | Whether show the end arrow | +| endArrow | false | Boolean / Object | The arrow on the end of the edge. When `startArrow` is `true`, show a default arrow on the end of the edge. User can customize an arrow by path, e.g.:
endArrow: {
path: 'M 10,0 L -10,-10 L -10,10 Z', // Customize the path for the arrow
d: 10 // offset
} | +| startArrow | false | Boolean / Object | The arrow on the start of the edge. When `startArrow` is `true`, show a default arrow on the start of the edge. User can customize an arrow by path, e.g.:
endArrow: {
path: 'M 10,0 L -10,-10 L -10,10 Z', // Customize the path for the arrow
d: 10 // offset
} | | strokeOpacity | false | Number | The stroke opacity | | shadowColor | false | String | The color of the shadow | | shadowBlur | false | Number | The blur degree of the shadow | | shadowOffsetX | false | Number | The x offset of the shadow | | shadowOffsetX | false | Number | The y offset of the shadow | -| ... | | | | +| lineDash | false | Array | The style of the dash line. It is an array that describes the length of gaps and line segments. If the number of the elements in the array is odd, the elements will be dulplicated. Such as [5, 15, 25] will be regarded as [5, 15, 25, 5, 15, 25] | Configure `style` globally when instantiating the Graph: @@ -70,17 +72,17 @@ const graph = new G6.Graph({ width: 800, height: 600, defaultEdge: { - // ... Other attributes for edges + // ... Other properties for edges style: { stroke: '#eaff8f', lineWidth: 5, - // ... Other style attributes + // ... Other style properties } } }) ``` -#### label and labelCfg +### label and labelCfg `label` is a string which indicates the content of the label.
`labelCfg` is an object to configure the label. The commonly used configurations of `labelCfg`: | Name | Required | Type | Remark | @@ -88,8 +90,8 @@ const graph = new G6.Graph({ | refX | false | Number | x offset of the label | | refY | false | Number | y offset of the label | | position | false | String | The relative position to the edge. Options: `'start'`, `'middle'`, and `'end'`. `'middle'` by default | -| autoRotate | false | Boolean | Whether activate ratating according to the edge automatically. `false` by default | -| style | false | Object | The style attribute of the label | +| autoRotate | false | Boolean | Whether to activate ratating according to the edge automatically. `false` by default | +| style | false | Object | The style property of the label | The commonly used configurations for the `style` in the above table are: @@ -102,7 +104,7 @@ The commonly used configurations for the `style` in the above table are: | opacity | false | Number | The opacity | | font | false | String | The font | | fontSize | false | Number | The font size | -| ... | | | | +| ... The label styles of node and edge are the same, summarized in [Text Shape API](/en/docs/api/shapeProperties/#text) | | | | The following code shows how to configure `label` and `labelCfg` globally when instantiating a Graph: @@ -112,7 +114,7 @@ const graph = new G6.Graph({ width: 800, height: 600, defaultEdge: { - // ... Other attributes for nodes + // ... Other properties for nodes label: 'edge-label', labelCfg: { refY: -10, @@ -138,13 +140,13 @@ const graph = new G6.Graph({ height: 600, defaultEdge: { shape: 'line', - // Other attributes for all the nodes + // Other properties for all the nodes } }) ``` ### Configure in Data -To configure different nodes with different attributes, you can write the attributes into their data individually: +To configure different nodes with different properties, you can write the properties into their data individually: ```javascript const data = { nodes: [ @@ -154,17 +156,17 @@ const data = { source: 'node0', target: 'node1' shape: 'polyline', - // ... // Other attributes for this edge + // ... // Other properties for this edge style: { - // ... // Style attributes for this edge + // ... // Style properties for this edge } },{ source: 'node1', target: 'node2' shape: 'cubic', - // ... // Other attributes for this edge + // ... // Other properties for this edge style: { - // ... // Style attributes for this edge + // ... // Style properties for this edge } }, // ... // edges @@ -173,12 +175,12 @@ const data = { ``` ### Configure with graph.edge(edgeFn) -By this way, we can configure different nodes with different attributes.
+By this way, we can configure different nodes with different properties.
-⚠️**Attention:** +⚠️Attention: - `graph.edge(edgeFn)` must be called **before calling render()**. It does not take effect otherwise; -- It has the highest priority that will rewrite the same attributes configured by other ways; +- It has the highest priority that will rewrite the same properties configured by other ways; - Each edge will be updated when adding or updating items. It will cost a lot when the amount of the data is large. ```javascript // const data = ... @@ -242,8 +244,8 @@ graph.render(); The result:
-### Adjust the Attributes -By writing the attributes into the data, we adjust the style and the label of the edges of '9-10' and '11-12'. +### Adjust the Properties +By writing the properties into the data, we adjust the style and the label of the edges of '9-10' and '11-12'. ```javascript // Move the label of this edge { @@ -268,7 +270,7 @@ By writing the attributes into the data, we adjust the style and the label of th label: 'cubic-vertical', labelCfg: { position: 'center', // The position of the label= - autoRotate: true, // Whether rotate the label according to the edge + autoRotate: true, // Whether to rotate the label according to the edge style: { stroke: 'white', // White stroke for the label lineWidth: 5, // The line width of the stroke @@ -282,4 +284,4 @@ By writing the attributes into the data, we adjust the style and the label of th ## Related Reading -- [State](../../states/state) —— Change the styles during the interaction process. +- [State](/en/docs/manual/middle/states/state) —— Change the styles during the interaction process. diff --git a/docs/manual/middle/elements/edges/defaultEdge.zh.md b/docs/manual/middle/elements/edges/defaultEdge.zh.md index e43fd1bfb6..a27be76442 100644 --- a/docs/manual/middle/elements/edges/defaultEdge.zh.md +++ b/docs/manual/middle/elements/edges/defaultEdge.zh.md @@ -11,7 +11,7 @@ G6 提供了 9 种内置边： - quadratic：二阶贝塞尔曲线； - cubic：三阶贝塞尔曲线； - cubic-vertical：垂直方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点； -- cubic-horizontal；水平方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点； +- cubic-horizontal：水平方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点； - loop：自环。 这些内置边的默认样式分别如下图所示。
@@ -22,14 +22,14 @@ G6 提供了 9 种内置边： | 名称 | 描述 | | | --- | --- | --- | -| line | 连接两个节点的直线：
- controlPoints 不生效
- 更多配置详见 line 边的配置
| | -| polyline | 多段线段构成的折线，连接两个端点：
- controlPoints 表示所有线段的拐点，不指定时根据 [A* 算法](https://yuque.alibaba-inc.com/antv/blog/polyline-edges-with-border-radius)自动生成折线
- 更多配置详见 polyline 边的配置
| | -| arc | 连接两个节点的一段圆弧：
- controlPoints 不生效
- 使用 curveOffset 指定弧的弯曲程度，其正负影响弧弯曲的方向
- 更多配置详见 arc 边的配置
| | -| quadratic | 只有一个控制点的曲线：
- controlPoints 不指定时，会默认线的一半处弯曲
- 更多配置详见 quadratic 边的配置
| | -| cubic | 有两个控制点的曲线：
- controlPoints 不指定时，会默认线的 1/3, 2/3 处弯曲
- 更多配置详见 cubic 边的配置
| | +| line | 连接两个节点的直线：
- `controlPoints` 不生效
- 更多配置详见 line 边的配置
| | +| polyline | 多段线段构成的折线，连接两个端点：
- `controlPoints` 表示所有线段的拐点，不指定时根据 A* 算法自动生成折线
- 更多配置详见 polyline 边的配置
| | +| arc | 连接两个节点的一段圆弧：
- `controlPoints` 不生效
- 使用 curveOffset 指定弧的弯曲程度，其正负影响弧弯曲的方向
- 更多配置详见 arc 边的配置
| | +| quadratic | 只有一个控制点的曲线：
- `controlPoints` 不指定时，会默认线的一半处弯曲
- 更多配置详见 quadratic 边的配置
| | +| cubic | 有两个控制点的曲线：
- `controlPoints` 不指定时，会默认线的 1/3, 2/3 处弯曲
- 更多配置详见 cubic 边的配置
| | | cubic-vertical | 垂直方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点 | | -| cubic-horizontal | 水平方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点 | | -| loop | 自环。更多配置详见 loop 边的配置 | | +| cubic-horizontal | 水平方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点 | | +| loop | 自环。更多配置详见 loop 边的配置 | | ## 边的通用属性 所有内置的边支持的通用属性： @@ -47,7 +47,7 @@ G6 提供了 9 种内置边： | labelCfg | false | Object | 文本配置项 | -#### 样式属性 style +### 样式属性 style Object 类型。通过 `style` 配置来修改边的颜色、线宽等属性。下表是 `style` 对象中常用的配置项： | 名称 | 是否必须 | 类型 | 备注 | @@ -55,13 +55,14 @@ Object 类型。通过 `style` 配置来修改边的颜色、线宽等属性。 | stroke | false | String | 边的颜色 | | lineWidth | false | Number | 边宽度 | | lineAppendWidth | false | Number | 边响应鼠标事件时的检测宽度，当 `lineWidth` 太小而不易选中时，可以通过该参数提升击中范围 | -| endArrow | false | Boolean | 边的结束端是否有箭头 | +| endArrow | false | Boolean / Object | 为 `true` 时在边的结束端绘制默认箭头，为 `false` 时不绘制结束端箭头。也可以是一个通过 path 自定义的箭头，例如：
endArrow: {
path: 'M 10,0 L -10,-10 L -10,10 Z', // 自定义箭头路径
d: 10 // 偏移量
} | +| startArrow | false | Boolean / Object | 为 `true` 时在边的开始端绘制默认箭头，为 `false` 时不绘制开始端箭头。也可以是一个通过 path 自定义的箭头，例如：
endArrow: {
path: 'M 10,0 L -10,-10 L -10,10 Z', // 自定义箭头路径
d: 10 // 偏移量
} | | strokeOpacity | false | Number | 边透明度 | | shadowColor | false | String | 阴影颜色 | | shadowBlur | false | Number | 阴影模糊程度 | | shadowOffsetX | false | Number | 阴影 x 方向偏移量 | | shadowOffsetX | false | Number | 阴影 y 方向偏移量 | -| ... | | | | +| lineDash | false | Array | 设置线的虚线样式，可以指定一个数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。 如果数组元素的数量是奇数， 数组的元素会被复制并重复。例如， [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。 | 下面代码演示在实例化图时全局配置方法中配置 `style`： @@ -81,14 +82,14 @@ const graph = new G6.Graph({ }) ``` -#### 标签文本 label 及其配置 labelCfg +### 标签文本 label 及其配置 labelCfg `label` String 类型。标签文本的文字内容。
`labelCfg` Object 类型。配置标签文本。下面是 `labelCfg` 对象中的常用配置项： | 名称 | 是否必须 | 类型 | 备注 | | --- | --- | --- | --- | | refX | false | Number | 标签在 x 方向的偏移量 | | refY | false | Number | 标签在 y 方向的偏移量 | -| position | false | String | 文本相对于边的位置，目前支持的位置有: `'start'`，`'middle'`，`'end'`。默认为`'middle'`。 | +| position | false | String | 文本相对于边的位置，目前支持的位置有：`'start'`，`'middle'`，`'end'`。默认为`'middle'`。 | | autoRotate | false | Boolean | 标签文字是否跟随边旋转，默认 `false` | | style | false | Object | 标签的样式属性 | @@ -103,7 +104,7 @@ const graph = new G6.Graph({ | opacity | false | Number | 文本透明度 | | font | false | String | 文本内容的当前字体属性 | | fontSize | false | Number | 文本字体大小 | -| ... | | | | +| ... 节点标签与边标签样式属性相同，统一整理在 [Text 图形 API](/zh/docs/api/shapeProperties/#文本-text) | | | | 下面代码演示在实例化图时全局配置方法中配置 `label` 和 `labelCfg`。 @@ -173,12 +174,14 @@ const data = { } ``` -### 使用 graph.edge(edgeFn) 配置 +### 使用 graph.edge() 该方法可以为不同边进行不同的配置。
提示： - 该方法必须**在 render 之前调用**，否则不起作用； - 由于该方法优先级最高，将覆盖其他地方对边的配置，这可能将造成一些其他配置不生效的疑惑； - 该方法在增加元素、更新元素时会被调用，如果数据量大、每条边上需要更新的内容多时，可能会有性能问题。 + + ```javascript // const data = ... // const graph = ... @@ -194,9 +197,12 @@ graph.edge((edge) => { graph.data(data); graph.render(); + ``` ## 实例演示 + + ```javascript const data = { nodes: [ @@ -281,4 +287,4 @@ graph.render(); ## 相关阅读 -- [状态 State](../../states/state) —— 交互过程中的样式变化。 +- [状态 State](/zh/docs/manual/middle/states/state) —— 交互过程中的样式变化。 diff --git a/docs/manual/middle/elements/edges/line.en.md b/docs/manual/middle/elements/edges/line.en.md index 481f29fa62..474555b454 100644 --- a/docs/manual/middle/elements/edges/line.en.md +++ b/docs/manual/middle/elements/edges/line.en.md @@ -8,7 +8,7 @@ A built-in edge Line has the default style as below.
## Usage -As stated in [Built-in Edges](../defaultEdge) , there are two ways to configure the edge: Configure it when instantiating a Graph globally; Configure it in the data. +As stated in [Built-in Edges](/en/docs/manual/middle/elements/edges/defaultEdge) , there are two ways to configure the edge: Configure it when instantiating a Graph globally; Configure it in the data. ### 1 Global Configure When Instantiating a Graph @@ -27,7 +27,7 @@ const graph = new G6.Graph({ ### 2 Configure in the Data -To configure different edges with different attributes, you can write the attributes into the edge data. +To configure different edges with different properties, you can write the properties into the edge data. ```javascript const data = { nodes: [ @@ -39,7 +39,7 @@ const data = { shape: 'line', //... // Other configurations for edges style: { - //... // Style attributes for edges + //... // Style properties for edges } }, //... // Other edges @@ -48,8 +48,8 @@ const data = { ``` -## Attribute -Cubic edge has the attributes shown below. The attributes with object type will be described in detail after the table +## Property +Cubic edge has the [Common Edge Properties](/en/docs/manual/middle/elements/edges/defaultEdge/#the-common-property), and some commonly used properties are shown below. The properties with object type will be described in detail after the table. | Name | Description | Type | Remark | | --- | --- | --- | --- | @@ -61,7 +61,7 @@ Cubic edge has the attributes shown below. The attributes with object type will ### style -`style` is an object which is the same as the common style attribute of edge. Refer to [Built-in Edges](/en/docs/manual/middle/elements/edges/defaultEdge). +`style` is an object which is the same as the [Common Edge Style Properties](/en/docs/manual/middle/elements/edges/defaultEdge/#style). The following code shows how to configure the `style` globally when instantiating a Graph.
```javascript @@ -106,7 +106,7 @@ graph.render(); ### labelCfg -`labelCfg` is an object which is the same as the common attribute of edge. Refer to [Built-in Edges]. +`labelCfg` is an object which is the same as the [Common Edge Label Properties](/en/docs/manual/middle/elements/edges/defaultEdge/#label-and-labelcfg). Base on the code in [style](#style) section, we add `labelCfg` to `defaultEdge`.
```javascript @@ -116,7 +116,7 @@ const data = { const graph = new G6.Graph({ // ... Other configurations for graph defaultEdge: { - // ... Other attributes for edges + // ... Other properties for edges labelCfg: { position: 'end', refY: -10 diff --git a/docs/manual/middle/elements/edges/line.zh.md b/docs/manual/middle/elements/edges/line.zh.md index 8cdac8d446..8c60509ec9 100644 --- a/docs/manual/middle/elements/edges/line.zh.md +++ b/docs/manual/middle/elements/edges/line.zh.md @@ -8,7 +8,7 @@ G6 内置了直线 line 边，其默认样式如下。
## 使用方法 -如 [内置边](../defaultEdge) 一节所示，配置边的方式有两种：实例化图时全局配置，在数据中动态配置。 +如 [内置边](/zh/docs/manual/middle/elements/edges/defaultEdge) 一节所示，配置边的方式有两种：实例化图时全局配置，在数据中动态配置。 ### 1 实例化图时全局配置 @@ -49,7 +49,7 @@ const data = { ## 配置项说明 -line 边支持以下的配置项，对于 Object 类型的配置项将在后面有详细讲解： +line 边支持 [边通用配置项](zh/docs/manual/middle/elements/edges/defaultEdge/#边的通用属性)，以下表格对部分常用配置项进行说明。对于 Object 类型的配置项将在后面有详细讲解： | 名称 | 含义 | 类型 | 备注 | | --- | --- | --- | --- | @@ -61,7 +61,7 @@ line 边支持以下的配置项，对于 Object 类型的配置项将在后面 ### 样式属性 style -Object 类型。配置项与边的通用样式属性相同，见 [内置边](/zh/docs/manual/middle/elements/edges/defaultEdge)。下面代码演示在实例化图时全局配置方法中配置 `style`，以达到下图效果。
+Object 类型。配置项与 [边通用样式属性](/zh/docs/manual/middle/elements/edges/defaultEdge/#样式属性-style) 相同。下面代码演示在实例化图时全局配置方法中配置 `style`，以达到下图效果。
```javascript const data = { @@ -105,7 +105,7 @@ graph.render(); ### 标签文本配置 labelCfg -Object 类型。其配置与边的通用文本配置相同，见 [内置边](/zh/docs/manual/middle/elements/edges/defaultEdge)。
基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultEdge` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
+Object 类型。支持 [边通用标签配置](/zh/docs/manual/middle/elements/edges/defaultEdge/#标签文本-label-及其配置-labelcfg)。
基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultEdge` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
```javascript const data = { diff --git a/docs/manual/middle/elements/edges/loop.en.md b/docs/manual/middle/elements/edges/loop.en.md index 08966d709e..39e7550eac 100644 --- a/docs/manual/middle/elements/edges/loop.en.md +++ b/docs/manual/middle/elements/edges/loop.en.md @@ -6,12 +6,12 @@ order: 6 A built-in edge Line has the default style as below.
-⚠️**Attention**:
loop edge is appropriate for the self-loop edges whose target node and the source node are the same. In other words, a loop edge connect a node to itself. There will be a strange result if the loop edge is applied to the edge which is not a self-loop. +⚠️Attention:
loop edge is appropriate for the self-loop edges whose target node and the source node are the same. In other words, a loop edge connect a node to itself. There will be a strange result if the loop edge is applied to the edge which is not a self-loop.
## Usage -As stated in [Built-in Edges](../defaultEdge) , there are two ways to configure the edge: Configure it when instantiating a Graph globally; Configure it in the data. +As stated in [Built-in Edges](/en/docs/manual/middle/elements/edges/defaultEdge) , there are two ways to configure the edge: Configure it when instantiating a Graph globally; Configure it in the data. ### 1 Global Configure When Instantiating a Graph @@ -30,7 +30,7 @@ const graph = new G6.Graph({ ### 2 Configure in the Data -To configure different edges with different attributes, you can write the attributes into the edge data. +To configure different edges with different properties, you can write the properties into the edge data. ```javascript const data = { nodes: [ @@ -42,7 +42,7 @@ const data = { shape: 'loop', //... // Other configurations for edges style: { - //... // Style attributes for edges + //... // Style properties for edges } }, //... // Other edges @@ -51,8 +51,8 @@ const data = { ``` -## Attribute -Loop edge has the attributes shown below. The attributes with object type will be described in detail after the table, where `loopCfg` is the special attribute for loop edge. +## Property +Loop edge has the [Common Edge Properties](/en/docs/manual/middle/elements/edges/defaultEdge/#the-common-property), and some commonly used properties are shown below. The properties with object type will be described in detail after the table, where `loopCfg` is the special property for loop edge. loop 边支持以下的配置项，对于 Object 类型的配置项将在后面有详细讲解： @@ -62,12 +62,12 @@ loop 边支持以下的配置项，对于 Object 类型的配置项将在后面 | style | The default style of edge | Object | Correspond to the styles in Canvas | | label | The text of the label | String | | | labelCfg | The configurations of the label | Object | | -| **loopCfg** | **Special attribute for loop edge** | **Object** | | +| **loopCfg** | **Special property for loop edge** | **Object** | | ### style -`style` is an object which is the same as the common style attribute of edge. Refer to [Built-in Edges]. +`style` is an object which is the same as the [Common Edge Style Properties](/en/docs/manual/middle/elements/edges/defaultEdge/#style). The following code shows how to configure the `style` globally when instantiating a Graph.
```javascript @@ -105,7 +105,7 @@ graph.render(); ### labelCfg -`labelCfg` is an object which is the same as the common attribute of edge. Refer to [Built-in Edges](/en/docs/manual/middle/elements/edges/defaultEdge). +`labelCfg` is an object which is the same as the [Common Edge Label Properties](/en/docs/manual/middle/elements/edges/defaultEdge/#label-and-labelcfg). Base on the code in [style](#style) section, we add `labelCfg` to `defaultEdge`.
```javascript @@ -115,7 +115,7 @@ const data = { const graph = new G6.Graph({ // ... Other configurations for graph defaultEdge: { - // ... Other attributes for edges + // ... Other properties for edges labelCfg: { refY: -5, refX: 30 @@ -131,7 +131,7 @@ const graph = new G6.Graph({ - `position`: The relative position to the source/target node. Options: `top`, `top-right`, `right`,`bottom-right`, `bottom`, `bottom-left`, `left`, `top-left`. `top` by default. - `dist`: The distance between the keyShape of the source/target node to the highest position of the loop. It is equal to the height of the source/target node by default. -- `clockwise`: Whether draw the loop clockwisely. `true` by default +- `clockwise`: Whether to draw the loop clockwisely. `true` by default Base on the code in [style](#style) section, we add `loopCfg` to `defaultEdge`.
@@ -142,7 +142,7 @@ const data = { const graph = new G6.Graph({ // ... Other configurations for graph defaultEdge: { - // ... Other attributes for edges + // ... Other properties for edges loopCfg: { position: 'left', dist: 100, diff --git a/docs/manual/middle/elements/edges/loop.zh.md b/docs/manual/middle/elements/edges/loop.zh.md index 5f4f34b2fc..1c56460427 100644 --- a/docs/manual/middle/elements/edges/loop.zh.md +++ b/docs/manual/middle/elements/edges/loop.zh.md @@ -6,12 +6,12 @@ order: 6 G6 内置了折线 loop 边，其默认样式如下。
-⚠️**注意：**
loop 边适用于自环边，即起始点与结束点为相同节点的边，在不同端点的边上适用 loop 边将会出现异常效果。 +⚠️注意:
loop 边适用于自环边，即起始点与结束点为相同节点的边，在不同端点的边上适用 loop 边将会出现异常效果。
## 使用方法 -如 [内置边](../defaultEdge) 一节所示，配置边的方式有两种：实例化图时全局配置，在数据中动态配置。 +如 [内置边](/zh/docs/manual/middle/elements/edges/defaultEdge) 一节所示，配置边的方式有两种：实例化图时全局配置，在数据中动态配置。 ### 1 实例化图时全局配置 @@ -52,7 +52,7 @@ const data = { ## 配置项说明 -自环是指连接单个节点自身的边，是一种边的特殊情况，因此，在通用属性基础上，支持了特殊的配置 `loopCfg`。 +自环是指连接单个节点自身的边，是一种边的特殊情况。支持 [边通用配置项](zh/docs/manual/middle/elements/edges/defaultEdge/#边的通用属性)，以下表格对部分常用配置项进行说明。在通用属性基础上，支持了特殊的配置 `loopCfg`。 loop 边支持以下的配置项，对于 Object 类型的配置项将在后面有详细讲解： @@ -68,7 +68,7 @@ loop 边支持以下的配置项，对于 Object 类型的配置项将在后面 ### 样式属性 style -Object 类型。配置项与边的通用样式属性相同，见 [内置边](/zh/docs/manual/middle/elements/edges/defaultEdge)。下面代码演示在实例化图时全局配置方法中配置 `style`，以达到下图效果。
+Object 类型。配置项与 [边通用样式属性](/zh/docs/manual/middle/elements/edges/defaultEdge/#样式属性-style) 相同。下面代码演示在实例化图时全局配置方法中配置 `style`，以达到下图效果。
```javascript const data = { @@ -105,7 +105,7 @@ graph.render(); ### 标签文本配置 labelCfg -Object 类型。其配置与边的通用文本配置相同，见 [内置边](/zh/docs/manual/middle/elements/edges/defaultEdge)。基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultEdge` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
+Object 类型。支持 [边通用标签配置](/zh/docs/manual/middle/elements/edges/defaultEdge/#标签文本-label-及其配置-labelcfg)。基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultEdge` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
```javascript const data = { diff --git a/docs/manual/middle/elements/edges/polyline.en.md b/docs/manual/middle/elements/edges/polyline.en.md index 1c6c77ec67..0ed7fda602 100644 --- a/docs/manual/middle/elements/edges/polyline.en.md +++ b/docs/manual/middle/elements/edges/polyline.en.md @@ -8,7 +8,7 @@ A built-in edge Polyline has the default style as below.
## Usage -As stated in [Built-in Edges](../defaultEdge) , there are two ways to configure the edge: Configure it when instantiating a Graph globally; Configure it in the data. +As stated in [Built-in Edges](/en/docs/manual/middle/elements/edges/defaultEdge) , there are two ways to configure the edge: Configure it when instantiating a Graph globally; Configure it in the data. ### 1 Global Configure When Instantiating a Graph @@ -27,7 +27,7 @@ const graph = new G6.Graph({ ### 2 Configure in the Data -To configure different edges with different attributes, you can write the attributes into the edge data. +To configure different edges with different properties, you can write the properties into the edge data. ```javascript const data = { nodes: [ @@ -39,7 +39,7 @@ const data = { shape: 'polyline', //... // Other configurations for edges style: { - //... // Style attributes for edges + //... // Style properties for edges } }, //... // Other edges @@ -48,8 +48,8 @@ const data = { ``` -## Attribute -Polyline edge has the attributes shown below. The attributes with object type will be described in detail after the table +## Property +Polyline edge has the [Common Edge Properties](/en/docs/manual/middle/elements/edges/defaultEdge/#the-common-property), and some commonly used properties are shown below. The properties with object type will be described in detail after the table ```javascript color: '#87e8de', @@ -73,19 +73,20 @@ labelCfg: { | --- | --- | --- | --- | | color | The color of the edge | String | The priority id lower than `stroke` in `style` | | style | The default style of edge | Object | Correspond to the styles in Canvas | -| **style.radius** | **The border radius of the bend** | **Number** | **It is a special attribute for polyline edge** | -| **style.offset** | **The minimum distance between the bend and the source/target node** | **Number** | **`5` by default. It is a special attribute for polyline edge** | +| **style.radius** | **The border radius of the bend** | **Number** | **It is a special property for polyline edge** | +| **style.offset** | **The minimum distance between the bend and the source/target node** | **Number** | **`5` by default. It is a special property for polyline edge** | | label | The text of the label | String | | | labelCfg | The configurations of the label | Object | | +| controlPoints | The array of the control points for the polyline | Array | If it is not assigned, G6 will calculate it by A* algorithm If it is assgned, the path of the polyline will be generated according to it. e.g. `[{ x: 10, y: 20 }, { x: 20, y: 25 }, ...]` | ### style -`style` is an object. There are two special attributes in `style` for polyline edge: +`style` is an object. The [Common Edge Style Properties](/en/docs/manual/middle/elements/edges/defaultEdge/#style) are available for polyline edge. There are two special properties in `style` for polyline edge: -  `radius`, he border radius of the bend; -  `offset`, The minimum distance between the bend and the source/target node, `5` by default. -The other style attributes are the same as the common style attribute of edge. Refer to [Built-in Edges]. +The other style properties are the same as the common style property of edge. Refer to [Built-in Edges]. The following code shows how to configure the `style` globally when instantiating a Graph.
```javascript @@ -128,7 +129,7 @@ graph.render(); ### labelCfg -`labelCfg` is an object which is the same as the common attribute of edge. Refer to [Built-in Edges](/en/docs/manual/middle/elements/edges/defaultEdge). +`labelCfg` is an object which is the same as the [Common Edge Label Properties](/en/docs/manual/middle/elements/edges/defaultEdge/#label-and-labelcfg). Base on the code in [style](#style) section, we add `labelCfg` to `defaultEdge`.
```javascript @@ -138,7 +139,7 @@ const data = { const graph = new G6.Graph({ // ... Other configurations for graph defaultEdge: { - // ... Other attributes for edges + // ... Other properties for edges labelCfg: { refY: -10, refX: 60 diff --git a/docs/manual/middle/elements/edges/polyline.zh.md b/docs/manual/middle/elements/edges/polyline.zh.md index f17d1395f9..59a258eb76 100644 --- a/docs/manual/middle/elements/edges/polyline.zh.md +++ b/docs/manual/middle/elements/edges/polyline.zh.md @@ -8,7 +8,7 @@ G6 内置了折线 polyline 边，其默认样式如下。
## 使用方法 -如 [内置边](../defaultEdge) 一节所示，配置边的方式有两种：实例化图时全局配置，在数据中动态配置。 +如 [内置边](/zh/docs/manual/middle/elements/edges/defaultEdge) 一节所示，配置边的方式有两种：实例化图时全局配置，在数据中动态配置。 ### 1 实例化图时全局配置 @@ -49,7 +49,7 @@ const data = { ## 配置项说明 -polyline 边支持以下的配置项： +polyline 边支持 [边通用配置项](zh/docs/manual/middle/elements/edges/defaultEdge/#边的通用属性)，以下表格对部分常用配置项进行说明： ```javascript color: '#87e8de', style: { @@ -74,13 +74,14 @@ labelCfg: { | style | 边的样式 | Object | Canvas支持的属性 | | **style.radius** | **拐弯处的圆角弧度** | **Number** | **若不设置则为直角，polyline 特有** | | **style.offset** | **拐弯处距离节点最小距离** | **Number** | **默认为 5，polyline 特有** | +| controlPoints | 控制点数组 | Array | 不指定时根据 A* 算法自动生成折线。若指定了，则按照 `controlPoints` 指定的位置进行弯折。示例：`[{ x: 10, y: 20 }, { x: 20, y: 25 }, ...]` | | label | 标签文本文字 | String | | | labelCfg | 标签文本配置项 | Object | | ### 样式属性 style -Object 类型。与其他类型的边不同的是，polyline 的 `style` 含有两个特殊属性： +Object 类型。支持 [边通用样式属性](/zh/docs/manual/middle/elements/edges/defaultEdge/#样式属性-style)。与其他类型的边不同的是，polyline 的 `style` 含有两个特殊属性： -  `radius` ，弯折处的圆角半径，不设置则默认为直角； -  `offset` ，距离端点的最小距离，默认值为 5。 @@ -127,7 +128,7 @@ graph.render(); ### 标签文本配置 labelCfg -Object 类型。其它配置与边的通用文本配置相同，见 [内置边](/zh/docs/manual/middle/elements/edges/defaultEdge)。基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultEdge` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
+Object 类型。支持 [边通用标签配置](/zh/docs/manual/middle/elements/edges/defaultEdge/#标签文本-label-及其配置-labelcfg)。基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultEdge` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
```javascript const data = { diff --git a/docs/manual/middle/elements/edges/quaratic.en.md b/docs/manual/middle/elements/edges/quadratic.en.md similarity index 67% rename from docs/manual/middle/elements/edges/quaratic.en.md rename to docs/manual/middle/elements/edges/quadratic.en.md index acf8fb3299..609b226d96 100644 --- a/docs/manual/middle/elements/edges/quaratic.en.md +++ b/docs/manual/middle/elements/edges/quadratic.en.md @@ -8,7 +8,7 @@ A built-in edge Quadratic has the default style as below.
## Usage -As stated in [Built-in Edges](../defaultEdge) , there are two ways to configure the edge: Configure it when instantiating a Graph globally; Configure it in the data. +As stated in [Built-in Edges](/en/docs/manual/middle/elements/edges/defaultEdge) , there are two ways to configure the edge: Configure it when instantiating a Graph globally; Configure it in the data. ### 1 Global Configure When Instantiating a Graph @@ -27,7 +27,7 @@ const graph = new G6.Graph({ ### 2 Configure in the Data -To configure different edges with different attributes, you can write the attributes into the edge data. +To configure different edges with different properties, you can write the properties into the edge data. ```javascript const data = { nodes: [ @@ -39,7 +39,7 @@ const data = { shape: 'quadratic', //... // Other configurations for edges style: { - .//... // Style attributes for edges + .//... // Style properties for edges } }, //... // Other edges @@ -48,8 +48,8 @@ const data = { ``` -## Attribute -Quadratic edge has the attributes shown below. The attributes with object type will be described in detail after the table. +## Property +Quadratic edge has the [Common Edge Properties](/en/docs/manual/middle/elements/edges/defaultEdge/#the-common-property), and some commonly used properties are shown below. The properties with object type will be described in detail after the table. | Name | Description | Type | Remark | | --- | --- | --- | --- | @@ -57,11 +57,12 @@ Quadratic edge has the attributes shown below. The attributes with object type w | style | The default style of edge | Object | Correspond to the styles in Canvas | | label | The text of the label | String | | | labelCfg | The configurations of the label | Object | | +| controlPoints | The array of the control points for the quadratic curve | Array | If it is not assgined, the default control point on the center of the curve will take effect. e.g. `[{ x: 10, y: 20 }]` | ### style -`style` is an object which is the same as the common style attribute of edge. Refer to [Built-in Edges]. +`style` is an object which is the same as the [Common Edge Style Properties](/en/docs/manual/middle/elements/edges/defaultEdge/#style). The following code shows how to configure the `style` globally when instantiating a Graph.
```javascript @@ -102,11 +103,12 @@ graph.render(); ``` - ### labelCfg -`labelCfg` is an object which is the same as the common attribute of edge. Refer to [Built-in Edges](/en/docs/manual/middle/elements/edges/defaultEdge). -Base on the code in [style](#style) section, we add `labelCfg` to `defaultEdge`.
+`labelCfg` is an object which is the same as the [Common Edge Label Properties](/en/docs/manual/middle/elements/edges/defaultEdge/#label-and-labelcfg). +Base on the code in [style](#style) section, we add `labelCfg` to `defaultEdge`. +
+ ```javascript const data = { // ... data @@ -114,7 +116,7 @@ const data = { const graph = new G6.Graph({ // ... Other configurations for graph defaultEdge: { - // ... Other attributes for edges + // ... Other properties for edges labelCfg: { refY: 10, refX: 40 diff --git a/docs/manual/middle/elements/edges/quaratic.zh.md b/docs/manual/middle/elements/edges/quadratic.zh.md similarity index 70% rename from docs/manual/middle/elements/edges/quaratic.zh.md rename to docs/manual/middle/elements/edges/quadratic.zh.md index 23ba7576a1..874d823ddf 100644 --- a/docs/manual/middle/elements/edges/quaratic.zh.md +++ b/docs/manual/middle/elements/edges/quadratic.zh.md @@ -8,7 +8,7 @@ G6 内置了 quadratic 边，其默认样式如下。
## 使用方法 -如 [内置边](../defaultEdge) 一节所示，配置边的方式有两种：实例化图时全局配置，在数据中动态配置。 +如 [内置边](/zh/docs/manual/middle/elements/edges/defaultEdgee) 一节所示，配置边的方式有两种：实例化图时全局配置，在数据中动态配置。 ### 1 实例化图时全局配置 @@ -49,7 +49,7 @@ const data = { ## 配置项说明 -quadratic 边支持以下的配置项，对于 Object 类型的配置项将在后面有详细讲解： +quadratic 边支持 [边通用配置项](zh/docs/manual/middle/elements/edges/defaultEdge/#边的通用属性)，以下表格对部分常用配置项进行说明。对于 Object 类型的配置项将在后面有详细讲解： | 名称 | 含义 | 类型 | 备注 | | --- | --- | --- | --- | @@ -57,11 +57,12 @@ quadratic 边支持以下的配置项，对于 Object 类型的配置项将在 | style | 边的样式 | Object | Canvas支持的属性 | | label | 标签文本文字 | String | | | labelCfg | 标签文本配置项 | Object | | +| controlPoints | 控制点数组 | Array | 不指定时将会使用默认的控制点：曲线中心附近。示例：`[{ x: 10, y: 20 }]` | ### 样式属性 style -Object 类型。其配置项与边的通用样式属性相同，见 [内置边](/zh/docs/manual/middle/elements/edges/defaultEdge)。下面代码演示在实例化图时全局配置方法中配置 `style`。
+Object 类型。配置项与 [边通用样式属性](/zh/docs/manual/middle/elements/edges/defaultEdge/#样式属性-style) 相同。下面代码演示在实例化图时全局配置方法中配置 `style`。
```javascript const data = { @@ -103,7 +104,7 @@ graph.render(); ### 标签文本配置 labelCfg -Object 类型。其配置与边的通用文本配置相同，见 [内置边](/zh/docs/manual/middle/elements/edges/defaultEdge)。基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultEdge` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
+Object 类型。支持 [边通用标签配置](/zh/docs/manual/middle/elements/edges/defaultEdge/#标签文本-label-及其配置-labelcfg)。基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultEdge` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
```javascript const data = { diff --git a/docs/manual/middle/elements/elementIndex.en.md b/docs/manual/middle/elements/elementIndex.en.md index 2bdf42fd2a..8433bd26d3 100644 --- a/docs/manual/middle/elements/elementIndex.en.md +++ b/docs/manual/middle/elements/elementIndex.en.md @@ -3,13 +3,13 @@ title: The Visual Level of Node and Edge order: 4 --- -The visual levels (zIndex) of nodes and edges are refered to their [Graphics Group](/en/docs/manual/advanced/graphics-group) (hereinafter referred to as Shape). (**Attention:** The Graphics Group is different from the [Node Group](/en/docs/manual/middle/nodeGroup), the differences are described in [Graphics Group](/en/docs/manual/advanced/graphics-group)). +The visual levels (zIndex) of nodes and edges are refered to their [Graphics Group](/en/docs/manual/advanced/keyconcept/graphics-group) (hereinafter referred to as Shape). (⚠️Attention: The Graphics Group is different from the [Node Group](/en/docs/manual/middle/nodeGroup), the differences are described in [Graphics Group](/en/docs/manual/advanced/keyconcept/graphics-group)). -In [Graphics Group](/en/docs/manual/advanced/graphics-group), we stated: All the nodes instances in a Graph is grouped by a Group named `nodeGroup`, all the edges instances are grouped by `edgeGroup`. And the visual level (zIndex) of `nodeGroup` is higher than `edgeGroup`, which means all the nodes will be drawed on the top of all the edges. +In [Graphics Group](/en/docs/manual/advanced/keyconcept/graphics-group), we stated: All the nodes instances in a Graph is grouped by a Group named `nodeGroup`, all the edges instances are grouped by `edgeGroup`. And the visual level (zIndex) of `nodeGroup` is higher than `edgeGroup`, which means all the nodes will be drawed on the top of all the edges. Sometimes, we want to draw the edges on the top. For example, highlighting a node and its related edges. In this situation, you can configure `groupByTypes` of the graph to false and call `toFront()` and `toBack()` to order the nodes or edges. -The expected effect is: the related nodes and edges are drawed on the top of others when the mouse enters a node; Restore the visual levels (zIndex) when the mouse moves out of the node. [Complete Code of the Demo](https://codepen.io/Yanyan-Wang/pen/GRRNzGN)。
+The expected effect is: the related nodes and edges are drawed on the top of others when the mouse enters a node; Restore the visual levels (zIndex) when the mouse moves out of the node. Complete Code of the Demo.
There are 3 steps to implement the expected effect: @@ -18,7 +18,7 @@ There are 3 steps to implement the expected effect: - Step 3: Change the visual levels in the listener function of mouse entering. -## Premise +## Prerequisite Code The following code imports G6, defines the data, instantiates the Graph, renders the graph. We will modify this code to implement the expected effect. ```javascript // The source data @@ -91,7 +91,7 @@ The following code imports G6, defines the data, instantiates the Graph, renders ### Usage -Modify the code about instantiating the Graph in Premise. Add `groupByTypes` with `false`: +Modify the code about instantiating the Graph in Prerequisite Code. Add `groupByTypes` with `false`: ```javascript const graph = new G6.Graph({ // ... // Other configurations diff --git a/docs/manual/middle/elements/elementIndex.zh.md b/docs/manual/middle/elements/elementIndex.zh.md index 4dd5410abb..41f08c8840 100644 --- a/docs/manual/middle/elements/elementIndex.zh.md +++ b/docs/manual/middle/elements/elementIndex.zh.md @@ -3,11 +3,11 @@ title: 节点与边的层级 order: 4 --- -节点与边在视觉上的层级涉及到了它们相对应的[图形分组 Group](/zh/docs/manual/advanced/graphics-group)。本文提到的所有分组 Group 都为 G6 的 [图形分组 Group](/zh/docs/manual/advanced/graphics-group)，而非 G6 的 [节点分组 Group](/zh/docs/manual/middle/nodeGroup)，请注意区分这两种 Group，其区别在 [图形分组 Group](/zh/docs/manual/advanced/graphics-group) 中说明。 +节点与边在视觉上的层级涉及到了它们相对应的 [图形分组 Group](/zh/docs/manual/advanced/keyconcept/graphics-group)。本文提到的所有分组 Group 都为 G6 的图形分组 Group，而非 G6 的 [节点分组 Group](/zh/docs/manual/middle/nodeGroup)，请注意区分这两种 Group，其区别在 [图形分组 Group](/zh/docs/manual/advanced/keyconcept/graphics-group) 中说明。 -在 [图形分组 Group](/zh/docs/manual/advanced/graphics-group) 中我们提到：在 G6 中，Graph 的一个实例中的所有节点属于同一个变量名为 `nodeGroup` 的 group，所有的边属于同一个变量名为 `edgeGroup` 的 group。节点 group 在视觉上的层级（zIndex）高于边 group，即所有节点会绘制在所有边的上层。 +在 [图形分组 Group](/zh/docs/manual/advanced/keyconcept/graphics-group) 中我们提到：在 G6 中，Graph 的一个实例中的所有节点属于同一个变量名为 `nodeGroup` 的 group，所有的边属于同一个变量名为 `edgeGroup` 的 group。节点 group 在视觉上的层级（zIndex）高于边 group，即所有节点会绘制在所有边的上层。 -但有时，我们需要让边在视觉上在节点上层。例如，高亮节点及其相关边和邻居、高亮一条边等。可以通过配合图实例的配置项 `groupByTypes` 以及节点和边的 `toFront()` 与 `toBack()` 函数实现。为实现如下效果：鼠标进入节点时，提升相关边以及邻居节点的层级；离开节点时恢复；鼠标进入边时，提升边及其两端点的层级；离开边时恢复。[Demo 完整代码](https://codepen.io/Yanyan-Wang/pen/GRRNzGN)。
+但有时，我们需要让边在视觉上在节点上层。例如，高亮节点及其相关边和邻居、高亮一条边等。可以通过配合图实例的配置项 `groupByTypes` 以及节点和边的 `toFront()` 与 `toBack()` 函数实现。为实现如下效果：鼠标进入节点时，提升相关边以及邻居节点的层级；离开节点时恢复；鼠标进入边时，提升边及其两端点的层级；离开边时恢复。Demo 完整代码。
要实现上图效果，需要以下步骤： @@ -85,7 +85,7 @@ order: 4 ### 参数描述 | 名称 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | -| groupByTypes | Boolean | true | 各种元素是否在一个分组内，决定节点和边的层级问题，默认情况下所有的节点在一个分组中，所有的边在一个分组中，当这个参数为 false 时，节点和边的层级根据生成的顺序确定。 | +| groupByTypes | Boolean | true | 各种元素是否在一个分组内，决定节点和边的层级问题，默认情况下所有的节点在一个分组中，所有的边在一个分组中，当这个参数为 `false` 时，节点和边的层级根据生成的顺序确定。 | ### 使用方式 diff --git a/docs/manual/middle/elements/nodes/circle.en.md b/docs/manual/middle/elements/nodes/circle.en.md index fe15125c44..7db47300b2 100644 --- a/docs/manual/middle/elements/nodes/circle.en.md +++ b/docs/manual/middle/elements/nodes/circle.en.md @@ -7,7 +7,7 @@ A built-in node Circle has the default style as below, the label is drawed on th ## Usage -As stated in [Built-in Nodes](../defaultNode) , there are two ways to configure the node: Configure it when instantiating a Graph globally; Configure it in the data. +As stated in [Built-in Nodes](/en/docs/manual/middle/elements/nodes/defaultNode) , there are two ways to configure the node: Configure it when instantiating a Graph globally; Configure it in the data. ### 1 Global Configure When Instantiating a Graph @@ -26,7 +26,7 @@ const graph = new G6.Graph({ ### 2 Configure in the Data -To configure different nodes with different attributes, you can write the attributes into the node data. +To configure different nodes with different properties, you can write the properties into the node data. ```javascript const data = { nodes: [ @@ -44,8 +44,8 @@ const data = { ``` -## Attribute -Circle node has the attributes shown below. The attribute with Object type will be described after the table:
+## Property +The [Node Common Properties](/en/docs/manual/middle/elements/nodes/defaultNode/#common-property) are available for Circle node, some special properties are shown below. The property with Object type will be described after the table:
| Name | Description | Type | Remark | | --- | --- | --- | --- | @@ -54,13 +54,13 @@ Circle node has the attributes shown below. The attribute with Object type will | label | The text of the label | String | | | labelCfg | The configurations of the label | Object | | | stateStyles | The styles in different states | Object | Only takes effect on keyShape | -| linkPoints | The link points of the related edges | Object | They are invisible by default | +| linkPoints | The link points **in visual** | Object | They are invisible by default. It is usually used with the [anchorPoints](http://localhost:8000/en/docs/manual/middle/elements/nodes/defaultNode/#common-property). The differences are described in [linkPoints](#linkpoints) | | icon | The configurations of the icon on the circle node | Object | It is invisible by default | ### style -`style` is an object to configure the filling color, stroke, and other styles. The following code shows how to configure the `style` globally when instantiating a Graph.
+The [Node Common Styles](/en/docs/manual/middle/elements/nodes/defaultNode/#style) are available for Circle node. `style` is an object to configure the filling color, stroke, and other styles. The following code shows how to configure the `style` globally when instantiating a Graph.
```javascript const data = { @@ -90,7 +90,7 @@ graph.render(); ### labelCfg -`labelCfg` is an object to configure the label of the node. Base on the code in [style](#style) section, we add `labelCfg` to `defaultNode`.
+`labelCfg` is an object to configure the label of the node. The [Node Common Label Configurations](/en/docs/manual/middle/elements/nodes/defaultNode/#label-and-labelcfg) are available. Base on the code in [style](#style) section, we add `labelCfg` to `defaultNode`.
```javascript const data = { // ... data @@ -98,7 +98,7 @@ const data = { const graph = new G6.Graph({ // ... Other configurations for graph defaultNode: { - // ... Other attributes for nodes + // ... Other properties for nodes labelCfg: { position: 'bottom', offset: 10, @@ -113,18 +113,22 @@ const graph = new G6.Graph({ ### linkPoints -`linkPoints` is an object to configure the link points on the 「top, bottom, left, and right」. +`linkPoints` is an object to configure the small circles on the 「top, bottom, left, and right」. + +⚠️Attention: It is different from `anchorPoints`: +`anchorPoints` is an 「**array**」 that indicates the actual relative positions used to specify the join position of the relevant edge of the node (refer to [anchorPoints](/en/docs/manual/middle/keyconcept/anchorpoint)); +`linkPoints` is an object that indicates whether 「**render**」the four small circles, which do not connect the relevant edges. These two properties are often used together. | Name | Description | Type | Remark | | --- | --- | --- | --- | -| top | Whether show the top link point | Boolean | `false` by default | -| bottom | Whether show the bototm link point | Boolean | `false` by default | -| left | Whether show the left link point | Boolean | `false` by default | -| right | Whether show the right link point | Boolean | `false` by default | -| size | The size of the link points | Number | `3` by default | -| fill | The filling color of the link points | String | `'#72CC4A'` by default | -| stroke | The stroke color of the link points | String | `'#72CC4A'` by default | -| lineWidth | The line width of the link points | Number | `1` by default | +| top | Whether to show the top small circle | Boolean | `false` by default | +| bottom | Whether to show the bototm small circle | Boolean | `false` by default | +| left | Whether to show the left small circle | Boolean | `false` by default | +| right | Whether to show the right small circle | Boolean | `false` by default | +| size | The size of the small circles | Number | `3` by default | +| fill | The filling color of the small circles | String | `'#72CC4A'` by default | +| stroke | The stroke color of the small circles | String | `'#72CC4A'` by default | +| lineWidth | The line width of the small circles | Number | `1` by default | Base on the code in [style](#style) section, we add `linkPoints` to `defaultNode`.
@@ -155,7 +159,7 @@ const graph = new G6.Graph({ | Name | Description | Type | Remark | | --- | --- | --- | --- | -| show | Whether show the icon | Boolean | `false` by default | +| show | Whether to show the icon | Boolean | `false` by default | | width | The width of the icon | Number | `16` by default | | height | The height of the icon | Number | `16` by default | | img | The image url of the icon | String | | diff --git a/docs/manual/middle/elements/nodes/circle.zh.md b/docs/manual/middle/elements/nodes/circle.zh.md index bbc22c7f52..503c5446a7 100644 --- a/docs/manual/middle/elements/nodes/circle.zh.md +++ b/docs/manual/middle/elements/nodes/circle.zh.md @@ -7,7 +7,7 @@ G6 内置了圆 Circle 节点，其默认样式如下。标签文本位于圆 ## 使用方法 -如 [内置节点](../defaultNode) 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。 +如 [内置节点](/zh/docs/manual/middle/elements/nodes/defaultNode) 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。 ### 1 实例化图时全局配置 @@ -45,7 +45,7 @@ const data = { ## 配置项说明 -circle 节点支持以下的配置项，对于 Object 类型的配置项将在后面有详细讲解：
+circle 节点支持 [节点通用配置](/zh/docs/manual/middle/elements/nodes/defaultNode#节点的通用属性)，下表对部分属性进行解释。对于 Object 类型的配置项将在后面有详细讲解：
| 名称 | 含义 | 类型 | 备注 | | --- | --- | --- | --- | @@ -54,13 +54,13 @@ circle 节点支持以下的配置项，对于 Object 类型的配置项将在 | label | 标签文本内容 | String | | | labelCfg | 标签文本配置项 | Object | | | stateStyles | 各状态下的样式 | Object | 只对 keyShape 起作用 | -| linkPoints | 相关边的连入点 | Object | 默认不显示 | +| linkPoints | **视觉上的**四个锚点 | Object | 默认不显示，应与 [anchorPoints](/zh/docs/manual/middle/elements/nodes/defaultNode/#节点的通用属性) 配合使用。二者区别请看 [linkPoints](#linkpoints) | | icon | 圆上 icon 配置 | Object | 默认不显示 icon | ### 样式属性 style -Object 类型。通过 `style` 配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 `style`，使之达到如下图效果。
+Object 类型。支持 [节点通用样式](/zh/docs/manual/middle/elements/nodes/defaultNode#样式属性-style)。通过 `style` 配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 `style`，使之达到如下图效果。
```javascript const data = { @@ -90,7 +90,7 @@ graph.render(); ### 标签文本配置 labelCfg -Object 类型。通过 `labelCfg` 配置标签文本。基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultNode` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
+Object 类型。通过 `labelCfg` 配置标签文本。支持 [节点通用标签配置](/zh/docs/manual/middle/elements/nodes/defaultNode/#标签文本-label-及其配置-labelcfg)。基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultNode` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
```javascript const data = { // ... data 内容 @@ -112,19 +112,23 @@ const graph = new G6.Graph({ ``` -### 边的连入点 linkPoints -Object 类型。通过配置 `linkPoints` ，可以指定节点周围「上、下、左、右」四个方向上边的连入点。 +### linkPoints +Object 类型。可以指定节点周围「上、下、左、右」四个方向上的四个小圆点。 + +⚠️注意:区分于 `anchorPoints`： +`anchorPoints` 是真正用于指定该节点相关边的连入位置的「**数组**」，见 [anchorPoints](/zh/docs/manual/middle/keyconcept/anchorpoint)； +而 `linkPoints` 仅是指定是否「**绘制**」出四个圆点，不起实际的连接相关边的作用。二者常常配合使用。 | 名称 | 含义 | 类型 | 备注 | | --- | --- | --- | --- | -| top | 是否显示上部的连接点 | Boolean | 默认为 `false` | -| bottom | 是否显示底部的连接点 | Boolean | 默认为 `false` | -| left | 是否显示左侧的连接点 | Boolean | 默认为 `false` | -| right | 是否显示右侧的连接点 | Boolean | 默认为 `false` | -| size | 连接点的大小 | Number | 默认为 `3` | -| fill | 连接点的填充色 | String | 默认为 `'#72CC4A'` | -| stroke | 连接点的描边颜色 | String | 默认为 `'#72CC4A'` | -| lineWidth | 连接点描边的宽度 | Number | 默认为 `1` | +| top | 是否显示上部的圆点 | Boolean | 默认为 `false` | +| bottom | 是否显示底部的圆点 | Boolean | 默认为 `false` | +| left | 是否显示左侧的圆点 | Boolean | 默认为 `false` | +| right | 是否显示右侧的圆点 | Boolean | 默认为 `false` | +| size | 圆点的大小 | Number | 默认为 `3` | +| fill | 圆点的填充色 | String | 默认为 `'#72CC4A'` | +| stroke | 圆点的描边颜色 | String | 默认为 `'#72CC4A'` | +| lineWidth | 圆点描边的宽度 | Number | 默认为 `1` | 基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultNode` 中增加了 `linkPoints` 配置项进行连入点的配置，使之达到如下图效果。
diff --git a/docs/manual/middle/elements/nodes/defaultNode.en.md b/docs/manual/middle/elements/nodes/defaultNode.en.md index d744ec410e..853a23cc3f 100644 --- a/docs/manual/middle/elements/nodes/defaultNode.en.md +++ b/docs/manual/middle/elements/nodes/defaultNode.en.md @@ -7,21 +7,21 @@ The built-in nodes in G6 include circle, rect, ellipse, diamond, triangle, star, ## Types of Default Nodes -The table below shows the built-in nodes and their special attributes: +The table below shows the built-in nodes and their special properties: | Name | Description | Default | | --- | --- | --- | -| circle | Circle node:
- `size` is a number representing the diameter
- The circle is centered at the node position
- `color` takes effect on the stroke
- The label is placed on the center of the circle by default
- More attributes are described in [circle](/en/docs/manual/middle/elements/nodes/circle)
| | -| rect | Rect node:
- `size` is an array, e.g. [100, 50]
- The rect in centered at the node position
- `color` takes effect on the stroke
- The label is placed on the center of the circle by default
- More attributes are described in [rect](/zh/docs/manual/middle/elements/nodes/rect)
| | -| ellipse | Ellipse node:
- `size` is an array, representing the lengths of major diameter and minor diameter
- The ellipse is centered at the node position
- `color` takes effect on the stroke
- The label is placed on the center of the circle by default
- More attributes are described in [ellipse](/zh/docs/manual/middle/elements/nodes/ellipse)
| | -| diamond | Diamond node:
- `size` is an array, representing the width and height of the diamond
- The diamond is centered on the node position
- `color` takes effect on the stroke
- The label is placed on the center of the circle by default
- More attributes are described in [diamond](/zh/docs/manual/middle/elements/nodes/diamond)
| | -| triangle | Triangle node:
- `size` is an array, representing the length of the base and the height of the triangle
- The triangle is centered on the node position
- `color` takes effect on the stroke
- he label lays on the bottom of the node by default
- More attributes are described in [triangle](/zh/docs/manual/middle/elements/nodes/triangle)
| | -| star | Star node:
- `size` is a number, representing the size of the star
- The star is centered on the node position
- `color` takes effect on the stroke
- The label is placed on the center of the circle by default
- More attributes are described in [star](/zh/docs/manual/middle/elements/nodes/star)
| | -| image | Image node:
- `size` is an array, representing the width and the height of the image
- The image is centered on the node position
- `img` The url of the image. It can be assigned in `style` as well
- `color` does not take effect
- The label lays on the bottom of the node by default
- More attributes are described in [image](/zh/docs/manual/middle/elements/nodes/image)
| | -| modelRect | Card node:
- `size` is an array, representing the width and the height of the card
- The modelRect is centered on the node position
- `color` takes effect on the stroke
- The label is placed on the center of the circle by default
- If `description` exists, it will lay below the label
- More attributes are described in [modelRect](/zh/docs/manual/middle/elements/nodes/modelRect)
|
  | +| circle | Circle node:
- `size` is a number representing the diameter
- The circle is centered at the node position
- `color` takes effect on the stroke
- The label is placed on the center of the circle by default
- More properties are described in [circle](/en/docs/manual/middle/elements/nodes/circle)
| | +| rect | Rect node:
- `size` is an array, e.g. [100, 50]
- The rect in centered at the node position
- `color` takes effect on the stroke
- The label is placed on the center of the circle by default
- More properties are described in [rect](/zh/docs/manual/middle/elements/nodes/rect)
| | +| ellipse | Ellipse node:
- `size` is an array, representing the lengths of major diameter and minor diameter
- The ellipse is centered at the node position
- `color` takes effect on the stroke
- The label is placed on the center of the circle by default
- More properties are described in [ellipse](/zh/docs/manual/middle/elements/nodes/ellipse)
| | +| diamond | Diamond node:
- `size` is an array, representing the width and height of the diamond
- The diamond is centered on the node position
- `color` takes effect on the stroke
- The label is placed on the center of the circle by default
- More properties are described in [diamond](/zh/docs/manual/middle/elements/nodes/diamond)
| | +| triangle | Triangle node:
- `size` is an array, representing the length of the base and the height of the triangle
- The triangle is centered on the node position
- `color` takes effect on the stroke
- he label lays on the bottom of the node by default
- More properties are described in [triangle](/zh/docs/manual/middle/elements/nodes/triangle)
| | +| star | Star node:
- `size` is a number, representing the size of the star
- The star is centered on the node position
- `color` takes effect on the stroke
- The label is placed on the center of the circle by default
- More properties are described in [star](/zh/docs/manual/middle/elements/nodes/star)
| | +| image | Image node:
- `size` is an array, representing the width and the height of the image
- The image is centered on the node position
- `img` The url of the image. It can be assigned in `style` as well
- `color` does not take effect
- The label lays on the bottom of the node by default
- More properties are described in [image](/zh/docs/manual/middle/elements/nodes/image)
| | +| modelRect | Card node:
- `size` is an array, representing the width and the height of the card
- The modelRect is centered on the node position
- `color` takes effect on the stroke
- The label is placed on the center of the circle by default
- If `description` exists, it will lay below the label
- More properties are described in [modelRect](/zh/docs/manual/middle/elements/nodes/modelRect)
|
  | -## Common Attribute +## Common Property | Name | Required | Type | Remark | | --- | --- | --- | --- | @@ -36,8 +36,8 @@ The table below shows the built-in nodes and their special attributes: | labelCfg | false | Object | The configurations of the label | -#### style -`style` is an object to configure the filling color, stroke color, shadow, and so on. Here is the commonly used attributes in `style`: +### style +`style` is an object to configure the filling color, stroke color, shadow, and so on. Here is the commonly used properties in `style`: | Name | Required | Type | Remark | | --- | --- | --- | --- | @@ -48,7 +48,8 @@ The table below shows the built-in nodes and their special attributes: | shadowBlur | false | Number | The blur of the shadow | | shadowOffsetX | false | Number | The x offset of the shadow | | shadowOffsetX | false | Number | The y offset of the shadow | -| ... | | | | +| opacity | false | Number | The alpha or transparency of the node | +| fillOpacity | false | Number | The filling alpha or transparency of the node | Configure `style` globally when instantiating the Graph: @@ -58,25 +59,25 @@ const graph = new G6.Graph({ width: 800, height: 600, defaultNode: { - // ... Other attributes for nodes + // ... Other properties for nodes style: { fill: '#steelblue', stroke: '#eaff8f', lineWidth: 5, - // ... Other style attributes + // ... Other style properties } } }) ``` -#### label and labelCfg +### label and labelCfg `label` is a string which indicates the content of the label.
`labelCfg` is an object to configure the label. The commonly used configurations of `labelCfg`: | Name | Required | Type | Remark | | --- | --- | --- | --- | | position | false | String | The relative positions to the node. Options:  `'center'`, `'top'`, `'left'`, `'right'`, `'bottom'`. `'center'` by default | | offset | false | Number / Array | The offset of the label on the directions of `'top'`, `'left'`, `'right'`, `'bottom'` | -| style | false | Object | The style attribute of the label | +| style | false | Object | The style property of the label | The commonly used configurations for the `style` in the above table are: @@ -89,7 +90,7 @@ The commonly used configurations for the `style` in the above table are: | opacity | false | Number | The opacity of the label | | font | false | String | The font of the label | | fontSize | false | Number | The font size of the label | -| ... | | | | +| ... The label styles of node and edge are the same, summarized in [Text Shape API](/en/docs/api/shapeProperties/#text) | | | | The following code shows how to configure `label` and `labelCfg` globally when instantiating a Graph: @@ -99,7 +100,7 @@ const graph = new G6.Graph({ width: 800, height: 600, defaultNode: { - // ... Other attributes for nodes + // ... Other properties for nodes label: 'node-label', labelCfg: { position: 'bottom', @@ -129,13 +130,13 @@ const graph = new G6.Graph({ height: 600, defaultNode: { shape: 'circle', - // Other attributes for all the nodes + // Other properties for all the nodes } }) ``` ### Configure in Data -To configure different nodes with different attributes, you can write the attributes into their data individually: +To configure different nodes with different properties, you can write the properties into their data individually: ```javascript const data = { @@ -143,17 +144,17 @@ const data = { id: 'node0', size: 100, shape: 'rect', - // ... // Other attributes for this node + // ... // Other properties for this node style: { - // ... // Style attributes for this node + // ... // Style properties for this node } },{ id: 'node1', size: [50, 100], shape: 'ellipse', - // ... // Other attributes for this node + // ... // Other properties for this node style: { - // ... // Style attributes for this node + // ... // Style properties for this node } }, // ... // Other nodes @@ -165,12 +166,12 @@ const data = { ``` ### Configure with graph.node(nodeFn) -By this way, we can configure different nodes with different attributes. +By this way, we can configure different nodes with different properties. -
⚠️**Attention:** +
⚠️Attention: - `graph.node(nodeFn)` must be called **before calling render()**. It does not take effect otherwise; -- It has the highest priority that will rewrite the same attributes configured by other ways; +- It has the highest priority that will rewrite the same properties configured by other ways; - Each node will be updated when adding or updating items. It will cost a lot when the amount of the data is large. ```javascript @@ -262,9 +263,9 @@ The result: - The label of the triangle and image node are layed on the bottom, and the others are layed on the center by default. -### Adjust the Attributes +### Adjust the Properties -By writing the attributes into the data, we adjust the label position, color, and styles of the node with `'node-ellipse'` as its id. Replace the following code to the code about `'node-ellipse'`'s data to obtain the result. +By writing the properties into the data, we adjust the label position, color, and styles of the node with `'node-ellipse'` as its id. Replace the following code to the code about `'node-ellipse'`'s data to obtain the result. ```javascript { @@ -304,4 +305,4 @@ Then, we add some description for the node with `'node-modelRect'` as its `id`: ## Related Reading -- [State](../../states/state) —— Change the styles during the interaction process. +- [State](/en/docs/manual/middle/states/state) —— Change the styles during the interaction process. diff --git a/docs/manual/middle/elements/nodes/defaultNode.zh.md b/docs/manual/middle/elements/nodes/defaultNode.zh.md index fccea8634c..72a9471b7f 100644 --- a/docs/manual/middle/elements/nodes/defaultNode.zh.md +++ b/docs/manual/middle/elements/nodes/defaultNode.zh.md @@ -3,7 +3,7 @@ title: 内置节点总览 order: 0 --- -G6 的内置节点包括 circle，rect，ellipse，diamond，triangle，star，image，modelRect，这些内置节点的默认样式分别如下图所示。
+G6 的内置节点包括 circle，rect，ellipse，diamond，triangle，star，image，modelRect。这些内置节点的默认样式分别如下图所示。
## 内置节点类型说明 @@ -11,14 +11,14 @@ G6 的内置节点包括 circle，rect，ellipse，diamond，triangle，star，i | 名称 | 描述 | 默认示例 | | --- | --- | --- | -| circle | 圆形：
- `size` 是单个数字，表示直径
- 圆心位置对应节点的位置
- `color` 字段默认在描边上生效
- 标签文本默认在节点中央
- 更多字段见 [circle](/zh/docs/manual/middle/elements/nodes/circle)
| | -| rect | 矩形：
- `size` 是数组，例如：[100, 50]
- 矩形的中心位置是节点的位置，而不是左上角
- `color` 字段默认在描边上生效
- 标签文本默认在节点中央
- 更多字段见 [rect](/zh/docs/manual/middle/elements/nodes/rect)
| | -| ellipse | 椭圆：
- `size` 是数组，表示椭圆的长轴直径和短轴直径
- 椭圆的圆心是节点的位置
- `color` 字段默认在描边上生效
- 标签文本默认在节点中央
- 更多字段见 [ellipse](/zh/docs/manual/middle/elements/nodes/ellipse)
| | -| diamond | 菱形：
- `size` 是数组，表示菱形的宽和高
- 菱形的中心位置是节点的位置
- `color` 字段默认在描边上生效
- 标签文本默认在节点中央
- 更多字段见 [diamond](/zh/docs/manual/middle/elements/nodes/diamond)
| | -| triangle | 三角形：
- `size` 是数组，表示三角形的底和高
- 三角形的中心位置是节点的位置
- `color` 字段默认在描边上生效
- 标签文本默认在节点下方
- 更多字段见 [triangle](/zh/docs/manual/middle/elements/nodes/triangle)
| | -| star | 星形：
- `size` 是单个数字，表示星形的大小
- 星星的中心位置是节点的位置
- `color` 字段默认在描边上生效
- 标签文本默认在节点中央
- 更多字段见 [star](/zh/docs/manual/middle/elements/nodes/star)
| | -| image | 图片：
- `size` 是数组，表示图片的宽和高
- 图片的中心位置是节点位置
- `img` 图片的路径，也可以在 `style` 里面设置
- `color` 字段不生效
- 标签文本默认在节点下方
- 更多字段见 [image](/zh/docs/manual/middle/elements/nodes/image)
| | -| modelRect | 卡片：
- `size` 是数组，表示卡片的宽和高
- 卡片的中心位置是节点的位置
- `color` 字段默认在描边上生效
- 标签文本默认在节点中央
- 若有 `description` 字段则显示在标签文本下方显示 `description` 内容
- 更多字段见 [modelRect](/zh/docs/manual/middle/elements/nodes/modelRect)
|
  | +| circle | 圆形：
- `size` 是单个数字，表示直径
- 圆心位置对应节点的位置
- `color` 字段默认在描边上生效
- 标签文本默认在节点中央
- 更多字段见 [Circle](/zh/docs/manual/middle/elements/nodes/circle) 节点教程
| | +| rect | 矩形：
- `size` 是数组，例如：[100, 50]
- 矩形的中心位置是节点的位置，而不是左上角
- `color` 字段默认在描边上生效
- 标签文本默认在节点中央
- 更多字段见 [Rect](/zh/docs/manual/middle/elements/nodes/rect) 节点教程
| | +| ellipse | 椭圆：
- `size` 是数组，表示椭圆的长轴直径和短轴直径
- 椭圆的圆心是节点的位置
- `color` 字段默认在描边上生效
- 标签文本默认在节点中央
- 更多字段见 [Ellipse](/zh/docs/manual/middle/elements/nodes/ellipse) 节点教程
| | +| diamond | 菱形：
- `size` 是数组，表示菱形的宽和高
- 菱形的中心位置是节点的位置
- `color` 字段默认在描边上生效
- 标签文本默认在节点中央
- 更多字段见 [Diamond](/zh/docs/manual/middle/elements/nodes/diamond) 节点教程
| | +| triangle | 三角形：
- `size` 是数组，表示三角形的底和高
- 三角形的中心位置是节点的位置
- `color` 字段默认在描边上生效
- 标签文本默认在节点下方
- 更多字段见 [Triangle](/zh/docs/manual/middle/elements/nodes/triangle) 节点教程
| | +| star | 星形：
- `size` 是单个数字，表示星形的大小
- 星星的中心位置是节点的位置
- `color` 字段默认在描边上生效
- 标签文本默认在节点中央
- 更多字段见 [Star](/zh/docs/manual/middle/elements/nodes/star) 节点教程
| | +| image | 图片：
- `size` 是数组，表示图片的宽和高
- 图片的中心位置是节点位置
- `img` 图片的路径，也可以在 `style` 里面设置
- `color` 字段不生效
- 标签文本默认在节点下方
- 更多字段见 [Image](/zh/docs/manual/middle/elements/nodes/image) 节点教程
| | +| modelRect | 卡片：
- `size` 是数组，表示卡片的宽和高
- 卡片的中心位置是节点的位置
- `color` 字段默认在描边上生效
- 标签文本默认在节点中央
- 若有 `description` 字段则显示在标签文本下方显示 `description` 内容
- 更多字段见 [ModelRect](/zh/docs/manual/middle/elements/nodes/modelRect) 节点教程
|
  | ## 节点的通用属性 @@ -31,13 +31,14 @@ G6 的内置节点包括 circle，rect，ellipse，diamond，triangle，star，i | y | false | Number | y 坐标 | | shape | false | String | 节点图形，默认为 `'circle'` | | size | false | Number / Array | 节点的大小 | -| anchorPoints | false | Array | 指定边连如节点的连接点的位置（相对于该节点而言），可以为空。例如: `[0, 0]`，代表节点左上角的锚点，`[1, 1]`,代表节点右下角的锚点。 | -| style | false | Object | 节点的样式属性 | +| anchorPoints | false | Array | 指定边连入节点的连接点的位置（相对于该节点而言），可以为空。例如: `[0, 0]`，代表节点左上角的锚点，`[1, 1]`,代表节点右下角的锚点 | +| style | false | Object | 节点的样式属性。 | | label | false | String | 文本文字 | | labelCfg | false | Object | 文本配置项 | -#### 样式属性 style +### 样式属性 style + Object 类型。通过 `style` 配置来修改节点的填充色、边框颜色、阴影等属性。下表是 `style` 对象中常用的配置项： | 名称 | 是否必须 | 类型 | 备注 | @@ -49,7 +50,8 @@ Object 类型。通过 `style` 配置来修改节点的填充色、边框颜色 | shadowBlur | false | Number | 阴影范围 | | shadowOffsetX | false | Number | 阴影 x 方向偏移量 | | shadowOffsetX | false | Number | 阴影 y 方向偏移量 | -| ... | | | | +| opacity | false | Number | 设置绘图的当前 alpha 或透明值 | +| fillOpacity | false | Number | 设置填充的 alpha 或透明值 | 下面代码演示在实例化图时全局配置方法中配置 `style`： @@ -70,14 +72,14 @@ const graph = new G6.Graph({ }) ``` -#### 标签文本 label 及其配置 labelCfg +### 标签文本 label 及其配置 labelCfg `label` String 类型。标签文本的文字内容。
`labelCfg` Object 类型。配置标签文本。下面是 `labelCfg` 对象中的常用配置项： | 名称 | 是否必须 | 类型 | 备注 | | --- | --- | --- | --- | | position | false | String | 文本相对于节点的位置，目前支持的位置有:  `'center'`，`'top'`，`'left'`，`'right'`，`'bottom'`。默认为 `'center'` | | offset | false | Number / Array | 文本的偏移，在 `'top'`，`'left'`，`'right'`，`'bottom'` 位置上的偏移量 | -| style | false | Object | 标签的样式属性 | +| style | false | Object | 标签的样式属性。 | 上表中的标签的样式属性 `style` 的常用配置项如下：  @@ -90,7 +92,7 @@ const graph = new G6.Graph({ | opacity | false | Number | 文本透明度 | | font | false | String | 文本内容的当前字体属性 | | fontSize | false | Number | 文本字体大小 | -| ... | | | | +| ... 节点标签与边标签样式属性相同，统一整理在 [Text 图形 API](/zh/docs/api/shapeProperties/#文本-text) | | | | 下面代码演示在实例化图时全局配置方法中配置 `label` 和 `labelCfg`。 @@ -165,7 +167,7 @@ const data = { } ``` -### 使用 graph.node(nodeFn) 配置 +### 使用 graph.node() 该方法可以为不同节点进行不同的配置。
**提示:** @@ -174,7 +176,7 @@ const data = { - 由于该方法优先级最高，将覆盖其他地方对节点的配置，这可能将造成一些其他配置不生效的疑惑； - 该方法在增加元素、更新元素时会被调用，如果数据量大、每个节点上需要更新的内容多时，可能会有性能问题。 -``` +```javascript // const data = ... // const graph = ... graph.node((node) => { @@ -191,9 +193,9 @@ graph.data(data); graph.render(); ``` -## 实例演练 +## 示例 -``` +```javascript const data = { nodes: [{ x: 100, @@ -305,4 +307,4 @@ graph.render(); ## 相关阅读 -- [状态 State](../../states/state) —— 交互过程中的样式变化。 +- [状态 State](/zh/docs/manual/middle/states/state) —— 交互过程中的样式变化。 diff --git a/docs/manual/middle/elements/nodes/diamond.en.md b/docs/manual/middle/elements/nodes/diamond.en.md index edbd5134ae..29807a1a69 100644 --- a/docs/manual/middle/elements/nodes/diamond.en.md +++ b/docs/manual/middle/elements/nodes/diamond.en.md @@ -9,7 +9,7 @@ A built-in node Diamond has the default style as below, the label is drawed on t ## Usage -As stated in [Built-in Nodes](../defaultNode) , there are two ways to configure the node: Configure it when instantiating a Graph globally; Configure it in the data. +As stated in [Built-in Nodes](/en/docs/manual/middle/elements/nodes/defaultNode) , there are two ways to configure the node: Configure it when instantiating a Graph globally; Configure it in the data. ### 1 Global Configure When Instantiating a Graph @@ -27,7 +27,7 @@ const graph = new G6.Graph({ ``` ### 2 Configure in the Data -To configure different nodes with different attributes, you can write the attributes into the node data. +To configure different nodes with different properties, you can write the properties into the node data. ```javascript const data = { nodes: [ @@ -45,8 +45,8 @@ const data = { ``` -## Attribute -Diamond node has the attributes shown below. The attribute with Object type will be described after the table: +## Property +The [Node Common Properties](/en/docs/manual/middle/elements/nodes/defaultNode/#common-property) are available for Diamond node, some special properties are shown below. The property with Object type will be described after the table: | Name | Description | Type | Remark | | --- | --- | --- | --- | @@ -55,12 +55,12 @@ Diamond node has the attributes shown below. The attribute with Object type will | label | The text of the label | String | | | labelCfg | The configurations of the label | Object | | | stateStyles | The styles in different states | Object | Only takes effect on keyShape | -| linkPoints | The link points of the related edges | Object | They are invisible by default | -| icon | The configurations of the icon on the circle node | Object | It is invisible by default | +| linkPoints | The link points **in visual** | Object | They are invisible by default. It is usually used with the [anchorPoints](http://localhost:8000/en/docs/manual/middle/elements/nodes/defaultNode/#common-property). The differences are described in [linkPoints](#linkpoints) | +| icon | The configurations of the icon on the diamond node | Object | It is invisible by default | ### style -`style` is an object to configure the filling color, stroke, and other styles. The following code shows how to configure the `style` globally when instantiating a Graph.
+The [Node Common Styles](/en/docs/manual/middle/elements/nodes/defaultNode/#style) are available for Circle node.`style` is an object to configure the filling color, stroke, and other styles. The following code shows how to configure the `style` globally when instantiating a Graph.

```javascript const data = { @@ -91,7 +91,7 @@ graph.render(); ### labelCfg -`labelCfg` is an object to configure the label of the node. Base on the code in [style](#style) section, we add `labelCfg` to `defaultNode`.。
+`labelCfg` is an object to configure the label of the node. The [Node Common Label Configurations](/en/docs/manual/middle/elements/nodes/defaultNode/#label-and-labelcfg) are available. Base on the code in [style](#style) section, we add `labelCfg` to `defaultNode`.。
```javascript const data = { // ... data @@ -99,7 +99,7 @@ const data = { const graph = new G6.Graph({ // ... Other configurations for graph defaultNode: { - // ... Other attributes for node + // ... Other properties for node labelCfg: { style: { fill: '#9254de', @@ -114,18 +114,22 @@ const graph = new G6.Graph({ ### linkPoints -`linkPoints` is an object to configure the link points on the 「top, bottom, left, and right」. +`linkPoints` is an object to configure the small circles on the 「top, bottom, left, and right」. + +⚠️Attention: It is different from `anchorPoints`: +`anchorPoints` is an 「**array**」 that indicates the actual relative positions used to specify the join position of the relevant edge of the node (refer to [anchorPoints](/en/docs/manual/middle/keyconcept/anchorpoint)); +`linkPoints` is an object that indicates whether 「**render**」the four small circles, which do not connect the relevant edges. These two properties are often used together. | Name | Description | Type | Remark | | --- | --- | --- | --- | -| top | Whether show the top link point | Boolean | `false` by default | -| bottom | Whether show the bototm link point | Boolean | `false` by default | -| left | Whether show the left link point | Boolean | `false` by default | -| right | Whether show the right link point | Boolean | `false` by default | -| size | The size of the link points | Number | `3` by default | -| fill | The filling color of the link points | String | `'#72CC4A'` by default | -| stroke | The stroke color of the link points | String | `'#72CC4A'` by default | -| lineWidth | The line width of the link points | Number | `1` by default | +| top | Whether to show the top small circle | Boolean | `false` by default | +| bottom | Whether to show the bototm small circle | Boolean | `false` by default | +| left | Whether to show the left small circle | Boolean | `false` by default | +| right | Whether to show the right small circle | Boolean | `false` by default | +| size | The size of the small circles | Number | `3` by default | +| fill | The filling color of the small circles | String | `'#72CC4A'` by default | +| stroke | The stroke color of the small circles | String | `'#72CC4A'` by default | +| lineWidth | The line width of the small circles | Number | `1` by default | Base on the code in [style](#style) section, we add `linkPoints` to `defaultNode`.
@@ -156,7 +160,7 @@ const graph = new G6.Graph({ | Name | Description | Type | Remark | | --- | --- | --- | --- | -| show | Whether show the icon | Boolean | `false` by default | +| show | Whether to show the icon | Boolean | `false` by default | | width | The width of the icon | Number | `16` by default | | height | The height of the icon | Number | `16` by default | | img | The image url of the icon | String | | diff --git a/docs/manual/middle/elements/nodes/diamond.zh.md b/docs/manual/middle/elements/nodes/diamond.zh.md index f1dfdaf804..79ed58ffd3 100644 --- a/docs/manual/middle/elements/nodes/diamond.zh.md +++ b/docs/manual/middle/elements/nodes/diamond.zh.md @@ -9,7 +9,7 @@ G6 内置了菱形 Diamond 节点，其默认样式如下。标签文本位于 ## 使用方法 -如 [内置节点](../defaultNode) 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。 +如 [内置节点](/zh/docs/manual/middle/elements/nodes/defaultNode) 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。 ### 1 实例化图时全局配置 @@ -46,7 +46,7 @@ const data = { ## 配置项说明 -Diamond 节点支持以下的配置项，对于 Object 类型的配置项将在后面有详细讲解： +Diamond 节点支持 [节点通用配置](/zh/docs/manual/middle/elements/nodes/defaultNode#节点的通用属性)，下表对部分属性进行解释。对于 Object 类型的配置项将在后面有详细讲解： | 名称 | 含义 | 类型 | 备注 | | --- | --- | --- | --- | @@ -55,13 +55,13 @@ Diamond 节点支持以下的配置项，对于 Object 类型的配置项将在 | label | 标签文本内容 | String | | | labelCfg | 标签文本配置项 | Object | | | stateStyles | 各状态下的样式 | Object | 只对 keyShape 起作用 | -| linkPoints | 菱形上的链接点 | Object | 默认不显示 | +| linkPoints | **视觉上的**四个锚点 | Object | 默认不显示，应与 [anchorPoints](/zh/docs/manual/middle/elements/nodes/defaultNode/#节点的通用属性) 配合使用。二者区别请看 [linkPoints](#linkpoints) | | icon | 菱形上icon配置 | Object | 默认不显示 icon | ### 样式属性 style -Object 类型。通过 `style` 配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 `style`，使之达到如下图效果。
+Object 类型。支持 [节点通用样式](/zh/docs/manual/middle/elements/nodes/defaultNode#样式属性-style)。通过 `style` 配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 `style`，使之达到如下图效果。
```javascript const data = { nodes: [{ @@ -91,7 +91,7 @@ graph.render(); ### 标签文本配置 labelCfg -Object 类型。通过 `labelCfg` 配置标签文本。基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultNode` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
+Object 类型。通过 `labelCfg` 配置标签文本。支持 [节点通用标签配置](/zh/docs/manual/middle/elements/nodes/defaultNode/#标签文本-label-及其配置-labelcfg)。基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultNode` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
```javascript const data = { // ... data 内容 @@ -113,19 +113,23 @@ const graph = new G6.Graph({ ``` -### 边的连入点 linkPoints -Object 类型。通过配置 `linkPoints` ，可以指定菱形周围「上、下、左、右」四个方向上边的连入点。 +### linkPoints +Object 类型。通过配置 `linkPoints` ，可以指定菱形周围「上、下、左、右」四个小圆点。 + +⚠️注意:区分于 `anchorPoints`： +`anchorPoints` 是真正用于指定该节点相关边的连入位置的「**数组**」，见 [anchorPoints](/zh/docs/manual/middle/keyconcept/anchorpoint)； +而 `linkPoints` 仅是指定是否「**绘制**」出四个圆点，不起实际的连接相关边的作用。二者常常配合使用。 | 名称 | 含义 | 类型 | 备注 | | --- | --- | --- | --- | -| top | 是否显示上部的连接点 | Boolean | 默认为 `false` | -| bottom | 是否显示底部的连接点 | Boolean | 默认为 `false` | -| left | 是否显示左侧的连接点 | Boolean | 默认为 `false` | -| right | 是否显示右侧的连接点 | Boolean | 默认为 `false` | -| size | 连接点的大小 | Number | 默认为 `3` | -| fill | 连接点的填充色 | String | 默认为 `'#72CC4A'` | -| stroke | 连接点的边框颜色 | String | 默认为 `'#72CC4A'` | -| lineWidth | 连接点边框的宽度 | Number | 默认为 `1` | +| top | 是否显示上部的圆点 | Boolean | 默认为 `false` | +| bottom | 是否显示底部的圆点 | Boolean | 默认为 `false` | +| left | 是否显示左侧的圆点 | Boolean | 默认为 `false` | +| right | 是否显示右侧的圆点 | Boolean | 默认为 `false` | +| size | 圆点的大小 | Number | 默认为 `3` | +| fill | 圆点的填充色 | String | 默认为 `'#72CC4A'` | +| stroke | 圆点的边框颜色 | String | 默认为 `'#72CC4A'` | +| lineWidth | 圆点边框的宽度 | Number | 默认为 `1` | 基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultNode` 中增加了 `linkPoints` 配置项进行连入点的配置，使之达到如下图效果。
diff --git a/docs/manual/middle/elements/nodes/ellipse.en.md b/docs/manual/middle/elements/nodes/ellipse.en.md index 69979ed915..2bd7cdc1bd 100644 --- a/docs/manual/middle/elements/nodes/ellipse.en.md +++ b/docs/manual/middle/elements/nodes/ellipse.en.md @@ -10,7 +10,7 @@ A built-in node Ellipse has the default style as below, the label is drawed on t ## Usage -As stated in [Built-in Nodes](../defaultNode) , there are two ways to configure the node: Configure it when instantiating a Graph globally; Configure it in the data. +As stated in [Built-in Nodes](/en/docs/manual/middle/elements/nodes/defaultNode) , there are two ways to configure the node: Configure it when instantiating a Graph globally; Configure it in the data. ### 1 Global Configure When Instantiating a Graph @@ -29,7 +29,7 @@ const graph = new G6.Graph({ ### 2 Configure in the Data -To configure different nodes with different attributes, you can write the attributes into the node data. +To configure different nodes with different properties, you can write the properties into the node data. ```javascript const data = { nodes: [{ @@ -46,23 +46,23 @@ const data = { ``` -## Attribute -Ellipse node has the attributes shown below. The attribute with Object type will be described after the table:
+## Property +The [Node Common Properties](/en/docs/manual/middle/elements/nodes/defaultNode/#common-property) are available for Ellipse node, some special properties are shown below. The property with Object type will be described after the table:
| Name | Description | Type | Remark | | --- | --- | --- | --- | -| size | The size of the ellipse | Number / Array | When it is a number, the ellipse looks like a circle. When it is an array, the `size[0]` is the major diameter, the `size[1]` the the minor diameter | +| size | The size of the ellipse | Number / Array | When it is a number, the ellipse looks like a circle. When it is an array, the `size[0]` is the major diameter, the `size[1]` is the minor diameter | | style | The default style of ellipse node | Object | Correspond to the styles in Canvas | | label | The text of the label | String | | | labelCfg | The configurations of the label | Object | | | stateStyles | The styles in different states | Object | Only takes effect on keyShape | -| linkPoints | The link points of the related edges | Object | They are invisible by default | +| linkPoints | The link points **in visual** | Object | They are invisible by default. It is usually used with the [anchorPoints](http://localhost:8000/en/docs/manual/middle/elements/nodes/defaultNode/#common-property). The differences are described in [linkPoints](#linkpoints) | | icon | The configurations of the icon on the ellipse node | Object | It is invisible by default | ### style -`style` is an object to configure the filling color, stroke, and other styles. The following code shows how to configure the `style` globally when instantiating a Graph.
+The [Node Common Styles](/en/docs/manual/middle/elements/nodes/defaultNode/#style) are available for Circle node.`style` is an object to configure the filling color, stroke, and other styles. The following code shows how to configure the `style` globally when instantiating a Graph.
```javascript const data = { nodes: [{ @@ -92,7 +92,7 @@ graph.render(); ### labelCfg -`labelCfg` is an object to configure the label of the node. Base on the code in [style](#style) section, we add `labelCfg` to `defaultNode`.
+`labelCfg` is an object to configure the label of the node. The [Node Common Label Configurations](/en/docs/manual/middle/elements/nodes/defaultNode/#label-and-labelcfg) are available. Base on the code in [style](#style) section, we add `labelCfg` to `defaultNode`.
```javascript const data = { // ... data @@ -100,7 +100,7 @@ const data = { const graph = new G6.Graph({ // ... Other configurations for graph defaultNode: { - // ... Other attributes for node + // ... Other properties for node labelCfg: { offset: 20, style: { @@ -116,18 +116,22 @@ const graph = new G6.Graph({ ### linkPoints -`linkPoints` is an object to configure the link points on the 「top, bottom, left, and right」. +`linkPoints` is an object to configure the small circles on the 「top, bottom, left, and right」. + +⚠️Attention: It is different from `anchorPoints`: +`anchorPoints` is an 「**array**」 that indicates the actual relative positions used to specify the join position of the relevant edge of the node (refer to [anchorPoints](/en/docs/manual/middle/keyconcept/anchorpoint)); +`linkPoints` is an object that indicates whether 「**render**」the four small circles, which do not connect the relevant edges. These two properties are often used together. | Name | Description | Type | Remark | | --- | --- | --- | --- | -| top | Whether show the top link point | Boolean | `false` by default | -| bottom | Whether show the bototm link point | Boolean | `false` by default | -| left | Whether show the left link point | Boolean | `false` by default | -| right | Whether show the right link point | Boolean | `false` by default | -| size | The size of the link points | Number | `3` by default | -| fill | The filling color of the link points | String | `'#72CC4A'` by default | -| stroke | The stroke color of the link points | String | `'#72CC4A'` by default | -| lineWidth | The line width of the link points | Number | `1` by default | +| top | Whether to show the top small circle | Boolean | `false` by default | +| bottom | Whether to show the bototm small circle | Boolean | `false` by default | +| left | Whether to show the left small circle | Boolean | `false` by default | +| right | Whether to show the right small circle | Boolean | `false` by default | +| size | The size of the small circles | Number | `3` by default | +| fill | The filling color of the small circles | String | `'#72CC4A'` by default | +| stroke | The stroke color of the small circles | String | `'#72CC4A'` by default | +| lineWidth | The line width of the small circles | Number | `1` by default | Base on the code in [style](#style) section, we add `linkPoints` to `defaultNode`.
@@ -158,7 +162,7 @@ const graph = new G6.Graph({ | Name | Description | Type | Remark | | --- | --- | --- | --- | -| show | Whether show the icon | Boolean | `false` by default | +| show | Whether to show the icon | Boolean | `false` by default | | width | The width of the icon | Number | `16` by default | | height | The height of the icon | Number | `16` by default | | img | The image url of the icon | String | | diff --git a/docs/manual/middle/elements/nodes/ellipse.zh.md b/docs/manual/middle/elements/nodes/ellipse.zh.md index e2af723ba6..0d14b35477 100644 --- a/docs/manual/middle/elements/nodes/ellipse.zh.md +++ b/docs/manual/middle/elements/nodes/ellipse.zh.md @@ -9,7 +9,7 @@ G6 内置了 ellipse 节点，其默认样式如下。标签文本位于椭圆 ## 使用方法 -如 [内置节点](../defaultNode) 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。 +如 [内置节点](/en/docs/manual/middle/elements/nodes/defaultNode) 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。 ### 1 实例化图时全局配置 @@ -46,7 +46,7 @@ const data = { ## 配置项说明 -ellipse 节点支持以下的配置项，对于 Object 类型的配置项将在后面有详细讲解： +ellipse 节点支持 [节点通用配置](/zh/docs/manual/middle/elements/nodes/defaultNode#节点的通用属性)，下表对部分属性进行解释。对于 Object 类型的配置项将在后面有详细讲解： | 名称 | 含义 | 类型 | 备注 | | --- | --- | --- | --- | @@ -55,13 +55,13 @@ ellipse 节点支持以下的配置项，对于 Object 类型的配置项将在 | label | 标签文本内容 | String | | | labelCfg | 标签文本配置项 | Object | | | stateStyles | 各状态下的样式 | Object | 只对 keyShape 起作用 | -| linkPoints | 椭圆上的链接点 | Object | 默认不显示 | +| linkPoints | **视觉上的**四个锚点 | Object | 默认不显示，应与 [anchorPoints](/zh/docs/manual/middle/elements/nodes/defaultNode/#节点的通用属性) 配合使用。二者区别请看 [linkPoints](#linkpoints) | | icon | 椭圆上 icon 配置 | Object | 默认不显示 icon | ### 样式属性 style -Object 类型。通过 `style` 配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 `style`，使之达到如下图效果。
+Object 类型。支持 [节点通用样式](/zh/docs/manual/middle/elements/nodes/defaultNode#样式属性-style)。通过 `style` 配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 `style`，使之达到如下图效果。
```javascript const data = { nodes: [{ @@ -91,7 +91,7 @@ graph.render(); ### 标签文本配置 labelCfg -Object 类型。通过 `labelCfg` 配置标签文本。基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultNode` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
+Object 类型。通过 `labelCfg` 配置标签文本。支持 [节点通用标签配置](/zh/docs/manual/middle/elements/nodes/defaultNode/#标签文本-label-及其配置-labelcfg)。基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultNode` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
```javascript const data = { // ... data 内容 @@ -113,19 +113,23 @@ const graph = new G6.Graph({ ``` -### 边的连入点 linkPoints -Object 类型。通过配置 `linkPoints` ，可以指定节点上「上、下、左、右」四个方向上边的连入点。 +### linkPoints +Object 类型。通过配置 `linkPoints` ，可以指定节点上「上、下、左、右」四个小圆点。 + +⚠️注意:区分于 `anchorPoints`： +`anchorPoints` 是真正用于指定该节点相关边的连入位置的「**数组**」，见 [anchorPoints](/zh/docs/manual/middle/keyconcept/anchorpoint)； +而 `linkPoints` 仅是指定是否「**绘制**」出四个圆点，不起实际的连接相关边的作用。二者常常配合使用。 | 名称 | 含义 | 类型 | 备注 | | --- | --- | --- | --- | -| top | 是否显示上部的连接点 | Boolean | 默认为 `false` | -| bottom | 是否显示底部的连接点 | Boolean | 默认为 `false` | -| left | 是否显示左侧的连接点 | Boolean | 默认为 `false` | -| right | 是否显示右侧的连接点 | Boolean | 默认为 `false` | -| size | 连接点的大小 | Number | 默认为 `3` | -| fill | 连接点的填充色 | String | 默认为 `'#72CC4A'` | -| stroke | 连接点的边框颜色 | String | 默认为 `'#72CC4A'` | -| lineWidth | 连接点边框的宽度 | Number | 默认为 `1` | +| top | 是否显示上部的圆点 | Boolean | 默认为 `false` | +| bottom | 是否显示底部的圆点 | Boolean | 默认为 `false` | +| left | 是否显示左侧的圆点 | Boolean | 默认为 `false` | +| right | 是否显示右侧的圆点 | Boolean | 默认为 `false` | +| size | 圆点的大小 | Number | 默认为 `3` | +| fill | 圆点的填充色 | String | 默认为 `'#72CC4A'` | +| stroke | 圆点的边框颜色 | String | 默认为 `'#72CC4A'` | +| lineWidth | 圆点边框的宽度 | Number | 默认为 `1` | 基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultNode` 中增加了 `linkPoints` 配置项进行连入点的配置，使之达到如下图效果。
diff --git a/docs/manual/middle/elements/nodes/image.en.md b/docs/manual/middle/elements/nodes/image.en.md index 53d93391e3..acf17c1f0f 100644 --- a/docs/manual/middle/elements/nodes/image.en.md +++ b/docs/manual/middle/elements/nodes/image.en.md @@ -8,7 +8,7 @@ A built-in node Circle has the default style as below, the label is drawed on th ## Usage -As stated in [Built-in Nodes](../defaultNode) , there are two ways to configure the node: Configure it when instantiating a Graph globally; Configure it in the data. +As stated in [Built-in Nodes](/en/docs/manual/middle/elements/nodes/defaultNode) , there are two ways to configure the node: Configure it when instantiating a Graph globally; Configure it in the data. ### 1 实例化图时全局配置 @@ -28,7 +28,7 @@ const graph = new G6.Graph({ ### 2 Configure in the Data -To configure different nodes with different attributes, you can write the attributes into the node data. +To configure different nodes with different properties, you can write the properties into the node data. ```javascript const data = { nodes: [{ @@ -56,8 +56,8 @@ const data = { ``` -## Attribute -Image node has the attributes shown below. The attribute with Object type will be described after the table: +## Property +The [Node Common Properties](/en/docs/manual/middle/elements/nodes/defaultNode/#common-property) are available for Image node, some special properties are shown below. The property with Object type will be described after the table: ```javascript img: 'https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000', @@ -85,11 +85,11 @@ size: 200, | Name | Description | Type | Remark | | --- | --- | --- | --- | -| **img** | **The URL addgress** | **String** | **special attribute for image node** | +| **img** | **The URL addgress** | **String** | **special property for image node** | | size | The size of the node | Number | Array | When it is a number, the width and the height are the same | | label | The text of the label | String | | -| labelCfg | The configurations for the label | Object | | -| **clipCfg** | **The configurations for clipping** | **Object** | **Do not clip by default. It is a special attribute for image node** | +| labelCfg | The configurations for the label | Object | The [Node Common Label Configurations](/en/docs/manual/middle/elements/nodes/defaultNode/#label-and-labelcfg) are available. | +| **clipCfg** | **The configurations for clipping** | **Object** | **Do not clip by default. It is a special property for image node** | @@ -100,7 +100,7 @@ size: 200, | type | The type of shape of clipping | String | Options: `'circle'`, `'rect'`, `'ellipse'` | | x | The x coordinate of the clipping shape | Number | 0 by default. Only takes effect when the `type` is `'circle'`, `'rect'`, or `'ellipse'` | | y | The y coordinate of the clipping shape | Number | 0 by default. Only takes effect when the `type` is `'circle'`, `'rect'`, or `'ellipse' | -| show | Whether clip the image | Boolean | Do not clip by default. | +| show | Whether to clip the image | Boolean | Do not clip by default. | | r | The radius of circle clipping | Number | Takes effect when the `type` is `'circle'` | | width | The width of the clipping | Number | Takes effect when the `type` is `'rect'` | | height | The height of the clipping | Number | Takes effect when the `type` is `'rect'` | diff --git a/docs/manual/middle/elements/nodes/image.zh.md b/docs/manual/middle/elements/nodes/image.zh.md index 57bf1cdec1..9e8ee01f74 100644 --- a/docs/manual/middle/elements/nodes/image.zh.md +++ b/docs/manual/middle/elements/nodes/image.zh.md @@ -8,7 +8,7 @@ G6 内置了 image 节点，其默认样式如下。标签文本位于图片下 ## 使用方法 -如 [内置节点](../defaultNode) 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。 +如 [内置节点](/zh/docs/manual/middle/elements/nodes/defaultNode) 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。 ### 1 实例化图时全局配置 @@ -58,7 +58,7 @@ const data = { ## 配置项说明 -image 节点支持以下的配置项： +image 节点支持 [节点通用配置](/zh/docs/manual/middle/elements/nodes/defaultNode#节点的通用属性)，下表对部分属性进行解释： ```javascript img: 'https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000', size: 200, @@ -88,7 +88,7 @@ size: 200, | **img** | **图片 URL 地址** | **String** | **image 节点特有** | | size | 图片大小 | Number | Array | `size` 为单个值时，表示宽高相等 | | label | 标签文本内容 | String | | -| labelCfg | 标签文本配置项 | Object | | +| labelCfg | 标签文本配置项 | Object | 支持 [节点通用标签配置](/zh/docs/manual/middle/elements/nodes/defaultNode/#标签文本-label-及其配置-labelcfg)。 | | **clipCfg** | **裁剪图片的配置项** | **Object** | **默认不裁剪，image 节点特有** | diff --git a/docs/manual/middle/elements/nodes/modelRect.en.md b/docs/manual/middle/elements/nodes/modelRect.en.md index 28bab60b93..cd5ff92331 100644 --- a/docs/manual/middle/elements/nodes/modelRect.en.md +++ b/docs/manual/middle/elements/nodes/modelRect.en.md @@ -15,7 +15,7 @@ A built-in node modelRect has the default style as below, the label is drawed on ## Usage -As stated in [Built-in Nodes](../defaultNode) , there are two ways to configure the node: Configure it when instantiating a Graph globally; Configure it in the data. +As stated in [Built-in Nodes](/en/docs/manual/middle/elements/nodes/defaultNode) , there are two ways to configure the node: Configure it when instantiating a Graph globally; Configure it in the data. ### 1 Global Configure When Instantiating a Graph @@ -35,7 +35,7 @@ const graph = new G6.Graph({ ### 2 Configure in the Data -To configure different nodes with different attributes, you can write the attributes into the node data. +To configure different nodes with different properties, you can write the properties into the node data. ```javascript const data = { nodes: [{ @@ -52,8 +52,8 @@ const data = { ``` -## Attribute -ModelRect node has the attributes shown below. The attribute with Object type will be described after the table: +## Property +The [Node Common Properties](/en/docs/manual/middle/elements/nodes/defaultNode/#common-property) are available for ModelRect node, some special properties are shown below. The property with Object type will be described after the table: | Name | Description | Type | Remark | | --- | --- | --- | --- | @@ -62,16 +62,18 @@ ModelRect node has the attributes shown below. The attribute with Object type wi | label | The text of the label | String | | | labelCfg | The configurations of the label | Object | | | stateStyles | The styles in different states | Object | Only takes effect on keyShape | -| linkPoints | The link points of the related edges | Object | They are invisible by default | -| **preRect** | **Left rect of the node** | **Object** | **Special attribute for modelRect** | -| **logoIcon** | **The left logo icon** | **Object** | **Special attribute for modelRect** | -| **stateIcon** | **The right state icon** | **Object** | **Special attribute for modelRect** | +| linkPoints | The link points **in visual** | Object | They are invisible by default. It is usually used with the [anchorPoints](http://localhost:8000/en/docs/manual/middle/elements/nodes/defaultNode/#common-property). The differences are described in [linkPoints](#linkpoints) | +| **preRect** | **Left rect of the node** | **Object** | **Special property for modelRect** | +| **logoIcon** | **The left logo icon** | **Object** | **Special property for modelRect** | +| **stateIcon** | **The right state icon** | **Object** | **Special property for modelRect** | +| **description** | **The description text below the label** | **String** | **Special property for modelRect** | +| ~~**descriptionCfg**~~
*It will be supported after V3.3* | ~~**The configuration for description text**~~ | ~~**Object**~~ | ~~**Special property for modelRect**~~ | ```javascript // The configuration of the logo icon in the node logoIcon: { - // Whether show the icon. false means hide the icon + // Whether to show the icon. false means hide the icon show: true, x: 0, y: 0, @@ -84,7 +86,7 @@ ModelRect node has the attributes shown below. The attribute with Object type wi }, // The configuration of the state icon in the node stateIcon: { - // Whether show the icon. false means hide the icon + // Whether to show the icon. false means hide the icon show: true, x: 0, y: 0, @@ -99,7 +101,7 @@ ModelRect node has the attributes shown below. The attribute with Object type wi ### style -`style` is an object to configure the filling color, stroke, and other styles. The following code shows how to configure the `style` globally when instantiating a Graph.
+The [Node Common Styles](/en/docs/manual/middle/elements/nodes/defaultNode/#style) are available for Circle node.`style` is an object to configure the filling color, stroke, and other styles. The following code shows how to configure the `style` globally when instantiating a Graph.
```javascript const data = { nodes: [{ @@ -129,7 +131,7 @@ graph.render(); ### labelCfg -`labelCfg` is an object to configure the label of the node. Base on the code in [style](#style) section, we add `labelCfg` to `defaultNode`.
+`labelCfg` is an object to configure the label of the node. The [Node Common Label Configurations](/en/docs/manual/middle/elements/nodes/defaultNode/#label-and-labelcfg) are available. Base on the code in [style](#style) section, we add `labelCfg` to `defaultNode`.
```javascript const data = { // ... data @@ -137,7 +139,7 @@ const data = { const graph = new G6.Graph({ // ... Other configurations for graph defaultNode: { - // ... Other attributes for node + // ... Other properties for node labelCfg: { style: { fill: '#9254de', @@ -150,19 +152,54 @@ const graph = new G6.Graph({ ``` -### linkPoints -`linkPoints` is an object to configure the link points on the 「top, bottom, left, and right」. +### ~~descriptionCfg~~ +⚠️**Attension:** *It will be supported after V3.3.* + +`descriptionCfg` is an object to configure the label of the node. The [Node Common Label Configurations](/en/docs/manual/middle/elements/nodes/defaultNode/#label-and-labelcfg) are available. Besides, descriptionCfg has special attribute: | Name | Description | Type | Remark | | --- | --- | --- | --- | -| top | Whether show the top link point | Boolean | `false` by default | -| bottom | Whether show the bototm link point | Boolean | `false` by default | -| left | Whether show the left link point | Boolean | `false` by default | -| right | Whether show the right link point | Boolean | `false` by default | -| size | The size of the link points | Number | `3` by default | -| fill | The filling color of the link points | String | `'#72CC4A'` by default | -| stroke | The stroke color of the link points | String | `'#72CC4A'` by default | -| lineWidth | The line width of the link points | Number | `1` by default | +| paddingTop | The padding from the description to the label text | Number | `0` by default | + +Base on the code in [style](#style) section, we add `descriptionCfg` to `defaultNode` + +```javascript +const data = { + // ... data +}; +const graph = new G6.Graph({ + // ... Other configurations for graph + defaultNode: { + // ... Other properties for node + descriptionCfg: { + style: { + fill: '#f00', + } + } + } +}); +// ... +``` + + + +### linkPoints +`linkPoints` is an object to configure the small circles on the 「top, bottom, left, and right」. + +⚠️Attention: It is different from `anchorPoints`: +`anchorPoints` is an 「**array**」 that indicates the actual relative positions used to specify the join position of the relevant edge of the node (refer to [anchorPoints](/en/docs/manual/middle/keyconcept/anchorpoint)); +`linkPoints` is an object that indicates whether 「**render**」the four small circles, which do not connect the relevant edges. These two properties are often used together. + +| Name | Description | Type | Remark | +| --- | --- | --- | --- | +| top | Whether to show the top small circle | Boolean | `false` by default | +| bottom | Whether to show the bototm small circle | Boolean | `false` by default | +| left | Whether to show the left small circle | Boolean | `false` by default | +| right | Whether to show the right small circle | Boolean | `false` by default | +| size | The size of the small circles | Number | `3` by default | +| fill | The filling color of the small circles | String | `'#72CC4A'` by default | +| stroke | The stroke color of the small circles | String | `'#72CC4A'` by default | +| lineWidth | The line width of the small circles | Number | `1` by default | Base on the code in [style](#style) section, we add `linkPoints` to `defaultNode`.
@@ -193,9 +230,9 @@ const graph = new G6.Graph({ | Name | Description | Type | Remark | | --- | --- | --- | --- | -| show | Whether show the left rect | Boolean | `true` by default | +| show | Whether to show the left rect | Boolean | `true` by default | | width | The width of the left rect | Number | `4` by default | -| fill | The filling color the the left rect | String | `'#40a9ff'` by default | +| fill | The filling color of the left rect | String | `'#40a9ff'` by default | | radius | The border radius of the left rect | Number | `2` by default | @@ -225,7 +262,7 @@ const graph = new G6.Graph({ | Name | Description | Type | Remark | | --- | --- | --- | --- | -| show | Whether show the icon | Boolean | `true` by default | +| show | Whether to show the icon | Boolean | `true` by default | | img | The url of the icon image | String |
- The default image for `logoIcon` is 
- The default image for `stateIcon` is
| | width | The width of the icon | Number | `16` by default | | height | The height of the icon | Number | `16` by default | diff --git a/docs/manual/middle/elements/nodes/modelRect.zh.md b/docs/manual/middle/elements/nodes/modelRect.zh.md index 1a411cda46..478a0ec5f8 100644 --- a/docs/manual/middle/elements/nodes/modelRect.zh.md +++ b/docs/manual/middle/elements/nodes/modelRect.zh.md @@ -15,7 +15,7 @@ G6 内置了方形卡片 modelRect 节点，其默认样式如下。标签文 ## 使用方法 -如 [内置节点](../defaultNode) 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。 +如 [内置节点](/zh/docs/manual/middle/elements/nodes/defaultNode) 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。 ### 1 实例化图时全局配置 @@ -52,7 +52,7 @@ const data = { ## 配置项说明 -modelRect 节点支持以下的配置项，对于 Object 类型的配置项将在后面有详细讲解： +modelRect 节点支持 [节点通用配置](/zh/docs/manual/middle/elements/nodes/defaultNode#节点的通用属性)，下表对部分属性进行解释。对于 Object 类型的配置项将在后面有详细讲解： | 名称 | 含义 | 类型 | 备注 | | --- | --- | --- | --- | @@ -61,10 +61,12 @@ modelRect 节点支持以下的配置项，对于 Object 类型的配置项将 | label | 标签文本内容 | String | | | labelCfg | 文本配置项 | Object | | | stateStyles | 各状态下的样式 | Object | 只对 keyShape 起作用 | -| linkPoints | 相关边的连入点 | Object | 默认不显示 | +| linkPoints | **视觉上的**四个锚点 | Object | 默认不显示，应与 [anchorPoints](/zh/docs/manual/middle/elements/nodes/defaultNode/#节点的通用属性) 配合使用。二者区别请看 [linkPoints](#linkpoints) | | **preRect** | **左侧的小矩形** | **Object** | **modelRect 节点特有** | -| **logoIcon** | **左侧的logo图标** | **Object** | **modelRect 节点特有** | +| **logoIcon** | **左侧的 logo 图标** | **Object** | **modelRect 节点特有** | | **stateIcon** | **右侧的状态图标** | **Object** | **modelRect 节点特有** | +| **description** | **节点主要文本下方的描述文本** | **String** | **modelRect 节点特有** | +| ~~**descriptionCfg**~~
*将在 V3.3 版本后支持* | ~~**描述文本的配置项**~~ | ~~**Object**~~ | ~~**modelRect 节点特有**~~ | ```javascript @@ -98,7 +100,7 @@ modelRect 节点支持以下的配置项，对于 Object 类型的配置项将 ### 样式属性 style -Object 类型。通过 `style` 配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 `style`，使之达到如下图效果。
+Object 类型。支持 [节点通用样式](/zh/docs/manual/middle/elements/nodes/defaultNode#样式属性-style)。通过 `style` 配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 `style`，使之达到如下图效果。
```javascript const data = { nodes: [{ @@ -128,7 +130,7 @@ graph.render(); ### 标签文本配置 labelCfg -Object 类型。通过 `labelCfg` 配置标签文本。基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultNode` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
+Object 类型。通过 `labelCfg` 配置标签文本。支持 [节点通用标签配置](/zh/docs/manual/middle/elements/nodes/defaultNode/#标签文本-label-及其配置-labelcfg)。基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultNode` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
```javascript const data = { // ... data 内容 @@ -149,19 +151,53 @@ const graph = new G6.Graph({ ``` -### 边的连入点 linkPoints -Object 类型。通过配置 `linkPoints` ，可以指定 modelRect 周围「上、下、左、右」四个方向上边的连入点。 +### ~~描述文本配置 descriptionCfg~~ +⚠️**注意：** *将在 V3.3 版本后支持。* + +Object 类型。通过 `descriptionCfg` 配置标签文本。支持 [节点通用标签配置](/zh/docs/manual/middle/elements/nodes/defaultNode/#标签文本-label-及其配置-labelcfg)。此外，还有一个特殊属性： | 名称 | 含义 | 类型 | 备注 | | --- | --- | --- | --- | -| top | 是否显示上部的连接点 | Boolean | 默认为 `false` | -| bottom | 是否显示底部的连接点 | Boolean | 默认为 `false` | -| left | 是否显示左侧的连接点 | Boolean | 默认为 `false` | -| right | 是否显示右侧的连接点 | Boolean | 默认为 `false` | -| size | 连接点的大小 | Number | 默认为 `3` | -| fill | 连接点的填充色 | String | 默认为 `'#72CC4A'` | -| stroke | 连接点的边框颜色 | String | 默认为 `'#72CC4A'` | -| lineWidth | 连接点边框的宽度 | Number | 默认为 1 | +| paddingTop | 距离上方标签文本的垂直距离 | Number | 默认为 `0` | + + +基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultNode` 中增加了 `descriptionCfg` 配置项进行描述文本的配置。 +```javascript +const data = { + // ... data 内容 +}; +const graph = new G6.Graph({ + // ... 图的其他属性 + defaultNode: { + // ... 节点其他属性 + descriptionCfg: { + style: { + fill: '#f00', + } + } + } +}); +// ... +``` + + +### linkPoints +Object 类型。通过配置 `linkPoints` ，可以指定 modelRect 周围「上、下、左、右」四个小圆点。 + +⚠️注意:区分于 `anchorPoints`： +`anchorPoints` 是真正用于指定该节点相关边的连入位置的「**数组**」，见 [anchorPoints](/zh/docs/manual/middle/keyconcept/anchorpoint)； +而 `linkPoints` 仅是指定是否「**绘制**」出四个圆点，不起实际的连接相关边的作用。二者常常配合使用。 + +| 名称 | 含义 | 类型 | 备注 | +| --- | --- | --- | --- | +| top | 是否显示上部的圆点 | Boolean | 默认为 `false` | +| bottom | 是否显示底部的圆点 | Boolean | 默认为 `false` | +| left | 是否显示左侧的圆点 | Boolean | 默认为 `false` | +| right | 是否显示右侧的圆点 | Boolean | 默认为 `false` | +| size | 圆点的大小 | Number | 默认为 `3` | +| fill | 圆点的填充色 | String | 默认为 `'#72CC4A'` | +| stroke | 圆点的边框颜色 | String | 默认为 `'#72CC4A'` | +| lineWidth | 圆点边框的宽度 | Number | 默认为 1 | 基于上面 [样式属性 style](#819eF) 中的代码，下面代码在 `defaultNode` 中增加了 `linkPoints` 配置项进行连入点的配置，使之达到如下图效果。
diff --git a/docs/manual/middle/elements/nodes/rect.en.md b/docs/manual/middle/elements/nodes/rect.en.md index 316804e718..510de148b7 100644 --- a/docs/manual/middle/elements/nodes/rect.en.md +++ b/docs/manual/middle/elements/nodes/rect.en.md @@ -7,7 +7,7 @@ A built-in node Rect has the default style as below, the label is drawed on the ## Usage -As stated in [Built-in Nodes](../defaultNode) , there are two ways to configure the node: Configure it when instantiating a Graph globally; Configure it in the data. +As stated in [Built-in Nodes](/en/docs/manual/middle/elements/nodes/defaultNode) , there are two ways to configure the node: Configure it when instantiating a Graph globally; Configure it in the data. ### 1 Global Configure When Instantiating a Graph @@ -26,7 +26,7 @@ const graph = new G6.Graph({ ### 2 Configure in the Data -To configure different nodes with different attributes, you can write the attributes into the node data. +To configure different nodes with different properties, you can write the properties into the node data. ```javascript const data = { nodes: [{ @@ -43,8 +43,8 @@ const data = { ``` -## Attribute -Rect node has the attributes shown below. The attribute with Object type will be described after the table: +## Property +The [Node Common Properties](/en/docs/manual/middle/elements/nodes/defaultNode/#common-property) are available for Rect node, some special properties are shown below. The property with Object type will be described after the table: | Name | Description | Type | Remark | | --- | --- | --- | --- | @@ -53,12 +53,12 @@ Rect node has the attributes shown below. The attribute with Object type will be | label | The text of the label | String | | | labelCfg | The configurations of the label | Object | | | stateStyles | The styles in different states | Object | Only takes effect on keyShape | -| linkPoints | The link points of the related edges | Object | They are invisible by default | +| linkPoints | The link points **in visual** | Object | They are invisible by default. It is usually used with the [anchorPoints](http://localhost:8000/en/docs/manual/middle/elements/nodes/defaultNode/#common-property). The differences are described in [linkPoints](#linkpoints) | ### style -`style` is an object to configure the filling color, stroke, and other styles. +The [Node Common Styles](/en/docs/manual/middle/elements/nodes/defaultNode/#style) are available for Circle node.`style` is an object to configure the filling color, stroke, and other styles. | Name | Description | Type | Remark | | --- | --- | --- | --- | @@ -100,7 +100,7 @@ graph.render(); ### labelCfg -`labelCfg` is an object to configure the label of the node. Base on the code in [style](#style) section, we add `labelCfg` to `defaultNode`.
+`labelCfg` is an object to configure the label of the node. The [Node Common Label Configurations](/en/docs/manual/middle/elements/nodes/defaultNode/#label-and-labelcfg) are available. Base on the code in [style](#style) section, we add `labelCfg` to `defaultNode`.
```javascript const data = { // ... data @@ -108,7 +108,7 @@ const data = { const graph = new G6.Graph({ // ... Other configurations for graph defaultNode: { - // ... Other attributes for node + // ... Other properties for node labelCfg: { style: { fill: '#9254de', @@ -123,18 +123,22 @@ const graph = new G6.Graph({ ### linkPoints -`linkPoints` is an object to configure the link points on the 「top, bottom, left, and right」. +`linkPoints` is an object to configure the small circles on the 「top, bottom, left, and right」. + +⚠️Attention: It is different from `anchorPoints`: +`anchorPoints` is an 「**array**」 that indicates the actual relative positions used to specify the join position of the relevant edge of the node (refer to [anchorPoints](/en/docs/manual/middle/keyconcept/anchorpoint)); +`linkPoints` is an object that indicates whether 「**render**」the four small circles, which do not connect the relevant edges. These two properties are often used together. | Name | Description | Type | Remark | | --- | --- | --- | --- | -| top | Whether show the top link point | Boolean | `false` by default | -| bottom | Whether show the bototm link point | Boolean | `false` by default | -| left | Whether show the left link point | Boolean | `false` by default | -| right | Whether show the right link point | Boolean | `false` by default | -| size | The size of the link points | Number | `3` by default | -| fill | The filling color of the link points | String | `'#72CC4A'` by default | -| stroke | The stroke color of the link points | String | `'#72CC4A'` by default | -| lineWidth | The line width of the link points | Number | `1` by default | +| top | Whether to show the top small circle | Boolean | `false` by default | +| bottom | Whether to show the bototm small circle | Boolean | `false` by default | +| left | Whether to show the left small circle | Boolean | `false` by default | +| right | Whether to show the right small circle | Boolean | `false` by default | +| size | The size of the small circles | Number | `3` by default | +| fill | The filling color of the small circles | String | `'#72CC4A'` by default | +| stroke | The stroke color of the small circles | String | `'#72CC4A'` by default | +| lineWidth | The line width of the small circles | Number | `1` by default | Base on the code in [style](#style) section, we add `linkPoints` to `defaultNode`.
diff --git a/docs/manual/middle/elements/nodes/rect.zh.md b/docs/manual/middle/elements/nodes/rect.zh.md index 8aad348935..498a0c6f5c 100644 --- a/docs/manual/middle/elements/nodes/rect.zh.md +++ b/docs/manual/middle/elements/nodes/rect.zh.md @@ -7,7 +7,7 @@ G6 内置了 rect 节点，其默认样式如下。标签文本位于矩形中 ## 使用方法 -如 [内置节点](../defaultNode) 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。 +如 [内置节点](/zh/docs/manual/middle/elements/nodes/defaultNode) 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。 ### 1 实例化图时全局配置 @@ -44,7 +44,7 @@ const data = { ## 配置项说明 -rect 节点支持以下的配置项，对于 Object 类型的配置项将在后面有详细讲解： +rect 节点支持 [节点通用配置](/zh/docs/manual/middle/elements/nodes/defaultNode#节点的通用属性)，下表对部分属性进行解释。对于 Object 类型的配置项将在后面有详细讲解： | 名称 | 含义 | 类型 | 备注 | | --- | --- | --- | --- | @@ -53,12 +53,12 @@ rect 节点支持以下的配置项，对于 Object 类型的配置项将在后 | label | 标签文本内容 | String | | | labelCfg | 标签配置项 | Object | | | stateStyles | 各状态下的样式 | Object | 只对 `keyShape` 起作用 | -| linkPoints | rect上的链接点 | Object | 默认不显示 | +| linkPoints | **视觉上的**四个锚点 | Object | 默认不显示，应与 [anchorPoints](/zh/docs/manual/middle/elements/nodes/defaultNode/#节点的通用属性) 配合使用。二者区别请看 [linkPoints](#linkpoints) | ### 样式属性 style -Object 类型。通过 `style` 配置来修改 `rect` 的填充色、边框颜色、阴影等属性。 +Object 类型。支持 [节点通用样式](/zh/docs/manual/middle/elements/nodes/defaultNode#样式属性-style)。通过 `style` 配置来修改 `rect` 的填充色、边框颜色、阴影等属性。 | 名称 | 含义 | 类型 | 备注 | | --- | --- | --- | --- | @@ -100,7 +100,7 @@ graph.render(); ### 标签文本配置 labelCfg -Object 类型。通过 `labelCfg` 配置标签文本。基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultNode` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
+Object 类型。通过 `labelCfg` 配置标签文本。支持 [节点通用标签配置](/zh/docs/manual/middle/elements/nodes/defaultNode/#标签文本-label-及其配置-labelcfg)。基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultNode` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
```javascript const data = { // ... data 内容 @@ -122,19 +122,23 @@ const graph = new G6.Graph({ ``` -### 边的连入点 linkPoints -Object 类型。通过配置 `linkPoints` ，可以指定矩形周围「上、下、左、右」四个方向上边的连入点。 +### linkPoints +Object 类型。通过配置 `linkPoints` ，可以指定矩形周围「上、下、左、右」四个小圆点。 + +⚠️注意:区分于 `anchorPoints`： +`anchorPoints` 是真正用于指定该节点相关边的连入位置的「**数组**」，见 [anchorPoints](/zh/docs/manual/middle/keyconcept/anchorpoint)； +而 `linkPoints` 仅是指定是否「**绘制**」出四个圆点，不起实际的连接相关边的作用。二者常常配合使用。 | 名称 | 含义 | 类型 | 备注 | | --- | --- | --- | --- | -| top | 是否显示上部的连接点 | Boolean | 默认为 `false` | -| bottom | 是否显示底部的连接点 | Boolean | 默认为 `false` | -| left | 是否显示左侧的连接点 | Boolean | 默认为 `false` | -| right | 是否显示右侧的连接点 | Boolean | 默认为 `false` | -| size | 连接点的大小 | Number | 默认为 `3` | -| fill | 连接点的填充色 | String | 默认为 `'#72CC4A'` | -| stroke | 连接点的边框颜色 | String | 默认为 `'#72CC4A'` | -| lineWidth | 连接点边框的宽度 | Number | 默认为 `1` | +| top | 是否显示上部的圆点 | Boolean | 默认为 `false` | +| bottom | 是否显示底部的圆点 | Boolean | 默认为 `false` | +| left | 是否显示左侧的圆点 | Boolean | 默认为 `false` | +| right | 是否显示右侧的圆点 | Boolean | 默认为 `false` | +| size | 圆点的大小 | Number | 默认为 `3` | +| fill | 圆点的填充色 | String | 默认为 `'#72CC4A'` | +| stroke | 圆点的边框颜色 | String | 默认为 `'#72CC4A'` | +| lineWidth | 圆点边框的宽度 | Number | 默认为 `1` | 基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultNode` 中增加了 `linkPoints` 配置项进行连入点的配置。
diff --git a/docs/manual/middle/elements/nodes/star.en.md b/docs/manual/middle/elements/nodes/star.en.md index 69445417cd..a8073b1bb4 100644 --- a/docs/manual/middle/elements/nodes/star.en.md +++ b/docs/manual/middle/elements/nodes/star.en.md @@ -7,7 +7,7 @@ A built-in node Star has the default style as below, the label is drawed on the ## Usage -As stated in [Built-in Nodes](../defaultNode) , there are two ways to configure the node: Configure it when instantiating a Graph globally; Configure it in the data. +As stated in [Built-in Nodes](/en/docs/manual/middle/elements/nodes/defaultNode) , there are two ways to configure the node: Configure it when instantiating a Graph globally; Configure it in the data. ### 1 Global Configure When Instantiating a Graph @@ -26,7 +26,7 @@ const graph = new G6.Graph({ ### 2 Configure in the Data -To configure different nodes with different attributes, you can write the attributes into the node data. +To configure different nodes with different properties, you can write the properties into the node data. ```javascript const data = { nodes: [{ @@ -43,8 +43,8 @@ const data = { ``` -## Attribute -Star node has the attributes shown below. The attribute with Object type will be described after the table: +## Property +The [Node Common Properties](/en/docs/manual/middle/elements/nodes/defaultNode/#common-property) are available for Star node, some special properties are shown below. The property with Object type will be described after the table: | Name | Description | Type | Remark | | --- | --- | --- | --- | @@ -54,13 +54,13 @@ Star node has the attributes shown below. The attribute with Object type will be | label | The text of the label | String | | | labelCfg | The configurations of the label | Object | | | stateStyles | The styles in different states | Object | Only takes effect on keyShape | -| linkPoints | The link points of the related edges | Object | They are invisible by default | +| linkPoints | The link points **in visual** | Object | They are invisible by default. It is usually used with the [anchorPoints](http://localhost:8000/en/docs/manual/middle/elements/nodes/defaultNode/#common-property). The differences are described in [linkPoints](#linkpoints) | | icon | The configurations of the icon on the star node | Object | It is invisible by default | ### style -`style` is an object to configure the filling color, stroke, and other styles. The following code shows how to configure the `style` globally when instantiating a Graph.
+The [Node Common Styles](/en/docs/manual/middle/elements/nodes/defaultNode/#style) are available for Circle node.`style` is an object to configure the filling color, stroke, and other styles. The following code shows how to configure the `style` globally when instantiating a Graph.
```javascript const data = { nodes: [{ @@ -90,7 +90,7 @@ graph.render(); ### labelCfg -`labelCfg` is an object to configure the label of the node. Base on the code in [style](#style) section, we add `labelCfg` to `defaultNode`.
+`labelCfg` is an object to configure the label of the node. The [Node Common Label Configurations](/en/docs/manual/middle/elements/nodes/defaultNode/#label-and-labelcfg) are available. Base on the code in [style](#style) section, we add `labelCfg` to `defaultNode`.
```javascript const data = { // ... data @@ -98,7 +98,7 @@ const data = { const graph = new G6.Graph({ // ... Other configurations for graph defaultNode: { - // ... Other attributes for node + // ... Other properties for node labelCfg: { style: { fill: '#9254de', @@ -112,19 +112,23 @@ const graph = new G6.Graph({ ### linkPoints -`linkPoints` is an object to configure the link points on the 「top, left bottom, right bottom, left, and right」. +`linkPoints` is an object to configure the small circles on the 「top, left bottom, right bottom, left, and right」. + +⚠️Attention: It is different from `anchorPoints`: +`anchorPoints` is an 「**array**」 that indicates the actual relative positions used to specify the join position of the relevant edge of the node (refer to [anchorPoints](/en/docs/manual/middle/keyconcept/anchorpoint)); +`linkPoints` is an object that indicates whether 「**render**」the four small circles, which do not connect the relevant edges. These two properties are often used together. | Name | Description | Type | Remark | | --- | --- | --- | --- | -| top | Whether show the top link point | Boolean | `false` by default | -| **leftBottom** | **Whether show the left bottom link point** | **Boolean** | **`false` by default. It is a special attribute for star node** | -| **rightBottom** | **Whether show the right bottom link point** | **Boolean** | **`false` by default. It is a special attribute for star node** | -| left | Whether show the left link point | Boolean | `false` by default | -| right | Whether show the right link point | Boolean | `false` by default | -| size | The size of the link points | Number | `3` by default | -| fill | The filling color of the link points | String | `'#72CC4A'` by default | -| stroke | The stroke color of the link points | String | `'#72CC4A'` by default | -| lineWidth | The line width of the link points | Number | `1` by default | +| top | Whether to show the top small circle | Boolean | `false` by default | +| **leftBottom** | **Whether to show the left bottom small circle** | **Boolean** | **`false` by default. It is a special property for star node** | +| **rightBottom** | **Whether to show the right bottom small circle** | **Boolean** | **`false` by default. It is a special property for star node** | +| left | Whether to show the left small circle | Boolean | `false` by default | +| right | Whether to show the right small circle | Boolean | `false` by default | +| size | The size of the small circles | Number | `3` by default | +| fill | The filling color of the small circles | String | `'#72CC4A'` by default | +| stroke | The stroke color of the small circles | String | `'#72CC4A'` by default | +| lineWidth | The line width of the small circles | Number | `1` by default | @@ -158,7 +162,7 @@ const graph = new G6.Graph({ | Name | Description | Type | Remark | | --- | --- | --- | --- | -| show | Whether show the icon | Boolean | `false` by default | +| show | Whether to show the icon | Boolean | `false` by default | | width | The width of the icon | Number | `16` by default | | height | The height of the icon | Number | `16` by default | | img | The image url of the icon | String | | diff --git a/docs/manual/middle/elements/nodes/star.zh.md b/docs/manual/middle/elements/nodes/star.zh.md index 1217403c35..50534e7abb 100644 --- a/docs/manual/middle/elements/nodes/star.zh.md +++ b/docs/manual/middle/elements/nodes/star.zh.md @@ -7,7 +7,7 @@ G6 内置了星形 star 节点，其默认样式如下。标签文本位于星 ## 使用方法 -如 [内置节点](../defaultNode) 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。 +如 [内置节点](/zh/docs/manual/middle/elements/nodes/defaultNode) 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。 ### 1 实例化图时全局配置 @@ -44,7 +44,7 @@ const data = { ## 配置项说明 -star 节点支持以下的配置项： +star 节点支持 [节点通用配置](/zh/docs/manual/middle/elements/nodes/defaultNode#节点的通用属性)，下表对部分属性进行解释： | 名称 | 含义 | 类型 | 备注 | | --- | --- | --- | --- | @@ -54,13 +54,13 @@ star 节点支持以下的配置项： | label | 标签文本内容 | String | | | labelCfg | 标签文本配置项 | Object | | | stateStyles | 各状态下的样式 | Object | 只对 keyShape 起作用 | -| linkPoints | 五角星上的链接点 | Object | 默认不显示 | +| linkPoints | **视觉上的**五个锚点 | Object | 默认不显示，应与 [anchorPoints](/zh/docs/manual/middle/elements/nodes/defaultNode/#节点的通用属性) 配合使用。二者区别请看 [linkPoints](#linkpoints) | | icon | 五角星上icon配置 | Object | 默认不显示 icon | ### 样式属性 style -Object 类型。通过 `style` 配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 `style`，使之达到如下图效果。
+Object 类型。支持 [节点通用样式](/zh/docs/manual/middle/elements/nodes/defaultNode#样式属性-style)。通过 `style` 配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 `style`，使之达到如下图效果。
```javascript const data = { nodes: [{ @@ -90,7 +90,7 @@ graph.render(); ### 标签文本配置 labelCfg -Object 类型。通过 `labelCfg` 配置标签文本。基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultNode` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
+Object 类型。通过 `labelCfg` 配置标签文本。支持 [节点通用标签配置](/zh/docs/manual/middle/elements/nodes/defaultNode/#标签文本-label-及其配置-labelcfg)。基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultNode` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
```javascript const data = { // ... data 内容 @@ -111,20 +111,24 @@ const graph = new G6.Graph({ ``` -### 边的连入点 linkPoints -Object 类型。通过配置 `linkPoints` ，可以指定圆周围「上、左下、➡右下、左、右」五个方向上边的连入点。 +### linkPoints +Object 类型。通过配置 `linkPoints` ，可以指定圆周围「上、左下、➡右下、左、右」五个小圆点。 + +⚠️注意:区分于 `anchorPoints`： +`anchorPoints` 是真正用于指定该节点相关边的连入位置的「**数组**」，见 [anchorPoints](/zh/docs/manual/middle/keyconcept/anchorpoint)； +而 `linkPoints` 仅是指定是否「**绘制**」出四个圆点，不起实际的连接相关边的作用。二者常常配合使用。 | 名称 | 含义 | 类型 | 备注 | | --- | --- | --- | --- | -| top | 是否显示上部的连接点 | Boolean | 默认为 `false` | -| **leftBottom** | **是否显示左底部的连接点** | **Boolean** | **默认为 `false`，star 特有** | -| **rightBottom** | **是否显示右底部的连接点** | **Boolean** | **默认为 `false`，star 特有** | -| left | 是否显示左侧的连接点 | Boolean | 默认为 `false` | -| right | 是否显示右侧的连接点 | Boolean | 默认为 `false` | -| size | 连接点的大小 | Number | 默认为 3 | -| fill | 连接点的填充色 | String | 默认为 `'#72CC4A'` | -| stroke | 连接点的边框颜色 | String | 默认为 `'#72CC4A'` | -| lineWidth | 连接点边框的宽度 | Number | 默认为 `1` | +| top | 是否显示上部的圆点 | Boolean | 默认为 `false` | +| **leftBottom** | **是否显示左底部的圆点** | **Boolean** | **默认为 `false`，star 特有** | +| **rightBottom** | **是否显示右底部的圆点** | **Boolean** | **默认为 `false`，star 特有** | +| left | 是否显示左侧的圆点 | Boolean | 默认为 `false` | +| right | 是否显示右侧的圆点 | Boolean | 默认为 `false` | +| size | 圆点的大小 | Number | 默认为 3 | +| fill | 圆点的填充色 | String | 默认为 `'#72CC4A'` | +| stroke | 圆点的边框颜色 | String | 默认为 `'#72CC4A'` | +| lineWidth | 圆点边框的宽度 | Number | 默认为 `1` | 基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultNode` 中增加了 `linkPoints` 配置项进行连入点的配置，使之达到如下图效果。
diff --git a/docs/manual/middle/elements/nodes/triangle.en.md b/docs/manual/middle/elements/nodes/triangle.en.md index 3a1317de02..4bd1f437f9 100644 --- a/docs/manual/middle/elements/nodes/triangle.en.md +++ b/docs/manual/middle/elements/nodes/triangle.en.md @@ -8,7 +8,7 @@ A built-in node Triangle has the default style as below, the label is drawed on ## Usage -As stated in [Built-in Nodes](../defaultNode) , there are two ways to configure the node: Configure it when instantiating a Graph globally; Configure it in the data. +As stated in [Built-in Nodes](/en/docs/manual/middle/elements/nodes/defaultNode) , there are two ways to configure the node: Configure it when instantiating a Graph globally; Configure it in the data. ### 1 Global Configure When Instantiating a Graph @@ -27,7 +27,7 @@ const graph = new G6.Graph({ ### 2 Configure in the Data -To configure different nodes with different attributes, you can write the attributes into the node data. +To configure different nodes with different properties, you can write the properties into the node data. ```javascript const data = { nodes: [{ @@ -44,8 +44,8 @@ const data = { ``` -## Attribute -Triangle node has the attributes shown below. The spetial attribute type will be described after the table: +## Property +The [Node Common Properties](/en/docs/manual/middle/elements/nodes/defaultNode/#common-property) are available for Triangle node, some special properties are shown below. The spetial property type will be described after the table: | Name | Description | Type | Remark | | --- | --- | --- | --- | @@ -55,7 +55,7 @@ Triangle node has the attributes shown below. The spetial attribute type will be | label | The text of the label | String | | | labelCfg | The configurations of the label | Object | | | stateStyles | The styles in different states | Object | Only takes effect on keyShape | -| linkPoints | The link points of the related edges | Object | They are invisible by default | +| linkPoints | The link points **in visual** | Object | They are invisible by default. It is usually used with the [anchorPoints](http://localhost:8000/en/docs/manual/middle/elements/nodes/defaultNode/#common-property). The differences are described in [linkPoints](#linkpoints) | | icon | The configurations of the icon on the triangle node | Object | It is invisible by default | @@ -82,7 +82,7 @@ const graph = new G6.Graph({ ### style -`style` is an object to configure the filling color, stroke, and other styles. The following code shows how to configure the `style` globally when instantiating a Graph.
+The [Node Common Styles](/en/docs/manual/middle/elements/nodes/defaultNode/#style) are available for Circle node.`style` is an object to configure the filling color, stroke, and other styles. The following code shows how to configure the `style` globally when instantiating a Graph.
```javascript const data = { nodes: [{ @@ -113,7 +113,7 @@ graph.render(); ### labelCfg -`labelCfg` is an object to configure the label of the node. Base on the code in [style](#style) section, we add `labelCfg` to `defaultNode`.
+`labelCfg` is an object to configure the label of the node. The [Node Common Label Configurations](/en/docs/manual/middle/elements/nodes/defaultNode/#label-and-labelcfg) are available. Base on the code in [style](#style) section, we add `labelCfg` to `defaultNode`.
```javascript const data = { // ... data @@ -121,7 +121,7 @@ const data = { const graph = new G6.Graph({ // ... Other configurations for graph defaultNode: { - // ... Other attributes for node + // ... Other properties for node labelCfg: { position: 'center', style: { @@ -136,18 +136,21 @@ const graph = new G6.Graph({ ### linkPoints -`linkPoints` is an object to configure the link points on the 「top, bottom, left, and right」. +`linkPoints` is an object to configure the small circles on the 「top, left, and right」. + +⚠️Attention: It is different from `anchorPoints`: +`anchorPoints` is an 「**array**」 that indicates the actual relative positions used to specify the join position of the relevant edge of the node (refer to [anchorPoints](/en/docs/manual/middle/keyconcept/anchorpoint)); +`linkPoints` is an object that indicates whether 「**render**」the four small circles, which do not connect the relevant edges. These two properties are often used together. | Name | Description | Type | Remark | | --- | --- | --- | --- | -| top | Whether show the top link point | Boolean | `false` by default | -| bottom | Whether show the bototm link point | Boolean | `false` by default | -| left | Whether show the left link point | Boolean | `false` by default | -| right | Whether show the right link point | Boolean | `false` by default | -| size | The size of the link points | Number | `3` by default | -| fill | The filling color of the link points | String | `'#72CC4A'` by default | -| stroke | The stroke color of the link points | String | `'#72CC4A'` by default | -| lineWidth | The line width of the link points | Number | `1` by default | +| top | Whether to show the top small circle | Boolean | `false` by default | +| left | Whether to show the left small circle | Boolean | `false` by default | +| right | Whether to show the right small circle | Boolean | `false` by default | +| size | The size of the small circles | Number | `3` by default | +| fill | The filling color of the small circles | String | `'#72CC4A'` by default | +| stroke | The stroke color of the small circles | String | `'#72CC4A'` by default | +| lineWidth | The line width of the small circles | Number | `1` by default | Base on the code in [style](#style) section, we add `linkPoints` to `defaultNode`.
@@ -179,11 +182,11 @@ const graph = new G6.Graph({ | Name | Description | Type | Remark | | --- | --- | --- | --- | -| show | Whether show the icon | Boolean | `false` by default | +| show | Whether to show the icon | Boolean | `false` by default | | width | The width of the icon | Number | `16` by default | | height | The height of the icon | Number | `16` by default | | img | The image url of the icon | String | | -| **offset** | **The offset of the icon** | **Number** | **`0` by default. It is a special attribute for triangle node** | +| **offset** | **The offset of the icon** | **Number** | **`0` by default. It is a special property for triangle node** | Base on the code in [style](#style) section, we add `icon` to `defaultNode`.
diff --git a/docs/manual/middle/elements/nodes/triangle.zh.md b/docs/manual/middle/elements/nodes/triangle.zh.md index 31138c4dfb..4cd32518de 100644 --- a/docs/manual/middle/elements/nodes/triangle.zh.md +++ b/docs/manual/middle/elements/nodes/triangle.zh.md @@ -8,7 +8,7 @@ G6 内置了三角形 Triangle 节点，其默认样式如下。标签文本位 ## 使用方法 -如 [内置节点](../defaultNode) 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。 +如 [内置节点](/zh/docs/manual/middle/elements/nodes/defaultNode) 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。 ### 1 实例化图时全局配置 @@ -45,7 +45,7 @@ const data = { ## 配置项说明 -triangle 节点支持以下的配置项： +triangle 节点支持 [节点通用配置](/zh/docs/manual/middle/elements/nodes/defaultNode#节点的通用属性)，下表对部分属性进行解释： | 名称 | 含义 | 类型 | 备注 | | --- | --- | --- | --- | @@ -55,7 +55,7 @@ triangle 节点支持以下的配置项： | label | 标签文本内容 | String | | | labelCfg | 标签文本配置项 | Object | | | stateStyles | 各状态下的样式 | Object | 只对 keyShape 起作用 | -| linkPoints | 三角形上的链接点 | Object | 默认不显示 | +| linkPoints | **视觉上的**三个锚点 | Object | 默认不显示，应与 [anchorPoints](/zh/docs/manual/middle/elements/nodes/defaultNode/#节点的通用属性) 配合使用。二者区别请看 [linkPoints](#linkpoints) | | icon | 三角形上 icon 配置 | Object | 默认不显示 icon | @@ -83,7 +83,7 @@ const graph = new G6.Graph({ ### 样式属性 style -Object 类型。通过 `style` 配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 `style`，使之达到如下图效果。
+Object 类型。支持 [节点通用样式](/zh/docs/manual/middle/elements/nodes/defaultNode#样式属性-style)。通过 `style` 配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 `style`，使之达到如下图效果。
```javascript const data = { nodes: [{ @@ -114,7 +114,7 @@ graph.render(); ### 标签文本配置 labelCfg -Object 类型。通过 `labelCfg` 配置标签文本。基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultNode` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
+Object 类型。通过 `labelCfg` 配置标签文本。支持 [节点通用标签配置](/zh/docs/manual/middle/elements/nodes/defaultNode/#标签文本-label-及其配置-labelcfg)。基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultNode` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。
```javascript const data = { // ... data 内容 @@ -136,19 +136,22 @@ const graph = new G6.Graph({ ``` -### 边的连入点 linkPoints -Object 类型。通过配置 `linkPoints` ，可以指定节点上「上、下、左、右」四个方向上边的连入点。 +### linkPoints +Object 类型。通过配置 `linkPoints` ，可以指定节点上「上、左、右」三个小圆点。 + +⚠️注意:区分于 `anchorPoints`： +`anchorPoints` 是真正用于指定该节点相关边的连入位置的「**数组**」，见 [anchorPoints](/zh/docs/manual/middle/keyconcept/anchorpoint)； +而 `linkPoints` 仅是指定是否「**绘制**」出四个圆点，不起实际的连接相关边的作用。二者常常配合使用。 | 名称 | 含义 | 类型 | 备注 | | --- | --- | --- | --- | -| top | 是否显示上部的连接点 | Boolean | 默认为 `false` | -| bottom | 是否显示底部的连接点 | Boolean | 默认为 `false` | -| left | 是否显示左侧的连接点 | Boolean | 默认为 `false` | -| right | 是否显示右侧的连接点 | Boolean | 默认为 `false` | -| size | 连接点的大小 | Number | 默认为 `3` | -| fill | 连接点的填充色 | String | 默认为 `'#72CC4A'` | -| stroke | 连接点的边框颜色 | String | 默认为 `'#72CC4A'` | -| lineWidth | 连接点边框的宽度 | Number | 默认为 `1` | +| top | 是否显示上部的圆点 | Boolean | 默认为 `false` | +| left | 是否显示左侧的圆点 | Boolean | 默认为 `false` | +| right | 是否显示右侧的圆点 | Boolean | 默认为 `false` | +| size | 圆点的大小 | Number | 默认为 `3` | +| fill | 圆点的填充色 | String | 默认为 `'#72CC4A'` | +| stroke | 圆点的边框颜色 | String | 默认为 `'#72CC4A'` | +| lineWidth | 圆点边框的宽度 | Number | 默认为 `1` | 基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultNode` 中增加了 `linkPoints` 配置项进行连入点的配置，使之达到如下图效果。
diff --git a/docs/manual/middle/g6InReact.en.md b/docs/manual/middle/g6InReact.en.md index b0811ec5f8..670231bacb 100644 --- a/docs/manual/middle/g6InReact.en.md +++ b/docs/manual/middle/g6InReact.en.md @@ -3,26 +3,26 @@ title: G6 in React order: 9 --- -### 概述 -G6是一个纯JS库，不与任何框架耦合，也就是可以在任何前端框架中使用，如 React、Vue、Angular 等。由于我们内部绝大多数都是基于 React 技术栈的，所以我们也仅提供一个 G6 在 React 中使用的 Demo。 +### Introduction +G6 is a JavaScript library without any coupling to other framewroks. That means, G6 can be combined to any front-end framework, such as React, Vue, and Angular. In this document, we provide a demo about using G6 in React. -在 React 中使用 G6，和在 HTML 中使用基本相同，唯一比较关键的区分就是在实例化 Graph 时，要**保证 DOM 容器渲染完成，并能获取到 DOM 元素**。 +The main difference between using G6 in React and HTML is that you need to guarantee the DOM container of graph has been rendered and it is available before instantiating a Graph. -在 Demo 中，我们以一个简单的流程图为例，实现如下的效果。 +In this demo, we will implement a simple flow diagram as the figure below: -### 功能及实现 -Demo 包括以下功能点： +### Implementation +The demo includes these functions: -- 自定义节点； -- 自定义边； -- 节点的 tooltip； -- 边的 tooltip； -- 节点上面弹出右键菜单； -- tooltip 及 ContextMenu 如何渲染自定义的 React 组件。 +- Register a custom node; +- Register a custom edge; +- Utilize node tooltip; +- Utilize edge tooltip; +- Utilize the context menu on node; +- Render the custom React components of tooltip and ContextMenu. -在 React 中，通过 `**ReactDOM.findDOMNode(ref.current)**`** **获取到真实的 DOM 元素。 +In React, you can fetch the DOM element by `ReactDOM.findDOMNode(ref.current)`. ```javascript import React, { useEffect, useState } from 'react'; @@ -76,16 +76,15 @@ export default function() { ``` -### G6中渲染React组件 -节点和边的 tooltip、节点上的右键菜单，G6 中内置的很难满足样式上的需求，这个时候我们就可以通过渲染自定义的 React 组件来实现。Tooltip 和 ContextMenu 都是普通的 React 组件，样式完全由用户控制。交互过程中，在G6 中需要做的事情就是确定何时渲染组件，以及渲染到何处。在 G6 中获取到是否渲染组件的标识值和渲染位置后，这些值就可以使用 React state 进行管理，后续的所有工作就全部由 React 负责了。 - +### Render the React Components +The styles of the built-in tooltips on nodes/edges and thecontext menu on nodes are too simple to satisfy the complex requirements. Now we show how to customize React components for these tools, then the styles of them can be controlled by users. During the interaction, G6 defines the render timing and position of these components. When the timing and the position are available, they can be managed by React state. ```javascript -// 边tooltip坐标 +// The coordinate of node tooltip const [showNodeTooltip, setShowNodeTooltip] = useState(false) const [nodeTooltipX, setNodeToolTipX] = useState(0) const [nodeTooltipY, setNodeToolTipY] = useState(0) -// 监听node上面mouse事件 +// Listen to the mouse event on node graph.on('node:mouseenter', evt => { const { item } = evt const model = item.getModel() @@ -97,7 +96,7 @@ graph.on('node:mouseenter', evt => { setShowNodeTooltip(true) }) -// 节点上面触发mouseleave事件后隐藏tooltip和ContextMenu +// Hide the tooltip and the contextMenu when the mouseleave event is activated on the node graph.on('node:mouseleave', () => { setShowNodeTooltip(false) }) @@ -109,6 +108,6 @@ return ( ); ``` -完整的 Demo 源码请👉戳[这里](https://github.com/baizn/g6-in-react)。 +The complete code of this demo 「HERE」. -关于 G6 如何在 Vue 及 Angular 中使用，还望社区中有相关实践的同学能提供一些，供其他同学学习和参考，非常感谢！ +You are welcome to provide the usages of G6 in Vue and Angular. Thank you! diff --git a/docs/manual/middle/g6InReact.zh.md b/docs/manual/middle/g6InReact.zh.md index 47d89e8d94..76255a8162 100644 --- a/docs/manual/middle/g6InReact.zh.md +++ b/docs/manual/middle/g6InReact.zh.md @@ -4,7 +4,7 @@ order: 9 --- ### 概述 -G6是一个纯JS库，不与任何框架耦合，也就是可以在任何前端框架中使用，如 React、Vue、Angular 等。由于我们内部绝大多数都是基于 React 技术栈的，所以我们也仅提供一个 G6 在 React 中使用的 Demo。 +G6 是一个纯 JS 库，不与任何框架耦合，也就是可以在任何前端框架中使用，如 React、Vue、Angular 等。由于我们内部绝大多数都是基于 React 技术栈的，所以我们也仅提供一个 G6 在 React 中使用的 Demo。 在 React 中使用 G6，和在 HTML 中使用基本相同，唯一比较关键的区分就是在实例化 Graph 时，要**保证 DOM 容器渲染完成，并能获取到 DOM 元素**。 @@ -22,7 +22,7 @@ Demo 包括以下功能点： - 节点上面弹出右键菜单； - tooltip 及 ContextMenu 如何渲染自定义的 React 组件。 -在 React 中，通过 `**ReactDOM.findDOMNode(ref.current)**`** **获取到真实的 DOM 元素。 +在 React 中，通过 `ReactDOM.findDOMNode(ref.current)`获取到真实的 DOM 元素。 ```javascript import React, { useEffect, useState } from 'react'; @@ -76,16 +76,16 @@ export default function() { ``` -### G6中渲染React组件 -节点和边的 tooltip、节点上的右键菜单，G6 中内置的很难满足样式上的需求，这个时候我们就可以通过渲染自定义的 React 组件来实现。Tooltip 和 ContextMenu 都是普通的 React 组件，样式完全由用户控制。交互过程中，在G6 中需要做的事情就是确定何时渲染组件，以及渲染到何处。在 G6 中获取到是否渲染组件的标识值和渲染位置后，这些值就可以使用 React state 进行管理，后续的所有工作就全部由 React 负责了。 +### G6 中渲染 React 组件 +节点和边的 tooltip、节点上的右键菜单，G6 中内置的很难满足样式上的需求，这个时候我们就可以通过渲染自定义的 React 组件来实现。Tooltip 和 ContextMenu 都是普通的 React 组件，样式完全由用户控制。交互过程中，在 G6 中需要做的事情就是确定何时渲染组件，以及渲染到何处。在 G6 中获取到是否渲染组件的标识值和渲染位置后，这些值就可以使用 React state 进行管理，后续的所有工作就全部由 React 负责了。 ```javascript -// 边tooltip坐标 +// 边 tooltip 坐标 const [showNodeTooltip, setShowNodeTooltip] = useState(false) const [nodeTooltipX, setNodeToolTipX] = useState(0) const [nodeTooltipY, setNodeToolTipY] = useState(0) -// 监听node上面mouse事件 +// 监听 node 上面 mouse 事件 graph.on('node:mouseenter', evt => { const { item } = evt const model = item.getModel() @@ -97,7 +97,7 @@ graph.on('node:mouseenter', evt => { setShowNodeTooltip(true) }) -// 节点上面触发mouseleave事件后隐藏tooltip和ContextMenu +// 节点上面触发 mouseleave 事件后隐藏 tooltip 和 ContextMenu graph.on('node:mouseleave', () => { setShowNodeTooltip(false) }) @@ -109,6 +109,6 @@ return ( ); ``` -完整的 Demo 源码请👉戳[这里](https://github.com/baizn/g6-in-react)。 +完整的 Demo 源码请戳 「这里」。 关于 G6 如何在 Vue 及 Angular 中使用，还望社区中有相关实践的同学能提供一些，供其他同学学习和参考，非常感谢！ diff --git a/docs/manual/middle/graph.en.md b/docs/manual/middle/graph.en.md index 81eef0ff3c..ba9a05fa81 100644 --- a/docs/manual/middle/graph.en.md +++ b/docs/manual/middle/graph.en.md @@ -3,16 +3,19 @@ title: Graph order: 1 --- -## 什么是 Graph -中文字“图”在大家的传统认知里指的是图画、图像，而图论与可视化中的“图”—— Graph 则有着更精确的定位：主体（objects）与关系（relationships）的组成。它甚至不局限于视觉，主体与关系的数据也可以称为图。
-—— 摘自 [AntV 专栏](https://zhuanlan.zhihu.com/aiux-antv)文章：Graph Visualization ·[ ](https://zhuanlan.zhihu.com/p/83685690)知多少 之 《[HelloWorld](https://zhuanlan.zhihu.com/p/83685690) [图可视化](https://zhuanlan.zhihu.com/p/83685690)》 +## What is Graph +"Graph" means graphics, images, figures in the traditional cognitive. The "Graph" in graph theory and visuzliation has specific definition: it is make up of objects and their relationships. It might not a visual graph, but a relational data.
-在 G6 中，Graph 对象是图的载体，它包含了图上的所有元素（节点、边等），同时挂载了图的相关操作（如交互监听、元素操作、渲染等）。
Graph 对象的生命周期为：初始化 —> 加载数据 —> 渲染 —> 更新 —> 销毁。 +Graph is the carrier of G6. All the operations about events, behaviors, items are mounted on the instance of Graph. -在 [快速上手](/zh/docs/manual/getting-started) 中，我们简单介绍了 初始化、加载数据、渲染图 的使用方法。本文将主要介绍初始化/实例化图。 +The life cycle of an instance of Graph is: -## 前提代码 -本文的讲解将会基于下面这份内嵌 JavaScript 的 HTML 代码。该代码通过定义数据、实例化图、读取数据、渲染图等操作中完成了下图中简单的图：
+Initialize -> Load data -> Render -> Update -> Destroy. + +In [Getting Started](/en/docs/manual/getting-started), we introduce the process of initialization, data loading, graph rendering. In this document, we will introduce the initialization/instantiating process in detail. + +## Prerequisite Code +The code for interpretation of this chapter will base on the following JavaScript code embedded in HTML. By defining the data, instantiating the graph, loading the data, and rendering the graph, the code below results in the graph in the figure:
```html @@ -23,14 +26,14 @@ order: 1 Tutorial Demo - /* 图的画布容器 */ + /* The container of the graph */
- /* 引入 G6 */ + /* Import G6 */ ``` -## 初始化/实例化图 -通过 `new G6.Graph(config)` 进行图的实例化。其中参数 `config` 是 Object 类型的图的配置项，图的大部分功能可以通过该配置项进行全局配置。如 [前提代码](#cRVfC) 这样实例化图： +## Initialize/Instantiate a Graph +Instantiate a Graph by `new G6.Graph(config)`, where the parameter `config` is an object of graph configurations. Most global configurations are assigned here. As shown in [Prerequisite Code](#Prerequisite Code), we instantiate a Graph: ```javascript const graph = new G6.Graph({ - container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应 - // 画布宽高 + container: 'mountNode', // Assign the id of the graph container + // The width and the height of the graph width: 800, height: 500 }); ``` -### 必要配置项 -上面代码中实例化 Graph 的部分使用了三个必要的配置项： +### Required Configuration +There are three required configurations when instantiating a Graph: - `container` -     类型：String | Object。图的 DOM 容器。可以是 String，为 DOM 容器的 `id`。也可以是 Object ，为 DOM 对象。 +     Type: String | Object. The DOM container of the graph. It can be a string for the `id` of the DOM container, or an object for the DOM object. -- `width`、`height` +- `width` and `height` -     类型：Number。图的画布的宽度和高度。 +     Type: Number. THe width and the height of the graph. -### 常用配置项 -下面列举实例化图时常见的配置项，完整的配置项参见 [Graph API](/zh/docs/api/Graph)。 +### Commonly used Configuration +There are some commonly used configurations. For complete configurations, please refer to [Graph API](/zh/docs/api/Graph). -#### 整体渲染相关 +#### Rendering - `renderer` -      类型：String；选项：`'svg'` | `'canvas' `；默认：`'canvas'`。选择 SVG 或 Canvas 方式渲染。 +      Type: String; Options: `'svg'` | `'canvas' `; Default: `'canvas'`. Render by SVG or Canvas. - `fitView` -      类型：Boolean；默认：'false'。图是否自适应画布。 +      Type: Boolean; Default: 'false'. Whether to fit the canvas to the view port automatically. - `fitViewPadding` -      类型：Number | Array；默认：0。图自适应画布时的四周留白像素值。fitView 为 true 时生效。 +      Type: Number | Array; Default: 0. It is the padding between canvas and the border of view port. Takes effect only when `fitView: true`. -#### 全局元素配置 +#### Global Item Configuration - `defaultNode` -      类型：Object。默认情况下全局节点的配置项，包括样式属性和其他属性。详见 [内置节点](/zh/docs/manual/middle/elements/nodes/defaultNode)。 +      Type: Object. The global configuration for all the nodes in the graph in default state. It includes the style properties and other properties of nodes. Refer to [Built-in Nodes](/en/docs/manual/middle/elements/nodes/defaultNode). - `defaultEdge` -      类型：Object。默认情况下全局边的配置项，包括样式属性和其他属性。详见 [内置边](/zh/docs/manual/middle/elements/nodes/defaultEdge)。 +      Type: Object. The global configuration for all the edges in the graph in default state. It includes the style properties and other properties of edges. Refer to [Built-in Edges](/en/docs/manual/middle/elements/nodes/defaultEdge). - `nodeStateStyles` -      类型：Object。除默认状态外的其他状态下节点的样式配置。详见 [状态 State](/zh/docs/manual/middle/states/state)。 +      Type: Object. The style properties of nodes in different states expect for default state. Refer to [State](/en/docs/manual/middle/states/state). - `edgeStateStyles` -      类型：Object。除默认状态外的其他状态下边的样式配置。详见 [状态 State](/zh/docs/manual/middle/states/state)。 +      Type: Object. The style properties of edges in different states expect for default state. Refer to [State](/en/docs/manual/middle/states/state). -#### 布局相关 +#### Layout - `layout` -      类型：Object。若数据中不存在节点位置，则默认为随机布局。配置布局类型及其参数。详见 [使用布局 Layout](/zh/docs/manual/middle/layout)，[Layout API](/zh/docs/api/layout/Layout)。 +      Type: Object. If there is no position information in data, Random Layout will take effect by default. The layout options and their configurations can be found in [Layout](/en/docs/manual/middle/layout)，[Layout API](/en/docs/api/layout/Layout). -#### 交互行为相关 +#### Interaction - `modes` -      类型：Array。配置多种交互模式及其包含的交互事件的。详见 [交互模式 Mode](/zh/docs/manual/middle/states/mode)。 +      Type: Array. It is the set of interactions modes. One mode is made up of one or more interaction events. Refer to [Mode](/en/docs/manual/middle/states/mode). -#### 动画相关 +#### Animation - `animate` -      类型：Boolean；默认：'false'。是否启用全局动画。启用后，布局变化时将会以动画形式变换节点位置。 +      Type: Boolean; Default: 'false'. Whether to activate the global animation. If it is `true`, the positions of nodes will be changed animatively when the layout is changed. - `animateCfg` -      类型：Object。全局动画的配置项，包括动画效果、动画时长等。详见 【TODO】。 +      Type: Object. The configurations for global animation, includes easing functions, duration, and so on. Refer to [Animation](/en/docs/manual/advanced/animation). -#### 插件 +#### Plugin - `plugins` -      类型：Array。配置辅助插件。详见 [插件与工具](/zh/docs/manual/tutorial/plugins)。 +      Type: Array. The plugins to assist the anaysis. Refer to [Plugins and Tools](/en/docs/manual/tutorial/plugins). -## 常用函数 -在前面的代码中使用了两个必要的函数： +## Commonly Used Functions +There are two required functions in the code of [Prerequisite Code](#Prerequisite Code): ```javascript -// 读取数据 +// Load the data graph.data(data); -// 渲染图 +// Render the graph graph.render(); ``` -- `data(data)`：读取数据源 `data` 到图实例 `graph` 中。 -- render()：渲染图。 +- `data(data)`: Load the source `data` to the instance `graph`. +- render(): render the graph. -Graph 的完整函数参见 [Graph API](/zh/docs/api/Graph)。 +For complete functions for Graph, refer to [Graph API](/en/docs/api/Graph). diff --git a/docs/manual/middle/graph.zh.md b/docs/manual/middle/graph.zh.md index f8296f68cd..f803b1b828 100644 --- a/docs/manual/middle/graph.zh.md +++ b/docs/manual/middle/graph.zh.md @@ -5,7 +5,7 @@ order: 1 ## 什么是 Graph 中文字“图”在大家的传统认知里指的是图画、图像，而图论与可视化中的“图”—— Graph 则有着更精确的定位：主体（objects）与关系（relationships）的组成。它甚至不局限于视觉，主体与关系的数据也可以称为图。
-—— 摘自 [AntV 专栏](https://zhuanlan.zhihu.com/aiux-antv)文章：Graph Visualization ·[ ](https://zhuanlan.zhihu.com/p/83685690)知多少 之 《[HelloWorld](https://zhuanlan.zhihu.com/p/83685690) [图可视化](https://zhuanlan.zhihu.com/p/83685690)》 +> —— 摘自 AntV 专栏文章：Graph Visualization · 知多少 之 《HelloWorld 图可视化》。 在 G6 中，Graph 对象是图的载体，它包含了图上的所有元素（节点、边等），同时挂载了图的相关操作（如交互监听、元素操作、渲染等）。
Graph 对象的生命周期为：初始化 —> 加载数据 —> 渲染 —> 更新 —> 销毁。 @@ -67,7 +67,7 @@ order: 1 ``` ## 初始化/实例化图 -通过 `new G6.Graph(config)` 进行图的实例化。其中参数 `config` 是 Object 类型的图的配置项，图的大部分功能可以通过该配置项进行全局配置。如 [前提代码](#cRVfC) 这样实例化图： +通过 `new G6.Graph(config)` 进行图的实例化。其中参数 `config` 是 Object 类型的图的配置项，图的大部分功能可以通过该配置项进行全局配置。如 [前提代码](#前提代码) 这样实例化图： ```javascript const graph = new G6.Graph({ container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应 @@ -103,31 +103,31 @@ order: 1 - `fitViewPadding` -      类型：Number | Array；默认：0。图自适应画布时的四周留白像素值。fitView 为 true 时生效。 +      类型：Number | Array；默认：0。图自适应画布时的四周留白像素值。`fitView` 为 `true` 时生效。 #### 全局元素配置 - `defaultNode` -      类型：Object。默认情况下全局节点的配置项，包括样式属性和其他属性。详见 [内置节点](/zh/docs/manual/middle/elements/nodes/defaultNode)。 +      类型：Object。默认情况下全局节点的配置项，包括样式属性和其他属性。详见 [内置节点](/zh/docs/manual/middle/elements/nodes/defaultNode) 教程。 - `defaultEdge` -      类型：Object。默认情况下全局边的配置项，包括样式属性和其他属性。详见 [内置边](/zh/docs/manual/middle/elements/nodes/defaultEdge)。 +      类型：Object。默认情况下全局边的配置项，包括样式属性和其他属性。详见 [内置边](/zh/docs/manual/middle/elements/edges/defaultEdge) 教程。 - `nodeStateStyles` -      类型：Object。除默认状态外的其他状态下节点的样式配置。详见 [状态 State](/zh/docs/manual/middle/states/state)。 +      类型：Object。除默认状态外的其他状态下节点的样式配置。详见 [状态 State](/zh/docs/manual/middle/states/state) 教程。 - `edgeStateStyles` -      类型：Object。除默认状态外的其他状态下边的样式配置。详见 [状态 State](/zh/docs/manual/middle/states/state)。 +      类型：Object。除默认状态外的其他状态下边的样式配置。详见 [状态 State](/zh/docs/manual/middle/states/state) 教程。 #### 布局相关 - `layout` -      类型：Object。若数据中不存在节点位置，则默认为随机布局。配置布局类型及其参数。详见 [使用布局 Layout](/zh/docs/manual/middle/layout)，[Layout API](/zh/docs/api/layout/Layout)。 +      类型：Object。若数据中不存在节点位置，则默认为随机布局。配置布局类型及其参数。详见 [使用布局 Layout](/zh/docs/manual/middle/layout) 教程，[Layout API](/zh/docs/api/layout/Layout)。 #### 交互行为相关 @@ -143,7 +143,7 @@ order: 1 - `animateCfg` -      类型：Object。全局动画的配置项，包括动画效果、动画时长等。详见 【TODO】。 +      类型：Object。全局动画的配置项，包括动画效果、动画时长等。详见 [动画 Animation](/zh/docs/manual/advanced/animation)。 #### 插件 diff --git a/docs/manual/middle/keyConcept.zh.md b/docs/manual/middle/keyConcept.zh.md deleted file mode 100644 index 134922b7ab..0000000000 --- a/docs/manual/middle/keyConcept.zh.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: G6 中的关键概念 -order: 0 ---- - -## 图形 Shape -Shape 指 G6 中的图形、形状，它可以是圆形、矩形、路径等。它一般与 G6 中的节点、边相关。G6 中的每一种节点或边由一个或多个 Shape 组成。 - -例如下图（左）的节点包含了一个圆形图形；下图（中）的节点含有有一个圆形和一个文本图形；下图（右）的节点中含有 5 个圆形（蓝绿色的圆和上下左右四个锚点）、一个文本图形。但每种节点和边都会有自己的唯一关键图形 keyShape，下图中三个节点的 keyShape 都是蓝绿色的圆，keyShape 主要用于交互检测、样式随[状态](/zh/docs/manual/middle/states/state)自动更新等，见 [keyShape](#UNCAz)。
           -> （左）只含有一个圆形图形的节点，keyShape 是该圆形。（中）含有圆形和文本图形的节点，keyShape 是圆形。（右）含有主要圆形、文本、上下左右四个小圆形的节点，keyShape 是圆形。 - - -G6 使用不同的 shape 及组合，设计了多种内置的节点和边。G6 内置节点的有 'circle'， 'rect'，'ellipse'，...（详见 [内置节点](/zh/docs/manual/middle/elements/nodes/defaultNode)）；内置边的有 'line'，'polyline'，'cubic'，...（详见 [内置边](/zh/docs/manual/middle/elements/nodes/defaultEdge)）。 - -除了使用内置的节点和边外，G6 还允许用户通过自己搭配和组合 Shape 进行节点和边的自定义，详见 [自定义节点](/zh/docs/manual/advanced/custom-node) 和 [自定义边](/zh/docs/manual/advanced/custom-edge)。 - -## KeyShape -如上所述，每一种节点和边都有一个唯一的关键图形 keyShape。keyShape 是在节点的 draw 方法中返回的图形对象，用于**确定节点的包围盒（Bounding Box） —— bbox（x, y, width, height)** ，从而计算相关边的连入点（与相关边的交点）。若 keyShape 不同，节点与边的交点计算结果不同。  - -### 示例  -本例中的一个节点由一个 rect 图形和一个带灰色描边、填充透明的 circle 图形构成。 - -- 当节点的 keyShape 为 circle 时： - - - -- 当节点的 keyShape 为 rect 时： - - - - -## Shape 的生命周期 -> 当用户需要[自定义节点](/zh/docs/manual/advanced/custom-node)和[自定义边](/zh/docs/manual/advanced/custom-edge)时，需要了解 Shape 的生命周期。使用内置节点和边则可以跳过这一部分内容。 - -从整体来看，Shape 的生命周期分为： - -- 初始化渲染； -- 更新； -- 操作； -- 销毁。 - -Shape 作为 Graph 上的核心元素，这几个阶段都需要考虑，但是销毁可以交给 Graph 来处理，所以在定义 Shape 时不需要考虑，仅需要考虑三个阶段即可： - -- 绘制：从无到有的绘制 Shape 及文本； -- 更新：数据发生改变导致 Shape 及文本发生变化； -- 操作：给 Shape 添加状态，如：selected，active 等。 - -所以我们在设计自定义节点和边时，定义了三个方法，若需要自定义节点和边，需要有选择性地复写它们： - -- `draw(cfg, group)`: 绘制，提供了绘制的配置项（数据定义时透传过来）和图形容器； -- `update(cfg, n)`: 更新，更新时的配置项（更新的字段和原始字段的合并）和元素对象； -- `setState(name, value, item)`: 响应节点状态的变化。 - -关于自定义 Shape 更多的方法请[参考 Shape API 文档](/zh/docs/api/Shape)。 - -## anchorPoint - -节点的连接点 anchorPoint 指的是边连入节点的相对位置，即节点与其相关边的交点位置。anchorPoints 是一个二维数组，每一项表示一个连接点的位置，在一个[图形 shape](/zh/docs/manual/middle/keyConcept) 中，连接点的位置如下图所示，x 和 y 方向上范围都是 [0, 1]：
- - -节点中有了 anchorPoints 之后，相关边可以分别选择连入起始点、结束点的哪一个 anchorPoint。当需要在节点之间连多条线时，这种机制能够使边的连入更美观。 - -边可以通过指定 `sourceAnchor` 和 `targetAnchor` 分别选择起始点、结束点的 anchorPoint。`sourceAnchor` 和 `targetAnchor` 取的值是相对应节点上 anchorPoints 数组的索引值。 - -下面数据演示了如何在节点上配置连接点、在边上指定连接点： -```javascript -const data = { - nodes: [ - { - id: 'node1', - label: 'node1', - x: 100, - y: 200, - // 该节点可选的连接点集合，该点有两个可选的连接点 - anchorPoints: [[0, 1], [0.5, 1]], - shape: 'rect' - }, - { - id: 'node2', - label: 'node2', - x: 300, - y: 400, - // 该节点可选的连接点集合，该点有两个可选的连接点 - anchorPoints: [[0.5, 0], [1, 0.5]], - shape: 'rect' - } - ], - edges: [ - { - source: 'node1', - target: 'node2', - // 该边连入 source 点的第 0 个 anchorPoint， - sourceAnchor: 0, - // 该边连入 target 点的第 0 个 anchorPoint， - targetAnchor: 0, - style: { - endArrow: true - } - }, - { - source: 'node2', - target: 'node1', - // 该边连入 source 点的第 1 个 anchorPoint， - sourceAnchor: 1, - // 该边连入 source 点的第 1 个 anchorPoint， - targetAnchor: 1, - style: { - endArrow: true - } - } - ] - } -``` diff --git a/docs/manual/middle/keyconcept/anchorpoint.en.md b/docs/manual/middle/keyconcept/anchorpoint.en.md new file mode 100644 index 0000000000..020e3ef07e --- /dev/null +++ b/docs/manual/middle/keyconcept/anchorpoint.en.md @@ -0,0 +1,59 @@ +--- +title: AnchorPoint +order: 1 +--- + +The anchorPoint of a node is the link point where the related edges link to. In other words, it is the intersection of a node and its related edges. anchorPoints is a 2d array, each element represents the position of one anchor point. The positions of the anchor points in a [Shape](/en/docs/manual/middle/keyconcept/shape-keyshape) are shown below, the range of each x and y is [0, 1]:
+ + +You can select the link points for an edge by `sourceAnchor` and `targetAnchor` if there are anchorPoints in the source and target node. Where This `sourceAnchor` and `targetAnchor` indicate the index of the array of anchorPoints. mechanism beautifies the graphs when there are multiple edges between two nodes. + +The data below shows how to configure the anchorPoints on a node and link points for an edge: +```javascript +const data = { + nodes: [ + { + id: 'node1', + label: 'node1', + x: 100, + y: 200, + // There are two anchorPoints for this node + anchorPoints: [[0, 1], [0.5, 1]], + shape: 'rect' + }, + { + id: 'node2', + label: 'node2', + x: 300, + y: 400, + // There are two anchorPoints for this node + anchorPoints: [[0.5, 0], [1, 0.5]], + shape: 'rect' + } + ], + edges: [ + { + source: 'node1', + target: 'node2', + // The source link point of the edge is the 0-th anchorPoint of the source node + sourceAnchor: 0, + // The target link point of the edge is the 0-th anchorPoint of the target node + targetAnchor: 0, + style: { + endArrow: true + } + }, + { + source: 'node2', + target: 'node1', + // The source link point of the edge is the 1-st anchorPoint of the source node + sourceAnchor: 1, + // The target link point of the edge is the 1-st anchorPoint of the target node + targetAnchor: 1, + style: { + endArrow: true + } + } + ] + } +``` diff --git a/docs/manual/middle/keyconcept/anchorpoint.zh.md b/docs/manual/middle/keyconcept/anchorpoint.zh.md new file mode 100644 index 0000000000..164fbb6b0a --- /dev/null +++ b/docs/manual/middle/keyconcept/anchorpoint.zh.md @@ -0,0 +1,61 @@ +--- +title: 节点的连接点 anchorPoint +order: 1 +--- + +节点的连接点 anchorPoint 指的是边连入节点的相对位置，即节点与其相关边的交点位置。anchorPoints 是一个二维数组，每一项表示一个连接点的位置，在一个[图形 Shape](/zh/docs/manual/middle/keyconcept/shape-keyshape) 中，连接点的位置如下图所示，x 和 y 方向上范围都是 [0, 1]：
+ + +节点中有了 anchorPoints 之后，相关边可以分别选择连入起始点、结束点的哪一个 anchorPoint。当需要在节点之间连多条线时，这种机制能够使边的连入更美观。 + +边可以通过指定 `sourceAnchor` 和 `targetAnchor` 分别选择起始点、结束点的 anchorPoint。`sourceAnchor` 和 `targetAnchor` 取的值是相对应节点上 anchorPoints 数组的索引值。 + +下面数据演示了如何在节点上配置连接点、在边上指定连接点： +```javascript +const data = { + nodes: [ + { + id: 'node1', + label: 'node1', + x: 100, + y: 200, + // 该节点可选的连接点集合，该点有两个可选的连接点 + anchorPoints: [[0, 1], [0.5, 1]], + shape: 'rect' + }, + { + id: 'node2', + label: 'node2', + x: 300, + y: 400, + // 该节点可选的连接点集合，该点有两个可选的连接点 + anchorPoints: [[0.5, 0], [1, 0.5]], + shape: 'rect' + } + ], + edges: [ + { + source: 'node1', + target: 'node2', + // 该边连入 source 点的第 0 个 anchorPoint， + sourceAnchor: 0, + // 该边连入 target 点的第 0 个 anchorPoint， + targetAnchor: 0, + style: { + endArrow: true + } + }, + { + source: 'node2', + target: 'node1', + // 该边连入 source 点的第 1 个 anchorPoint， + sourceAnchor: 1, + // 该边连入 source 点的第 1 个 anchorPoint， + targetAnchor: 1, + style: { + endArrow: true + } + } + ] + } +``` diff --git a/docs/manual/middle/keyConcept.en.md b/docs/manual/middle/keyconcept/shape-keyshape.en.md similarity index 50% rename from docs/manual/middle/keyConcept.en.md rename to docs/manual/middle/keyconcept/shape-keyshape.en.md index 1837a0ab98..9ed5402249 100644 --- a/docs/manual/middle/keyConcept.en.md +++ b/docs/manual/middle/keyconcept/shape-keyshape.en.md @@ -1,22 +1,87 @@ --- -title: Key Concepts +title: Graphics Shape and KeyShape order: 0 --- ## Graphics Shape -Graphics Shape (hereinafter referred to as Shape) in G6 is the shape of items (nodes/edges), it can be a circle, a rect, path, and so on. A node or an edge is made up of one or several Shapes. +Graphics Shape (hereinafter referred to as Shape) in G6 is the shape of items (nodes/edges), it can be a circle, a rect, path, and so on. **A node or an edge is made up of one or several Shapes. The configurations on a node, an edge, or a label will be writed onto corresponding graphics Shape.** -In the figure(Left) below, there is a node with a circle Shape; (Center) a node with a circle Shape and a text Shape; (right) a node with a text Shape and 5 circle Shapes including the main circle and four anchor points. Each node or edge has only one keyShape. The keyShape of each nodes in the figure below is the green circle. [keyShape](#UNCAz) is the Shape that responses interactions and [State](/zh/docs/manual/middle/states/state) changing. +In the figure(Left) below, there is a node with a circle Shape; (Center) a node with a circle Shape and a text Shape; (right) a node with a text Shape and 5 circle Shapes including the main circle and four anchor points. Each node or edge has only one keyShape. The keyShape of each nodes in the figure below is the green circle. [keyShape](#keyshape) is the Shape that responses interactions and [State](/en/docs/manual/middle/states/state) changing.
           > (Left) A node with one circle Shape, the keyShape is the circle. (Center) A node with a text Shape and the circle Shape, the keyShape is the circle. (Right) A node with a text Shape and five circle Shapes including the main circle and four anchors, the keyShape is the green circle. -G6 designs abundant built-in nodes and edges by combing different Shapes. Built-in nodes includes 'circle', 'rect', 'ellipse', ...(Refer to [Built-in Nodes](/en/docs/manual/middle/elements/nodes/defaultNode)); Built-in edges includes 'line', 'polyline', 'cubic', ... (Refer to [Built-in Edges](/en/docs/manual/middle/elements/nodes/defaultEdge)). +G6 designs abundant built-in nodes and edges by combing different Shapes. Built-in nodes includes 'circle', 'rect', 'ellipse', ...(Refer to [Built-in Nodes](/en/docs/manual/middle/elements/nodes/defaultNode)); Built-in edges includes 'line', 'polyline', 'cubic', ... (Refer to [Built-in Edges](/en/docs/manual/middle/elements/edges/defaultEdge)). Besides, G6 allows users to define their own types of item by register a custom node or an custom edge. Refer to [Custom Node](/en/docs/manual/advanced/custom-node) and [Custom Edge](/en/docs/manual/advanced/custom-edge). ## KeyShape -As stated, there is only one keyShape for each type of item. keyShape is returned by `draw()` of each type of item. It is used for **defining the Bounding Box —— bbox（x, y, width, height)**  to do some transformations and calculate the link points. Different keyShape will lead to different result link points. +As stated above, there is only one keyShape for each type of item. keyShape is returned by `draw()` of each type of item. It has two main effcts: + +### Response the Style + +The property `style` in built-in nodes/edges of G6 is only reponsed by keyShape. And the styles of different states (`nodeStateStyles` / `edgeStateStyles` on graph or `stateStyles` of itself) are only reflected on keyShape as well. + +To break the rules above, you can register a type of [Custom Node](/en/docs/manual/advanced/custom-node) or [Custom Edge](/en/docs/manual/advanced/custom-edge). + +#### Example +We use the built-in rect node in this example. The keyShape of the node is the rect Shape. There are other shapes including four small circle Shapes around and a text Shape for the label. The code below assigns the `style` for the node. `style` only takes effect on the keyShape. The styles for other Shapes need to be configured by other properties such as `linkPoints` and `labelCfg`. We also listen to the mouse enter and mouse leave events to activate/inactivate the hover state, the responsing styles defined in `nodeStateStyles` only takes effect on keyShape as well. + +keyshape-demo + +```javascript +const data = { + nodes: [{ + x: 100, + y: 100, + label: 'rect', + shape: 'rect', + style: { // The style for the keyShape + fill: 'lightblue', + stroke: '#888', + lineWidth: 1, + radius: 7 + }, + linkPoints: { + top: true, + bottom: true, + left: true, + right: true, + // ... Styles for linkPoints can be assigned here + }, + // labelCfg: {...} // The style for the label con be assigned here + }] +}; +const graph = new G6.Graph({ + container: 'mountNode', + width: 500, + height: 300, + nodeStateStyles: { // The state styles taking effect on keyShape only + hover: { + fillOpacity: 0.1, + lineWidth: 10, + } + } +}); +graph.data(data); +graph.render(); +// Listen to the mouse enter event on node +graph.on('node:mouseenter', evt => { + const node = evt.item; + // activate the hover state of the node + graph.setItemState(node, 'hover', true); +}); +// Listen to the mouse leave event on node +graph.on('node:mouseleave', evt => { + const node = evt.item; + // inactivate the hover state of the node + graph.setItemState(node, 'hover', false); +}); +``` + +### Bounding Box + +KeyShape is used for **defining the Bounding Box —— bbox（x, y, width, height)** of the node to do some transformations and calculate the link points. Different keyShape will lead to different result link points. ### Example  There is a node with a rect Shape and a circle Shape in transparent filling and grey stroke. @@ -50,63 +115,6 @@ There are three key functions of custom node and edge which should be rewrited a - `draw(cfg, group)`: Draw the Shape with configurations and its container; - `update(cfg, n)`: Update the item according to the configurations and the item; -- `setState(name, value, item)`: Response the states changing for items. +- `setState(name, value, item)`: Response the states change for items. -For more information, refer to [Shape API](/en/docs/api/Shape)。 - -## anchorPoint - -The anchorPoint of a node is the link point where the related edges link to. In other words, it is the intersection of a node and its related edges. anchorPoints is a 2d array, each element represents the position of one anchor point. The positions of the anchor points in a [Shape](/en/docs/manual/middle/keyConcept) are shown below, the range of each x and y is [0, 1]:
- - -You can select the link points for an edge by `sourceAnchor` and `targetAnchor` if there are anchorPoints in the source and target node. Where This `sourceAnchor` and `targetAnchor` indicate the index of the array of anchorPoints. mechanism beautifies the graphs when there are multiple edges between two nodes. - -The data below shows how to configure the anchorPoints on a node and link points for an edge: -```javascript -const data = { - nodes: [ - { - id: 'node1', - label: 'node1', - x: 100, - y: 200, - // There are two anchorPoints for this node - anchorPoints: [[0, 1], [0.5, 1]], - shape: 'rect' - }, - { - id: 'node2', - label: 'node2', - x: 300, - y: 400, - // There are two anchorPoints for this node - anchorPoints: [[0.5, 0], [1, 0.5]], - shape: 'rect' - } - ], - edges: [ - { - source: 'node1', - target: 'node2', - // The source link point of the edge is the 0-th anchorPoint of the source node - sourceAnchor: 0, - // The target link point of the edge is the 0-th anchorPoint of the target node - targetAnchor: 0, - style: { - endArrow: true - } - }, - { - source: 'node2', - target: 'node1', - // The source link point of the edge is the 1-st anchorPoint of the source node - sourceAnchor: 1, - // The target link point of the edge is the 1-st anchorPoint of the target node - targetAnchor: 1, - style: { - endArrow: true - } - } - ] - } -``` +For more information, refer to [Shape API](/en/docs/api/Shape). diff --git a/docs/manual/middle/keyconcept/shape-keyshape.zh.md b/docs/manual/middle/keyconcept/shape-keyshape.zh.md new file mode 100644 index 0000000000..fcb819a889 --- /dev/null +++ b/docs/manual/middle/keyconcept/shape-keyshape.zh.md @@ -0,0 +1,117 @@ +--- +title: 图形 Shape 与 keyShape +order: 0 +--- + +## 图形 Shape +Shape 指 G6 中的图形、形状，它可以是圆形、矩形、路径等。它一般与 G6 中的节点、边相关。**G6 中的每一种节点或边由一个或多个 Shape 组成。节点、边、标签文本的配置都会被体现到对应的图形上。** + +例如下图（左）的节点包含了一个圆形图形；下图（中）的节点含有有一个圆形和一个文本图形；下图（右）的节点中含有 5 个圆形（蓝绿色的圆和上下左右四个锚点）、一个文本图形。但每种节点和边都会有自己的唯一关键图形 keyShape，下图中三个节点的 keyShape 都是蓝绿色的圆，keyShape 主要用于交互检测、样式随[状态](/zh/docs/manual/middle/states/state)自动更新等，见 [keyShape](#keyshape)。
           +> （左）只含有一个圆形图形的节点，keyShape 是该圆形。（中）含有圆形和文本图形的节点，keyShape 是圆形。（右）含有主要圆形、文本、上下左右四个小圆形的节点，keyShape 是圆形。 + + +G6 使用不同的 shape 及组合，设计了多种内置的节点和边。G6 内置节点的有 'circle'， 'rect'，'ellipse'，...（详见 [内置节点](/zh/docs/manual/middle/elements/nodes/defaultNode)）；内置边的有 'line'，'polyline'，'cubic'，...（详见 [内置边](/zh/docs/manual/middle/elements/edges/defaultEdge)）。 + +除了使用内置的节点和边外，G6 还允许用户通过自己搭配和组合 Shape 进行节点和边的自定义，详见 [自定义节点](/zh/docs/manual/advanced/custom-node) 和 [自定义边](/zh/docs/manual/advanced/custom-edge)。 + +## KeyShape +如上所述，每一种节点和边都有一个唯一的关键图形 keyShape。keyShape 是在节点的 `draw()` 方法中返回的图形对象。它有两个主要特点： + +### 响应样式 +内置节点/边配置项中的 `style` 属性将只体现在它的 keyShape 上。且内置节点/边的状态样式 （图实例的 `nodeStateStyles` / `edgeStateStyles` 或元素自身的 `stateStyles`) 也仅体现在它的 keyShape 上。 + +想要改变这一规则，可以 [自定义节点](/zh/docs/manual/advanced/custom-node) / [自定义边](/zh/docs/manual/advanced/custom-edge)。 + +#### 示例 +该示例使用了内置 rect 节点，的节点的 keyShape 是中间的 rect，其他 Shape 包括上下左右四个 circle 以及一个 text。代码设置了节点的样式 `style`，仅在 rect 上生效，其他 Shape 都以默认样式渲染。该节点上的其他图形需要使用其他配置项进行配置。例如，上下左右四个 circle 的样式需要在 `linkPoints` 中配置，文本样式需要在 `labelCfg` 中配置。代码中还监听了鼠标的进入节点和离开节点事件，触发了 hover 状态后 `nodeStateStyles` 里 hover 的对应样式仅在 keyShape 上生效。 + +keyshape-demo + +```javascript +const data = { + nodes: [{ + x: 100, + y: 100, + label: 'rect', + shape: 'rect', + style: { // 仅在 keyShape 上生效 + fill: 'lightblue', + stroke: '#888', + lineWidth: 1, + radius: 7 + }, + linkPoints: { + top: true, + bottom: true, + left: true, + right: true + // ... 四个圆的样式可以在这里指定 + }, + // labelCfg: {...} // 标签的样式可以在这里指定 + }] +}; +const graph = new G6.Graph({ + container: 'mountNode', + width: 500, + height: 300, + nodeStateStyles: { // 各状态下的样式，仅在 keyShape 上生效 + hover: { + fillOpacity: 0.1, + lineWidth: 10, + } + } +}); +graph.data(data); +graph.render(); +// 监听鼠标进入节点事件 +graph.on('node:mouseenter', evt => { + const node = evt.item; + // 激活该节点的 hover 状态 + graph.setItemState(node, 'hover', true); +}); +// 监听鼠标离开节点事件 +graph.on('node:mouseleave', evt => { + const node = evt.item; + // 关闭该节点的 hover 状态 + graph.setItemState(node, 'hover', false); +}); +``` + +### 包围盒确定 +**确定节点的包围盒（Bounding Box） —— bbox（x, y, width, height)** ，从而计算相关边的连入点（与相关边的交点）。若 keyShape 不同，节点与边的交点计算结果不同。  + +#### 示例  +本例中的一个节点由一个 rect 图形和一个带灰色描边、填充透明的 circle 图形构成。 + +- 当节点的 keyShape 为 circle 时： + + + +- 当节点的 keyShape 为 rect 时： + + + + +## Shape 的生命周期 +> 当用户需要[自定义节点](/zh/docs/manual/advanced/custom-node)和[自定义边](/zh/docs/manual/advanced/custom-edge)时，需要了解 Shape 的生命周期。使用内置节点和边则可以跳过这一部分内容。 + +从整体来看，Shape 的生命周期分为： + +- 初始化渲染； +- 更新； +- 操作； +- 销毁。 + +Shape 作为 Graph 上的核心元素，这几个阶段都需要考虑，但是销毁可以交给 Graph 来处理，所以在定义 Shape 时不需要考虑，仅需要考虑三个阶段即可： + +- 绘制：从无到有的绘制 Shape 及文本； +- 更新：数据发生改变导致 Shape 及文本发生变化； +- 操作：给 Shape 添加状态，如：selected，active 等。 + +所以我们在设计自定义节点和边时，定义了三个方法，若需要自定义节点和边，需要有选择性地复写它们： + +- `draw(cfg, group)`: 绘制，提供了绘制的配置项（数据定义时透传过来）和图形容器； +- `update(cfg, n)`: 更新，更新时的配置项（更新的字段和原始字段的合并）和元素对象； +- `setState(name, value, item)`: 响应节点状态的变化。 + +关于自定义 Shape 更多的方法请参考 [Shape API](/zh/docs/api/Shape)。 \ No newline at end of file diff --git a/docs/manual/middle/layout.en.md b/docs/manual/middle/layout.en.md index f63be6918d..02cb69ae9e 100644 --- a/docs/manual/middle/layout.en.md +++ b/docs/manual/middle/layout.en.md @@ -1,351 +1,345 @@ --- -title: Using Layout +title: Utilizing Layout order: 7 --- -## 简介 -图布局是指图中节点的排布方式，根据图的数据结构不同，布局可以分为两类：一般图布局、树图布局。G6 为这两类图都内置了一些常用的图布局算法。使用内置的图布局可以完成[布局的参数、方法、数据的切换](#FCFKL)等。 +## Introduction +Graph layouts are the algorithms arranging the node positions to obtain a understandable visualizaiton. According to the differences of data strucutre, the layouts can be categorized into: general graph layout and tree graph layout. There are several layout algorithms for them respectively. By utilizing the built-in layouts, [Translating the layouts and their configurations, translating the data](#layout-transformation-mechanism) can be achieved. Besides, G6 provides the web-worker for general graph layout in case layout calculation takes too long to block page interaction. -除了内置布局方法外，一般图布局还支持 [自定义布局](../advanced/custom-layout.zh) 机制。 +Besides, G6 supports [Custom Layout](/en/docs/manual/advanced/custom-layout) mechanism for users to design their own layout algorithm. -事实上，G6 的布局是自由的，内置布局算法仅仅是操作了数据中节点的 `x` 和 `y` 值。因此，除了使用内置布局以及自定义的一般图布局外，用户还可以使用外部图布局算法，计算节点位置后赋值到数据中节点的 `x` 和 `y` 字段上，G6 便可以根据该位置信息进行绘制。 +In fact, 'layout' is a free mechanism in G6. The built-in layouts only calculate and manipulate the `x` and `y` in node data. In other word, users can assign `x` and `y` to nodes by any other ways including the algorithms from the third-party libraries. Once G6 find the `x` and `y` information on data, it will render the graph according to it. -本文将逐一介绍内置的布局算法，及其使用方式。 +In this ducoment, we will introduce the layout algorithms in detail. -## G6 布局方法总览 +## G6 Layouts Overview -### 一般图 Graph +### Graph -- [Random Layout](#AIkrd)：随机布局； -- [Force Layout](#B6ZYA)：经典力导向布局； -- [Fruchterman Layout](#TirhH)：Fruchterman 布局，一种力导布局； -- [Circular Layout](#0lVZj)：环形布局； -- [Radial Layout](#lALX0)：辐射状布局； -- [MDS Layout](#RBhhk)：高维数据降维算法布局； -- [Dagre Layout](#RUeWF)：层次布局； -- [Concentric Layout](#4JMfP)：同心圆布局； -- [Grid Layout](#XG0RD)：网格布局。 +- [Random Layout](#random): Randomizes the node postions; +- [Force Layout](#force): Classical force-directed layout; +- [Fruchterman Layout](#fruchterman): A kind of force-directed layout; +- [Circular Layout](#circular): Arranges the nodes on a circle; +- [Radial Layout](#radial): Arranges the nodes around a focus node radially; +- [MDS Layout](#mds): Multidemensional Scaling; +- [Dagre Layout](#dagre): Arranges the nodes hierarchically; +- [Concentric Layout](#concentric): Arranges the nodes on concentric circles; +- [Grid Layout](#grid): Arranges the nodes on grid. -### 树图 TreeGraph +### TreeGraph -- [CompactBox Layout](#AyYPj)：紧凑树布局； -- [Dendrogram Layout](#sH1z0)：树状布局（叶子节点布局对齐到同一层）； -- [Intended Layout](#04ZZ5)：缩进布局； -- [Mindmap Layout](#AOAs2)：脑图布局。 +- [CompactBox Layout](#compactbox); +- [Dendrogram Layout](#dendrogram): Arrange the leaves on the same level; +- [Intended Layout](#intended); +- [Mindmap Layout](#mindmap). -## 一般图 Graph +## Graph + +### Configure the Graph +Configure `layout` to the Graph instance to assign the layout methods and their configurations. The following code assigns the layout with `type: 'force'`, which means the classical force-directed layout algorithm. The configurations `preventOverlap: true` and `nodeSize: 30` are assigned to prevent node overlappings, where the `nodeSize` is used for collide detection. More layout configurations can be found in the following sections. -### 配置一般图布局 -用户可以通过在实例化图时使用图的配置项 `layout` 指定布局方法。下面代码在实例化图时设置了布局方法为 `type: 'force'`，即经典力导向图布局。并设置了参数 `preventOverlap: true` 和 `nodeSize: 30`，表示希望节点不重叠。节点大小 `nodeSize` 用于算法中判断节点是否重叠，更多配置项见 [Graph 各布局的配置项](https://www.yuque.com/antv/g6/qopkkg#a73ba)。 ```javascript const graph = new G6.Graph({ - ... // 其他配置项 - layout: { // Object，可选，布局的方法及其配置项，默认为 random 布局。 + // ... // Other configurations for the graph + layout: { // Object, the layout configuration. Random layout by default type: 'force', preventOverlap: true, nodeSize: 30, - ... // 其他配置 + // ... // Other configurations for the layout } }); ``` -当实例化图时没有配置布局时： +Different layout algorithms have different configurations. For all the general graph layout algorithms in G6, you can enable the web-worker by configure `workerEnabled: true` in the `layout` configuration above. With web-worker, layout algorithms performed on large data with high cost will not block the web page. -- 若数据中节点有位置信息（`x` 和 `y`），则按照数据的位置信息进行绘制； -- 若数据中节点没有位置信息，则默认使用 Random Layout 进行布局。 +When the `layout` is not assigned: -### 一般图布局方法 -图布局通用 API：[Layout API](https://www.yuque.com/antv/g6/agbmu2)。 +- If there is position information with `x` and `y` in node data, G6 renders the graph with them; +- If the position information does not exist in the node data, Random Layout will take effect by default. + +### Layouts for Graph +General graph layout API: [General Graph Layout API](/en/docs/api/layout/Graph). #### Random -
**描述**：随机布局。 -
**API**：[Random API](https://www.yuque.com/antv/g6/nrxlhg) -
**参数**： +
**Description**: Randomizes the node positions. +
**API**: [Random API](/en/docs/api/layout/Graph#random) +
**Configuration**: -| 参数名 | 类型 | 示例 | 默认值 | 说明 | +| Name | Type | Example | Default | Description | | --- | --- | --- | --- | --- | -| center | Array | [ 0, 0 ] | 图的中心 | 随机布局的中心 | -| width | Number | 300 | 图的宽 | | -| height | Number | 300 | 图的高 | | +| center | Array | [ 0, 0 ] | The center of the graph | The center of the layout | +| width | Number | 300 | The width of the graph | | +| height | Number | 300 | The height of the graph | | +| workerEnabled | Boolean | true / false | false | Whether to enable the web-worker in case layout calculation takes too long to block page interaction | #### Force -
**描述**：经典力导向布局。 -
**API**：[Force API](https://www.yuque.com/antv/g6/rllgdl) -
**参数**：与 d3 的力导布局参数相对应。 +
**Description**: Classical force-directed layout algorithm. +
**API**: [Force API](/en/docs/api/layout/Graph#force) +
**Configuration**: Corresponds to the configurations in force-directed algorithm in d3.js -| 参数名 | 类型 | 示例 | 默认值 | 说明 | +| Name | Type | Example | Default | Description | | --- | --- | --- | --- | --- | -| center | Array | [ 0, 0 ] | 图的中心 | 随机布局的中心 | -| linkDistance | Number | Function | 示例1: 50 
示例2:
d => {
  // d 是一条边
  if (d.id === 'edge1') {
    return 100;
  }
  return 50;
} | 50 | 边长。可以使用回调函数的形式对不同对边定义不同边长（如示例2） | -| nodeStrength | Number | Function | 示例1: -30 
示例2:
d => {
  // d 是一个节点
  if (d.id === 'node1') {
    return -100;
  }
  return -30;
} | null | 节点作用力，正数代表节点之间的引力作用，负数代表节点之间的斥力作用。可以使用回调函数的形式对不同对节点定义不同节点作用力（如示例2） | -| edgeStrength | Number | 示例1: 1 
示例2:
d => {
  // d 是一个节点
  if (d.id === 'node1') {
    return 10;
  }
  return 1;
} | null | 边的作用力，默认根据节点的出入度自适应。可以使用回调函数的形式对不同对节点定义不同边作用力（如示例2） | -| preventOverlap | Boolean | false | false | 是否防止重叠，必须配合属性 `nodeSize` ，只有设置了与当前图节点大小相同的 `nodeSize` 值，才能够进行节点重叠的碰撞检测。若未设置 `nodeSize` ，则根据节点数据中的 `size` 进行碰撞检测。若二者都未设置，则默认以 10 为节点大小进行碰撞检测 | -| nodeSize | Array | Number | 20 | undefined | 节点大小（直径）。用于碰撞检测。
若不指定，则根据传入的数据节点中的 `size` 字段计算。若即不指定，节点中也没有 `size`，则默认大小为 10 | -| nodeSpacing

3.1.6 后支持 | Number | Function | 示例 1 : 10
示例 2 : 
d => {
  // d 是一个节点
  if (d.id === 'node1') {
    return 100;
  }
  return 10;
} | 0 |
`preventOverlap` 为 `true` 时生效，防止重叠时节点边缘间距的最小值。可以是回调函数，为不同节点设置不同的最小间距，如示例 2 所示
| -| alphaDecay | Number | 0.03 | 0.028 | 迭代阈值的衰减率。[0, 1]，0.028 对应迭代书为 300 | -| alphaMin | Number | 0.03 | 0.001 | 停止迭代的阈值 | -| alpha | Number | 0.1 | 0.3 | 当前阈值 | -| collideStrength | Number | 0.8 | 1 | 防止重叠的力强度，[0, 1]。 | -| forceSimulation | Object | | null | 自定义 force 方法，若不指定，则使用 d3 的方法。 | -| onTick | Function | | {} | 每一次迭代的回调函数 | -| onLayoutEnd | Function | | {} | 布局完成后的回调函数 | +| center | Array | [ 0, 0 ] | The center of the graph | The center of the layout | +| linkDistance | Number / Function | Example 1: `50` 
Example 2:
d => {
  // d is an edge
  if (d.id === 'edge1') {
    return 100;
  }
  return 50;
} | 50 | The edge length. It can be a function to define the different edge lengths for different edges (Example 2) | +| nodeStrength | Number / Function | Example 1: `-30` 
Example 2:
d => {
  // d is a node
  if (d.id === 'node1') {
    return -100;
  }
  return -30;
} | null | The strength of node force. Positive value means attractive force, negative value means repulsive force (Example 2) | +| edgeStrength | Number | Example 1: 1 
Example 2:
d => {
  // d is a node
  if (d.id === 'node1') {
    return 10;
  }
  return 1;
} | null | The strength of edge force. Calculated according to the degree of nodes by default (Example 2) | +| preventOverlap | Boolean | false | false | Whether to prevent node overlappings. To activate preventing node overlappings, `nodeSize` is required, which is used for collide detection. The size in the node data will take effect if `nodeSize` is not assigned. If the `nodeSize` and size in data are both undefiend, `nodeSize` will be assigned to 10 by default | +| nodeSize | Array / Number | 20 | undefined | The diameter of the node. It is used for preventing node overlappings. If `nodeSize` is not assigned, the size property in node data will take effect. If the size in node data does not exist either, `nodeSize` is assigned to 10 by default | +| nodeSpacing

| Number / Function | Example 1: 10
Example 2:  
d => {
  // d is a node
  if (d.id === 'node1') {
    return 100;
  }
  return 10;
} | 0 |
Takes effect when `preventOverlap` is `true`. It is the minimum distance between nodes to prevent node overlappings. It can be a function to define different distances for different nodes (example 2)
| +| alphaDecay | Number | 0.03 | 0.028 | The decay ratio of alpha for convergence. THe range is [0, 1]. 0.028 corresponds to 300 times iteration| +| alphaMin | Number | 0.03 | 0.001 | The threshold to stop the iteration | +| alpha | Number | 0.1 | 0.3 | The current alpha of convergence | +| collideStrength | Number | 0.8 | 1 | The strength of force for preventing node overlappings. The range is [0, 1] | +| forceSimulation | Object | | null | Customed force simulation. If it is not assigned, the force simulation of d3.js will take effect | +| onTick | Function | | {} | The callback function of each iteration | +| onLayoutEnd | Function | | {} | The callback function after layout | +| workerEnabled | Boolean | true / false | false | Whether to enable the web-worker in case layout calculation takes too long to block page interaction | #### Fruchterman -
**描述**：Fruchterman 布局，一种力导布局。 -
**API**：[Fruchterman API](https://www.yuque.com/antv/g6/vzqn07) -
**参数**： +
**Description**: Fruchterman is a kind of force-directed layout. +
**API**: [Fruchterman API](/en/docs/api/layout/Graph#fruchterman) +
**Configuration**: -| 参数名 | 类型 | 示例 | 默认值 | 说明 | +| Name | Type | Example | Default | Description | | --- | --- | --- | --- | --- | -| center | Array | [ 0, 0 ] | 图的中心 | 随机布局的中心 | -| maxIteration | Number | 1000 | 1000 | 最大迭代次数 | -| gravity | Number | 10 | 10 | 重力大小，影响布局的紧凑程度 | -| speed | Number | 1 | 1 | 每次迭代节点移动的速度。速度太快可能会导致强烈震荡 | -| clustering | Boolean | false | false | 是否按照聚类布局 | -| clusterGravity | Number | 30 | 10 | 聚类内部的重力大小，影响聚类的紧凑程度 | +| center | Array | [ 0, 0 ] | The center of the graph | The center of the layout | +| maxIteration | Number | 1000 | 1000 | The maximum interation number | +| gravity | Number | 10 | 10 | The gravity, which affects the compactness of the layout | +| speed | Number | 1 | 1 | The moving speed in each iteration. Large value might lead to violent swing | +| clustering | Boolean | false | false | Whether to layout by clustering | +| clusterGravity | Number | 30 | 10 | The gravity of each clusterm which affects the compactness of each cluster | +| workerEnabled | Boolean | true / false | false | Whether to enable the web-worker in case layout calculation takes too long to block page interaction | - #### Circular -
**描述**：环形布局。 -
**API**：[Circular API](https://www.yuque.com/antv/g6/ml1qe3) -
**参数**： +
**Description**: Arranges the nodes on a circle. +
**API**: [Circular API](/en/docs/api/layout/Graph#circular) +
**Configuration**: -| 参数名 | 类型 | 示例/可选值 | 默认值 | 说明 | +| Name | Type | Example/Options | Default | Description | | --- | --- | --- | --- | --- | -| center | Array | [ 0, 0 ] | 图的中心 | 随机布局的中心 | -| radius | Number | 50 | null | 圆的半径。若设置了 radius，则 startRadius 与 endRadius 不生效 | -| startRadius | Number | 10 | null | 螺旋状布局的起始半径 | -| endRadius | Number | 100 | null | 螺旋状布局的结束半径 | -| clockwise | Boolean | true | true | 是否顺时针排列 | -| divisions | Number | 3 | 1 | 节点在环上的分段数（几个段将均匀分布），在 endRadius - startRadius != 0 时生效 | -| ordering | String | null | 'topology' | 'degree' | null | 节点在环上排序的依据。默认 null 代表直接使用数据中的顺序。'topology' 按照拓扑排序。'degree' 按照度数大小排序 | -| angleRatio | Number | 1 | 1 | 从第一个节点到最后节点之间相隔多少个 2*PI | +| center | Array | [ 0, 0 ] | The center of the graph | The center of the layout | +| radius | Number | 50 | null | The radius of the circle. If the `raidus` exists, `startRadius` and `endRadius` do not take effect. | +| startRadius | Number | 10 | null | The start radius of spiral layout | +| endRadius | Number | 100 | null | The end radius of spiral layout | +| clockwise | Boolean | true | true | Whether to layout clockwisely | +| divisions | Number | 3 | 1 | The division number of the nodes on the circle. Takes effect when `endRadius - startRadius !== 0` | +| ordering | String | null | 'topology' | 'degree' | null | The ordering method for nodes. `null` by default, which means the nodes are arranged in data order. 'topology' means in topology order; 'degree' means in degree order. | +| angleRatio | Number | 1 | 1 | How many 2*PIs Between the first node and the last node | +| workerEnabled | Boolean | true / false | false | Whether to enable the web-worker in case layout calculation takes too long to block page interaction | - #### Radial -
**描述**：辐射状布局。 -
**API**：[Radial API](https://www.yuque.com/antv/g6/ngp0vg#7ZOs7) -
**参数**： +
**Description**: Arranges the nodes to concentrics centered at a focus node according to their shortest path length to the focus node. +
**API**: [Radial API](/en/docs/api/layout/Graph#radial) +
**Configuration**: -| 参数名 | 类型 | 示例 | 默认值 | 说明 | +| Name | Type | Example | Default | Description | | --- | --- | --- | --- | --- | -| center | Array | [ 0, 0 ] | 图的中心 | 随机布局的中心 | -| linkDistance | Number | 50 | 50 | 边长 | -| maxIteration | Number | 1000 | 1000 | 停止迭代到最大迭代数 | -| focusNode | String | Object | 'node1' | null | 中心点，默认为数据中第一个节点。可以传入节点 id 或节点本身。 | -| unitRadius | Number | 10 | 100 | 每一圈距离上一圈的距离。默认填充整个画布，即根据图的大小决定 | -| preventOverlap | Boolean | false | false | 是否防止重叠，必须配合属性 `nodeSize` ，只有设置了与当前图节点大小相同的 `nodeSize` 值，才能够进行节点重叠的碰撞检测。
3.1.6 后支持：
若未设置 `nodeSize`，则将会根据数据中节点的 size 字段数值进行碰撞检测计算。若二者皆未设置，则以节点大小为 10 进行计算。 | -| maxPreventOverlapIteration | Number | 500 | 200 | 防止重叠步骤的最大迭代次数 | -| nodeSize | Number | 10 | 10 | 节点大小（直径）。用于防止节点重叠时的碰撞检测。
3.1.6 后支持：
若未设置则使用数据中节点的 `size` 字段数值进行碰撞检测计算。若二者皆未设置，则以节点大小为 10 进行计算。 | -| nodeSpacing
3.1.6 后支持 | Number | Function | 示例 1 : 10
示例 2 : 
d => {
  // d 是一个节点
  if (d.id === 'node1') {
    return 100;
  }
  return 10;
} | 0 |
`preventOverlap` 为 `true` 时生效，防止重叠时节点边缘间距的最小值。可以是回调函数，为不同节点设置不同的最小间距，如示例 2 所示
| -| strictRadial | Boolean | true | false | 是否必须是严格的 radial 布局，即每一层的节点严格布局在一个环上。`preventOverlap` 为 `true` 时生效。详见 [Radial-strictRadial API](https://www.yuque.com/antv/g6/ngp0vg#7ZOs7)
- 当 `preventOverlap` 为 `true`，且 `strictRadial` 为 `false` 时，有重叠的节点严格沿着所在的环展开，但在一个环上若节点过多，可能无法完全避免节点重叠。
- 当 `preventOverlap` 为 `true`，且 `strictRadial` 为 `true` 时，允许同环上重叠的节点不严格沿着该环布局，可以在该环的前后偏移以避免重叠。
| +| center | Array | [ 0, 0 ] | The center of the graph | The center of the layout | +| linkDistance | Number | 50 | 50 | The edge length | +| maxIteration | Number | 1000 | 1000 | The max iteration number. | +| focusNode | String / Object | 'node1' | null | The focus node of the radial layout. The first node of the data is the default value. It can be the id of a node or the node item. | +| unitRadius | Number | 10 | 100 | The separation between adjacent circles. If `unitRadius` is not assigned, the layout will fill the canvas automatically. | +| preventOverlap | Boolean | false | false | Whether to prevent node overlappings. To activate preventing node overlappings, `nodeSize` is required, which is used for collide detection. The size in the node data will take effect if `nodeSize` is not assigned. | +| maxPreventOverlapIteration | Number | 500 | 200 | The maximum iteration number of preventing node overlappings | +| nodeSize | Number | 10 | 10 | The diameter of the node. It is used for preventing node overlappings.
:
The size in the node data will take effect if `nodeSize` is not assigned. If the size in node data does not exist either, `nodeSize` is assigned to 10 by default | +| nodeSpacing
| Number / Function | Example 1: 10
Example 2:  
d => {
  // d is a node
  if (d.id === 'node1') {
    return 100;
  }
  return 10;
} | 0 |
Takes effect when `preventOverlap` is `true`. It is the minimum distance between nodes to prevent node overlappings. It can be a function to define different distances for different nodes (example 2)
| +| strictRadial | Boolean | true | false | Whether to layout the graph as strict radial, which means the nodes will be arranged on each circle strictly. Takes effect only when `preventOverlap` is `true`. Refer to [Radial-strictRadial API](/en/docs/api/layout/Graph/#strictradial)
- When `preventOverlap` is `true`, and `strictRadial` is `false`, the overlapped nodes are arranged along their circles strictly. But for the situation that there are too many nodes on a circle to be arranged, the overlappings might not be eliminated completely
- When `preventOverlap` is `true`, and `strictRadial` is `true` , the overlapped nodes can be arranged around their circle with small offsets.
| +| sortBy | String | 'data' / 'cluster' | undefined | Sort the nodes of the same level. `undefined` by default, which means place the nodes with connections as close as possible; `'data'` means place the node according to the ordering in data, the closer the nodes in data ordering, the closer the nodes will be placed. `sortBy` also can be assigned to any name of property in nodes data, such as `'cluster'`, `'name'` and so on (make sure the property exists in the data) | +| sortStrength | Number | 10 | 10 | The strength to sort the nodes in the same circle. Larger number means place the nodes with smaller distance of `sortBy` more closely. Takes effect only when `sortBy` is not `undefined` | +| workerEnabled | Boolean | true / false | false | Whether to enable the web-worker in case layout calculation takes too long to block page interaction | - #### MDS -
**描述**：高维数据降维算法布局。
**API**：[MDS API](https://www.yuque.com/antv/g6/kbvo7q)
**参数**： +
**Description**: MDS (Multidimensional scaling) is used for project high dimensional data onto low dimensional space.
**API**: [MDS API](/en/docs/api/layout/Graph/#mds)
**Configuration**: -| 参数名 | 类型 | 示例 | 默认值 | 说明 | +| Name | Type | Example | Default | Description | | --- | --- | --- | --- | --- | -| center | Array | [ 0, 0 ] | 图的中心 | 随机布局的中心 | -| linkDistance | Number | 50 | 50 | 边长 | +| center | Array | [ 0, 0 ] | The center of the graph | The center of the layout | +| linkDistance | Number | 50 | 50 | The edge length | +| workerEnabled | Boolean | true / false | false | Whether to enable the web-worker in case layout calculation takes too long to block page interaction | - #### Dagre -
**描述**：层次布局。
**API**：[Dagre API](https://www.yuque.com/antv/g6/fkhp3c)
**参数**： +
**Description**: An hierarchical layout.
**API**: [Dagre API](/en/docs/api/layout/Graph#dagre)
**Configuration**: -| 参数名 | 类型 | 示例 / 可选值 | 默认值 | 说明 | +| Name | Type | Example/Options | Default | Description | | --- | --- | --- | --- | --- | -| rankdir | String | 'TB' / 'BT' / 'LR' / 'RL' | 'TB' | layout 的方向。T：top；B：bottom；L：left；R：right | -| align | String | 'UL' / 'UR' / 'DL' / 'DR' | 'UL' | 节点对齐方式。U：upper；D：down；L：left；R：right | -| nodesep | Number | 40 | 50 | 在`rankdir` 为 'TB' 或 'BT' 时代表节点水平间距（px）；在`rankdir` 为 'LR' 或 'RL' 时代表节点的竖直间距。优先级高于 `nodesepFunc` | -| ranksep | Number | 40 | 50 | 代表层间距（px）。在`rankdir` 为 'TB' 或 'BT' 时是竖直方向相邻层间距；在`rankdir` 为 'LR' 或 'RL' 时代表水平方向相邻层间距。优先级高于 `ranksepFunc` | -| nodesepFunc

3.1.6 后支持 | Function | d => {
  // d 是一个节点
  if (d.id === 'node1') {
    return 100;
  }
  return 10;
} | undefined | 节点水平间距（px）的回调函数，通过该参数可以对不同节点设置不同的节点间距。在`rankdir` 为 'TB' 或 'BT' 时是节点的水平间距；在`rankdir` 为 'LR' 或 'RL' 时是节点的竖直间距。优先级低于 `nodesep`，即若设置了 `nodesep`，则 `nodesepFunc` 不生效 | -| ranksepFunc

3.1.6 后支持 | Function | d => {
  // d 是一个节点
  if (d.id === 'node1') {
    return 100;
  }
  return 10;
} | undefined | 层间距（px）的回调函数，通过该参数可以对不同节点设置不同的层间距。在`rankdir` 为 'TB' 或 'BT' 时是竖直方向相邻层间距；在`rankdir` 为 'LR' 或 'RL' 时代表水平方向相邻层间距。优先级低于 `ranksep`，即若设置了 `ranksep`，则 `ranksepFunc` 不生效 | -| controlPoints | Boolean | true | true | 是否保留布局连线的控制点 | +| rankdir | String | 'TB' / 'BT' / 'LR' / 'RL' | 'TB' | The layout direction. T: top; B: bottom; L: left; R: right | +| align | String | 'UL' / 'UR' / 'DL' / 'DR' | 'UL' | The alignment of the nodes. U: upper; D: down; L: left; R: right | +| nodesep | Number | 40 | 50 | The separation between nodes with unit px. When `rankdir` is `'TB'` or `'BT'`, `nodesep` represents the horizontal separations between nodes; When `rankdir` is `'LR'` or `'RL'`, `nodesep` represents the vertical separations between nodes | +| ranksep | Number | 40 | 50 | The separations between adjacent levels with unit px. When `rankdir` is `'TB'` or `'BT'`, `ranksep` represents the vertical separations between adjacent levels; when `rankdir` is `'LR'` or `'RL'`, `rankdir` represents the horizontal separations between adjacent levels | +| nodesepFunc

| Function | d => {
  // d is a node
  if (d.id === 'node1') {
    return 100;
  }
  return 10;
} | undefined | The function for node separation with unit px. You can adjust the separations between different node pairs by using this function instead of `nodesep`. When `rankdir` is `'LR'` or `'RL'`, `nodesep` represents the vertical separations between nodes. The priority of `nodesepFunc` is lower than `nodesep`, which means if `nodesep` is assigned, the `nodesepFunc` will not take effect | +| ranksepFunc

| Function | d => {
  // d is a node
  if (d.id === 'node1') {
    return 100;
  }
  return 10;
} | undefined | The function for level separation with unit px. You can adjust the separations between different adjacent levels by using this function instead of `ranksep`. When `rankdir` is `'TB'` or `'BT'`, `ranksep` represents the vertical separations between adjacent levels; when `rankdir` is `'LR'` or `'RL'`, `rankdir` represents the horizontal separations between adjacent levels. The priority of `ranksepFunc` is lower than `ranksep`, which means if `ranksep` is assigned, the `ranksepFunc` will not take effect | +| controlPoints | Boolean | true | true | Whether to keep the control points of layout | +| workerEnabled | Boolean | true / false | false | Whether to enable the web-worker in case layout calculation takes too long to block page interaction | - #### Concentric -
注：该算法参考 [cytoscape.js](https://github.com/cytoscape/cytoscape.js)，遵守 MIT 开源协议。
**描述**：同心圆布局。
**API**：[Concentric API](https://www.yuque.com/antv/g6/lx038n)
**参数**： +
Tips: Concentric layout in G6 refers to cytoscape.js, we obey the MIT license
**Description**: Arranges the nodes on several concentric circles.
**API**: [Concentric API](/en/docs/api/layout/Graph#concentric)
**Configuration**: -| 参数名 | 类型 | 示例 / 可选值 | 默认值 | 说明 | +| Name | Type | Example/Options | Default | Description | | --- | --- | --- | --- | --- | -| center | Array | [ 0, 0 ] | 图的中心 | 随机布局的中心 | -| nodeSize | Number | 30 | 30 | 节点大小（直径）。用于防止节点重叠时的碰撞检测 | -| minNodeSpacing | Number | 10 | 10 | 环与环之间最小间距，用于调整半径 | -| preventOverlap | Boolean | false | false | 是否防止重叠，必须配合属性 `nodeSize` ，只有设置了与当前图节点大小相同的 `nodeSize` 值，才能够进行节点重叠的碰撞检测。若未设置 `nodeSize` ，则将根据节点数据中的 `size` 进行碰撞检测。若二者都未设置，则默认以 30 为节点大小进行碰撞检测 | -| sweep | Number | Math.PI | undefined | 第一个节点与最后一个节点之间的弧度差 | -| equidistant | Boolean | false | false | 环与环之间的距离是否相等 | -| startAngle | Number | 3.14 | 3 / 2 * Math.PI | 开始放置节点的弧度 | -| clockwise | Boolean | false | false | 是否按照顺时针顺序 | -| maxLevelDiff | Number | 0.5 | undefined | 每一层同心值的求和。若为 undefined，则将会被设置为 maxValue / 4 ，其中 maxValue 为最大的排序依据的属性值。例如，若 sortBy='degree'，则 maxValue 为所有节点中度数最大的节点的度数 | -| sortBy | String | 'degree' | 'property1' | 'weight' | ... | undefined | 指定的节点排序的依据（节点属性名）。该属性值高的放在中心。如果是 `sortBy` 为 `undefined` 则会计算节点度数，度数最高的放在中心。
| +| center | Array | [ 0, 0 ] | The center of the graph | The center of the layout | +| nodeSize | Number | 30 | 30 | The diameter of the node. It is used for preventing node overlappings | +| minNodeSpacing | Number | 10 | 10 | The minimum separation between adjacent circles | +| preventOverlap | Boolean | false | false | Whether to prevent node overlappings. To activate preventing node overlappings, `nodeSize` is required, which is used for collide detection. The size in the node data will take effect if `nodeSize` is not assigned. If the size in node data does not exist either, `nodeSize` is assigned to 30 by default | +| sweep | Number | Math.PI | undefined | How many radians should be between the first and last node (defaults to full circle). If it is undefined, 2 * Math.PI * (1 - 1 / |level.nodes|) will be used, where level.nodes is nodes set of each level, |level.nodes| is the number of nodes of the level | +| equidistant | Boolean | false | false | Whether levels have an equal radial distance between them, may cause bounding box overflow | +| startAngle | Number | 3.14 | 3 / 2 * Math.PI | Where nodes start in radians | +| clockwise | Boolean | false | false | Place the nodes in clockwise or not | +| maxLevelDiff | Number | 0.5 | undefined | The sum of concentric values in each level. If it is undefined, maxValue / 4 will take place, where maxValue is the max value of ordering properties. For example, if `sortBy='degree'`, maxValue is the max degree value of all the nodes | +| sortBy | String | 'property1' / 'weight' / ... | undefined | Order the nodes according to this parameter. It is the property's name of node. The node with higher value will be placed to the center. If it is undefined, the algorithm will order the nodes by their degree
| +| workerEnabled | Boolean | true / false | false | Whether to enable the web-worker in case layout calculation takes too long to block page interaction | - #### Grid -
注：该算法参考 [cytoscape.js](https://github.com/cytoscape/cytoscape.js)，遵守 MIT 开源协议。
**描述**：网格布局。
**API**：[Grid API](https://www.yuque.com/antv/g6/wn4kg9)
**参数**： +
Tips: Concentric layout in G6 refers to cytoscape.js, we obey the MIT license.
**Description**: Orders the nodes according to the configurations and arranged them onto grid.
**API**: [Grid API](/en/docs/api/layout/Graph#grid)
**Configuration**: -| 参数名 | 类型 | 示例 / 可选值 | 默认值 | 说明 | +| Name | Type | Example/Options | Default | Description | | --- | --- | --- | --- | --- | -| begin | Array | [ 0, 0 ] | [ 0, 0 ] | 网格开始位置（左上角） | -| preventOverlap | Boolean | false | false | 是否防止重叠，必须配合属性 `nodeSize` ，只有设置了与当前图节点大小相同的 `nodeSize` 值，才能够进行节点重叠的碰撞检测。若未设置 `nodeSize` ，则将根据节点数据中的 `size` 进行碰撞检测。若二者都未设置，则默认以 30 为节点大小进行碰撞检测 | -| preventOverlapPadding | Number | 10 | 10 | 避免重叠时节点的间距 padding。preventOverlap 为 true 时生效 | -| nodeSize | Number | 30 | 30 | 节点大小（直径）。用于防止节点重叠时的碰撞检测 | -| condense | Boolean | false | false | 为 false 时表示利用所有可用画布空间，为 true 时表示利用最小的画布空间 | -| rows | Number | 5 | undefined | 网格的行数，为 undefined 时算法根据节点数量、布局空间、cals（若指定）自动计算 | -| cals | Number | 5 | undefined | 网格的列数，为 undefined 时算法根据节点数量、布局空间、rows（若指定）自动计算 | -| sortBy | String | 'degree' | 'property1' | 'weight' | ... | 'degree' | 指定排序的依据（节点属性名），数值越高则该节点被放置得越中心。若为 undefined，则会计算节点的度数，度数越高，节点将被放置得越中心 | +| begin | Array | [ 0, 0 ] | [ 0, 0 ] | 网格开始位置(左上角) | +| preventOverlap | Boolean | false | false | Whether to prevent node overlappings. To activate preventing node overlappings, `nodeSize` is required, which is used for collide detection. The size in the node data will take effect if `nodeSize` is not assigned. If the size in node data does not exist either, `nodeSize` is assigned to 30 by default | +| preventOverlapPadding | Number | 10 | 10 | The minimum padding between nodes to prevent node overlappings. Takes effect when `preventOverlap` is `true` | +| nodeSize | Number | 30 | 30 | The diameter of the node. It is used for preventing node overlappings. | +| condense | Boolean | false | false | Wheter to utilize the minimum space of the canvas. `false` means utilizing the full space, `true` means utilizing the minimum space. | +| rows | Number | 5 | undefined | The row number of the grid. If `rows` is undefined, the algorithm will calculate it according to the space and node numbers automatically | +| cols | Number | 5 | undefined | The column number of the grid. If `cols` is undefined, the algorithm will calculate it according to the space and node numbers automatically | +| sortBy | String | 'property1' / 'weight' / ... | 'degree' | The ordering method for nodes. Smaller the index in the ordered array, more center the node will be placed. If `sortBy` is undefined, the algorithm order the nodes according to their degrees | +| workerEnabled | Boolean | true / false | false | Whether to enable the web-worker in case layout calculation takes too long to block page interaction | - -## 树图 TreeGraph -由于树图特殊性，G6扩展出了 TreeGraph ，详细文档请见：[TreeGraph](https://www.yuque.com/antv/g6/treegraph) API。树布局是一种能很好展示有一定层次结构数据的布局方式。推荐使用 G6.TreeGraph 实现。 +## TreeGraph +In order to handle the tree data structure, G6 extends Graph to TreeGraph. Refer to: [TreeGraph API](/en/docs/api/layout/TreeGraph). TreeGraph is appropriate for visualizing hierarchy data. - -### 配置树图布局 -与一般图 Graph 配置方法相似，通过实例化图时配置 `layout` 属性设置树的布局，还可以通过 `modes` 属性为树配置 [展开/收缩行为](https://www.yuque.com/antv/g6/treegraph#157b6823)。以下代码声明了一个实例，定义了布局为从左到右结构的基础树图，并且定义了展开收缩行为。 +### Configure the TreeGraph +Similar to Graph, assign `layout` to Graph instance to set the layout for a TreeGraph. The [Expand/Collapse](/en/docs/manual/middle/states/defaultBehavior/#collapse-expand) behavior can be assigned to the TreeGraph by `modes`. ```javascript const graph = new G6.TreeGraph({ container: 'mountNode', modes: { default: [{ - // 定义展开/收缩行为 + // Assign the collapse/expand behavior type: 'collapse-expand' }, 'drag-canvas'] }, - // 定义布局 + // Assign the layout layout: { - type: 'dendrogram', // 布局类型 - direction: 'LR', // 自左至右布局，可选的有 H / V / LR / RL / TB / BT - nodeSep: 50, // 节点之间间距 - rankSep: 100 // 每个层级之间的间距 + type: 'dendrogram', // Layout type + direction: 'LR', // Layout direction is from the left to the right. Options: 'H' / 'V' / 'LR' / 'RL' / 'TB' / 'BT' + nodeSep: 50, // The distance between nodes + rankSep: 100 // The distance between adjacent levels } }); ``` - -### - -### 树图布局方法 - + +### Layouts for TreeGraph #### compactBox -**描述**：紧凑树布局。从根节点开始，同一深度的节点在同一层，并且布局时会将节点大小考虑进去。

**API**：[CompactBox API](https://www.yuque.com/antv/g6/rufc7b)
**参数**： +**Description**: CompactBox is the default layout for TreeGraph. It will consider the bounding box of each node when layout.

**API**: [CompactBox API](/en/docs/api/layout/TreeGraph/#compactbox)
**Configuration**: -| 参数名 | 类型 | 示例 / 可选值 | 默认值 | 说明 | +| Name | Type | Example/Options | Default | Description | | --- | --- | --- | --- | --- | -| direction | String | 'TB' / 'BT' / 'LR' / 'RL' / 'H' / 'V' | 'LR' | layout 的方向。
- TB —— 根节点在上，往下布局
- BT —— 根节点在下，往上布局
    
（左）TB。（右）BT。
- LR —— 根节点在左，往右布局
- RL —— 根节点在右，往左布局
             
（左）LR。（右）RL。
- H —— 根节点在中间，水平对称布局
- V —— 根节点在中间，垂直对称布局
          
> （左）H。（右）V。 | -| getId | Function | (d) => {
  // d 是一个节点
  return d.id;
} | undefined | 节点 id 的回调函数 | -| getHeight | Function | (d) => {
  // d 是一个节点
  return 10;
} | undefined | 节点高度的回调函数 | -| getWidth | Function | (d) => {
  // d 是一个节点
  return 20;
} | undefined | 节点宽度的回调函数 | -| getVGap | Function | (d) => {
  // d 是一个节点
  return 100;
} | undefined | 节点纵向间距的回调函数 | -| getHGap | Function | (d) => {
// d 是一个节点
  return 50;
} | undefined | 节点横向间距的回调函数 | -| radial | Boolean | true | false | 是否按照辐射状布局。若 `radial` 为 `true`，建议 `direction` 设置为 `'LR'` 或 `'RL'`： | +| direction | String | 'TB' / 'BT' / 'LR' / 'RL' / 'H' / 'V' | 'LR' | The direction of layout.
- TB —— Root is on the top, layout from the top to the bottom
- BT —— Root is on the bottom, layout from the bottom to the top
    
(Left)TB. (Right)BT.
- LR —— Root is on the left, layout from the left to the right
- RL —— Root is on the right, layout from the right to the left
             
(Left)LR. (Right)RL.
- H —— Root is on the middle, layout in horizontal symmetry.
- V —— Root is on the middle, layout in vertical symmetry.
          
> (Left)H. (Right)V. | +| getId | Function | (d) => {
  // d is a node
  return d.id + 'node';
} | undefined | Sets the id for each node | +| getHeight | Function | (d) => {
  // d is a node
  return 10;
} | undefined | The height of each node | +| getWidth | Function | (d) => {
  // d is a node
  return 20;
} | undefined | he width of each node | +| getVGap | Function | (d) => {
  // d is a node
  return 100;
} | undefined | The vertical separation of nodes | +| getHGap | Function | (d) => {
// d is a node
  return 50;
} | undefined | The horizontal separation of nodes | +| radial | Boolean | true | false | If layout the graph in radial style. If `radial` is `true`, we recommend to set `direction` to `'LR'` or `'RL'`: | - #### dendrogram -**描述**：生态树布局。不管数据的深度多少，总是叶节点对齐。不考虑节点大小，布局时将节点视为1个像素点。

**API**：[Dendrogram API](https://www.yuque.com/antv/g6/co00r6)
**参数**： +**Description**: Arranges all the leaves on the same level. It is appropriate for hierarchical clustering. It does not consider the node size, which will be regarded as 1 px.

**API**: [Dendrogram API](/en/docs/api/layout/TreeGraph/#dendrogram)
**Configuration**: -| 参数名 | 类型 | 示例 / 可选值 | 默认值 | 说明 | +| Name | Type | Example/Options | Default | Description | | --- | --- | --- | --- | --- | -| direction | String | 'TB' / 'BT' / 'LR' / 'RL' / 'H' / 'V' | 'LR' | layout 的方向。
- TB —— 根节点在上，往下布局
- BT —— 根节点在下，往上布局

> （左）TB。（右）BT。
- LR —— 根节点在左，往右布局
- RL —— 根节点在右，往左布局

> （左）LR。（右）RL。
- H —— 根节点在中间，水平对称布局
- V —— 根节点在中间，垂直对称布局

> （左）H。（右）V。 | -| nodeSep | Number | 50 | 0 | 节点间距 | -| rankSep | Number | 100 | 0 | 层与层之间的间距 | -| radial | Boolean | true | false | 是否按照辐射状布局。若 `radial` 为 `true`，建议 `direction` 设置为 `'LR'` 或 `'RL'`：
| +| direction | String | 'TB' / 'BT' / 'LR' / 'RL' / 'H' / 'V' | 'LR' | The direction of layout.
- TB —— Root is on the top, layout from the top to the bottom
- BT —— Root is on the bottom, layout from the bottom to the top

> (Left)TB. (Right)BT.
- LR —— Root is on the left, layout from the left to the right
- RL —— Root is on the right, layout from the right to the left

> (Left)LR. (Right)RL.
- H —— Root is on the middle, layout in horizontal symmetry.
- V —— Root is on the middle, layout in vertical symmetry.

> (Left)H. (Right)V. | +| nodeSep | Number | 50 | 0 | Node separation | +| rankSep | Number | 100 | 0 | Level separation | +| radial | Boolean | true | false | Wheter layout the graph in radial style. If `radial` is `true`, we recommend to set `direction` to `'LR'` or `'RL'`:
| - #### indented -**描述**：缩进树布局。每个元素会占一行/一列。
+**Description**: Indented layout represents the hierarchy by indent between them. Each node will take a row/column. It is appropriate for file directory.
-**API**：[Indented API](https://www.yuque.com/antv/g6/hl4syb)
**参数**： +**API**: [Indented API](/en/docs/api/layout/TreeGraph/#indented)
**Configuration**: -| 参数名 | 类型 | 示例 / 可选值 | 默认值 | 说明 | +| Name | Type | Example/Options | Default | Description | | --- | --- | --- | --- | --- | -| direction | String | 'LR' / 'RL' / 'H' | 'LR' | layout 的方向。
'LR' —— 根节点在左，往右布局（下图左）
'RL' —— 根节点在右，往左布局（下图中）
'H' —— 根节点在中间，水平对称布局（下图右）
indented1indented2indented3 | -| indent | Number | 80 | 20 | 列间间距 | -| getHeight | Function | (d) => {
  // d 是一个节点
  return 10;
} | undefined | 节点高度的回调函数 | -| getWidth | Function | (d) => {
  // d 是一个节点
  return 20;
} | undefined | 节点宽度的回调函数 | -| getSide | Function | (d) => {
  // d 是一个节点
  return 'left';
} | undefined | 节点放置在根节点左侧或右侧的回调函数，仅对与根节点直接相连的节点有效，设置后将会影响被设置节点的所有子孙节点 | +| direction | String | 'LR' / 'RL' / 'H' | 'LR' | layout direction
'LR' —— Root is on the left, layout from the left to the right(left image below)
'RL' —— Root is on the right, layout from the right to the left(center image below)
'H' —— Root is on the middle, layout in horizontal symmetry(right image below)
indented1indented2indented3 | +| indent | Number | 80 | 20 | Colunm separation | +| getHeight | Function | (d) => {
  // d is a node
  return 10;
} | undefined | The height of each node | +| getWidth | Function | (d) => {
  // d is a node
  return 20;
} | undefined | The width of each node | +| getSide | Function | (d) => {
  // d is a node
  return 'left';
} | undefined | The callback function of node position(left or right of root node). Only affects the nodes which are connected to the root node directly. And the descendant nodes will be placed according to it | - #### mindmap -**描述**：脑图布局。深度相同的节点将会被放置在同一层，与 compactBox 不同的是，布局不会考虑节点的大小。

**API**：[Mindmap API](https://www.yuque.com/antv/g6/wk3mh8)
**参数**： +**Description**: Mindmap arranged the nodes with same depth on the same level. Different from compactBox, it does not consider the size of nodes while doing layout.

**API**: [Mindmap API](/en/docs/api/layout/TreeGraph/#mindmap)
**Configuration**: -| 参数名 | 类型 | 示例 / 可选值 | 默认值 | 说明 | +| Name | Type | Example/Options | Default | Description | | --- | --- | --- | --- | --- | -| direction | String | 'H' / 'V' | 'H' | layout 的方向。
- H：horizontal（水平）—— 根节点的子节点分成两部分横向放置在根节点左右两侧

- V：vertical （竖直）—— 将根节点的所有孩子纵向排列
| -| getHeight | Function | (d) => {
  // d 是一个节点
  return 10;
} | undefined | 节点高度的回调函数 | -| getWidth | Function | (d) => {
  // d 是一个节点
  return 20;
} | undefined | 节点宽度的回调函数 | -| getVGap | Function | (d) => {
  // d 是一个节点
  return 100;
} | 18 | 节点纵向间距的回调函数 | -| getHGap | Function | (d) => {
  // d 是一个节点
  return 50;
} | 18 | 节点横向间距的回调函数 | -| getSide | String | Function | (d) => {
  // d 是一个节点
  return 'left';
} | 'right' | 节点排布在根节点的左侧/右侧。若设置了该值，则所有节点会在根节点同一侧，即 direction = 'H' 不再起效。若该参数为回调函数，则可以指定每一个节点在根节点的左/右侧 | +| direction | String | 'H' / 'V' | 'H' | layout direction
- H: Root is on the middle, layout in horizontal symmetry.

- V: Root is on the middle, layout in vertical symmetry.
| +| getHeight | Function | (d) => {
  // d is a node
  return 10;
} | undefined | The height of each node | +| getWidth | Function | (d) => {
  // d is a node
  return 20;
} | undefined | The width of each node | +| getVGap | Function | (d) => {
  // d is a node
  return 100;
} | 18 | The vertical separation of nodes | +| getHGap | Function | (d) => {
  // d is a node
  return 50;
} | 18 | The horizontal separation of nodes | +| getSide | String | Function | (d) => {
  // d is a node
  return 'left';
} / 'right' | The callback function of node position(left or right of root node). Only affects the nodes which are connected to the root node directly. And the descendant nodes will be placed according to it | - -## 布局的切换机制 -G6 提供了两种关于布局的切换机制： +## Layout Transformation Mechanism +G6 provides two layout transformations: -- `updateLayout(params)`：布局方法或参数的切换 -- `changeData()`：数据的切换 +- `updateLayout(params)`: Layout methods and configurations transformation; +- `changeData()`: Data transformation. - -### 布局方法或参数切换 -**接口定义：** +### Layout Methods and Configuration Transformation +**Interface Definition:** ```javascript /** - * 更换布局或布局参数 - * @param {String | object} cfg 新布局配置项 - * 若 cfg 为 String 或含有 type 字段，且与之前的布局方法不同时将会更换布局 - * 否则只是更新原有布局的参数 + * Change the layout or its configurations + * @param {String | object} cfg New layout configurations + * If the cfg is a String or an object with the property type, and the type is different from the current layout method, the layout method will be changed into the new one; + * Only change the configurations for the current layout otherwise */ updateLayout(cfg); ``` -**布局方法切换：**
若参数 `cfg` 为 `String` 或是含有 `type` 字段的对象，且与之前的布局方法名不同时将会更换布局。 +**Change the Layout Method:**
If the `cfg` is a `String` or an object with property `type`, and the type is different from the current layout method, the layout method will be changed into the new one; -**布局参数切换：**
若参数 `cfg` 是对象且其中不含有 `type` 字段，或指定的布局方法名称与之前的布局方法相同，则保持原有布局方法，仅更新该布局的参数。 +**Change the Configurations Only:**
If the `cfg` is an object without property `type`, or the `type` is the same as the current layout method, only the configurations for the current layout will be changed. - -### 数据切换 -**接口定义：** +### Data Transformation +**Interface Definition:** ```javascript /** - * 更改源数据，根据新数据重新渲染视图 - * @param {object} data 源数据 + * Change the source data, render the graph with new data + * @param {object} data source data * @return {object} this */ changeData(data); ``` - -### 切换示例 - -#### 期待效果 -初始化时使用默认 random 布局，2000 ms 后更换为允许节点重叠的 force 布局，4000 ms 后更换为不允许节点重叠的 force 布局，6000 ms 后更换数据为 `data2`。
- -#### 完整代码 +### Transformation Example +#### Expected Effect +In the first stage, the graph is arranged by random layout. Transform to force layout with node overlappings after 2000ms, force layout without node overlappings after 4000ms, change data to `data2` after 6000ms.
+#### Complete Code ```html @@ -387,32 +381,32 @@ changeData(data); }; const graph = new G6.Graph({ - container: 'mountNode', // String | HTMLElement，必须，容器 id 或容器本身 - width: 300, // Number，必须，图的宽度 - height: 300, // Number，必须，图的高度 - animate: true // Boolean，可选，切换布局时是否使用动画过度 + container: 'mountNode', // String | HTMLElement, Required, the id of the container or the container object + width: 300, // Number, Required, The width of the graph + height: 300, // Number, Required, The height of the graph + animate: true // Boolean, whether to activate the animation while changing the layout }); - // 读取数据和渲染 + // Load data and render graph.data(data); graph.render(); - // 2000 ms 后切换为允许节点重叠的 force 布局 + // Transform to force layout with node overlappings in 2000 ms setTimeout(() => { - graph.updateLayout('force'); // 参数为 String 代表布局名称 + graph.updateLayout('force'); }, 8000); - // 4000 ms 后切换为不允许节点重叠且边长为 100 的 force 布局。 + // Transform to force layout without node overlappings in 4000 ms setTimeout(() => { graph.updateLayout({ - type: 'force', // 布局名称 - preventOverlap: true, // 布局参数，是否允许重叠 - nodeSize: 40, // 布局参数，节点大小，用于判断节点是否重叠 - linkDistance: 100 // 布局参数，边长 + type: 'force', // Layout name + preventOverlap: true, // Whether to prevent the node overlappings + nodeSize: 40, // The node size for collide detection + linkDistance: 100 // The edge length }); }, 10000); - // 6000 ms 后切换数据为 data2 + // Change the data to data2 in 6000 ms setTimeout(() => { graph.changeData(data2); }, 12000); @@ -421,27 +415,26 @@ changeData(data); ``` - -## 子图布局 -目前，子图布局独立与全局布局的思路，与 graph 不挂钩，直接使用实例化布局方法的方式，灌入子图数据，通过布局将位置写到相应数据中。这种机制还可供外部的全局布局使用，即使不用 G6 渲染，也可以计算节点布局后的位置。但与萧庆讨论后，决定这种方式暂时不透出够用户。在子图布局上，这种机制后续需要修改，并与全局布局思路统一（ graph，controller ）。 +## Subgraph Layout - -### 使用方法 +At present, the subgraph layout mechanism is independent to the graph layout. You can instantiate the layout method and load the data of subgraph onto the layout instance. This mechanism allows users to utilize G6's layout algorithms to calculate the node positions, and render the graph with another rendering engine. + +### Usage ```javascript -// 实例化布局 +// Instantiate the Layout const subgraphLayout = new G6.Layout['force']({ center: [ 500, 450 ] }); -// 初始化布局，灌入子图数据 +// Initialize the layout with sugbraph data subgraphLayout.init({ 'nodes': subGraphNodes, 'edges': subGraphEdges }); -//执行布局 +// Execute the layout subgraphLayout.execute(); -// 图实例根据数据更新节点位置 +// Update the node positions after subgraph layout graph.positionsAnimate(); ``` diff --git a/docs/manual/middle/layout.zh.md b/docs/manual/middle/layout.zh.md index ef18cd298f..65210ad40e 100644 --- a/docs/manual/middle/layout.zh.md +++ b/docs/manual/middle/layout.zh.md @@ -4,9 +4,9 @@ order: 7 --- ## 简介 -图布局是指图中节点的排布方式，根据图的数据结构不同，布局可以分为两类：一般图布局、树图布局。G6 为这两类图都内置了一些常用的图布局算法。使用内置的图布局可以完成[布局的参数、方法、数据的切换](#FCFKL)等。 +图布局是指图中节点的排布方式，根据图的数据结构不同，布局可以分为两类：一般图布局、树图布局。G6 为这两类图都内置了一些常用的图布局算法。使用内置的图布局可以完成[布局的参数、方法、数据的切换](#布局的切换机制)等。G6 还提供了一般图布局的 web-worker 机制，在大规模图布局中使用该机制可以使布局计算不阻塞页面。 -除了内置布局方法外，一般图布局还支持 [自定义布局](../advanced/custom-layout.zh) 机制。 +除了内置布局方法外，一般图布局还支持 [自定义布局](/zh/docs/manual/advanced/custom-layout) 机制。 事实上，G6 的布局是自由的，内置布局算法仅仅是操作了数据中节点的 `x` 和 `y` 值。因此，除了使用内置布局以及自定义的一般图布局外，用户还可以使用外部图布局算法，计算节点位置后赋值到数据中节点的 `x` 和 `y` 字段上，G6 便可以根据该位置信息进行绘制。 @@ -16,27 +16,27 @@ order: 7 ### 一般图 Graph -- [Random Layout](#AIkrd)：随机布局； -- [Force Layout](#B6ZYA)：经典力导向布局； -- [Fruchterman Layout](#TirhH)：Fruchterman 布局，一种力导布局； -- [Circular Layout](#0lVZj)：环形布局； -- [Radial Layout](#lALX0)：辐射状布局； -- [MDS Layout](#RBhhk)：高维数据降维算法布局； -- [Dagre Layout](#RUeWF)：层次布局； -- [Concentric Layout](#4JMfP)：同心圆布局； -- [Grid Layout](#XG0RD)：网格布局。 +- [Random Layout](#random)：随机布局； +- [Force Layout](#force)：经典力导向布局； +- [Fruchterman Layout](#fruchterman)：Fruchterman 布局，一种力导布局； +- [Circular Layout](#circular)：环形布局； +- [Radial Layout](#radial)：辐射状布局； +- [MDS Layout](#mds)：高维数据降维算法布局； +- [Dagre Layout](#dagre)：层次布局； +- [Concentric Layout](#concentric)：同心圆布局； +- [Grid Layout](#grid)：网格布局。 ### 树图 TreeGraph -- [CompactBox Layout](#AyYPj)：紧凑树布局； -- [Dendrogram Layout](#sH1z0)：树状布局（叶子节点布局对齐到同一层）； -- [Intended Layout](#04ZZ5)：缩进布局； -- [Mindmap Layout](#AOAs2)：脑图布局。 +- [CompactBox Layout](#compactbox)：紧凑树布局； +- [Dendrogram Layout](#dendrogram)：树状布局（叶子节点布局对齐到同一层）； +- [Intended Layout](#intended)：缩进布局； +- [Mindmap Layout](#mindmap)：脑图布局。 ## 一般图 Graph ### 配置一般图布局 -用户可以通过在实例化图时使用图的配置项 `layout` 指定布局方法。下面代码在实例化图时设置了布局方法为 `type: 'force'`，即经典力导向图布局。并设置了参数 `preventOverlap: true` 和 `nodeSize: 30`，表示希望节点不重叠。节点大小 `nodeSize` 用于算法中判断节点是否重叠，更多配置项见 [Graph 各布局的配置项](https://www.yuque.com/antv/g6/qopkkg#a73ba)。 +用户可以通过在实例化图时使用图的配置项 `layout` 指定布局方法。下面代码在实例化图时设置了布局方法为 `type: 'force'`，即经典力导向图布局。并设置了参数 `preventOverlap: true` 和 `nodeSize: 30`，表示希望节点不重叠。节点大小 `nodeSize` 用于算法中判断节点是否重叠，更多配置项见各布局的配置项。 ```javascript const graph = new G6.Graph({ ... // 其他配置项 @@ -44,76 +44,81 @@ const graph = new G6.Graph({ type: 'force', preventOverlap: true, nodeSize: 30, - ... // 其他配置 + // ... // 其他配置 } }); ``` +除了每种布局方法各自的配置项外，所有布局方法都可以在上面代码的 `layout` 中配置 `workerEnabled: true` 以开启布局的 web-worker 机制。开启后图的布局计算过程将不会阻塞页面。 + 当实例化图时没有配置布局时： - 若数据中节点有位置信息（`x` 和 `y`），则按照数据的位置信息进行绘制； - 若数据中节点没有位置信息，则默认使用 Random Layout 进行布局。 ### 一般图布局方法 -图布局通用 API：[Layout API](https://www.yuque.com/antv/g6/agbmu2)。 +图布局通用 API：[Layout API](/zh/docs/api/layout/Graph)。 #### Random
**描述**：随机布局。 -
**API**：[Random API](https://www.yuque.com/antv/g6/nrxlhg) +
**API**：[Random API](/zh/docs/api/layout/Graph#random)
**参数**： | 参数名 | 类型 | 示例 | 默认值 | 说明 | | --- | --- | --- | --- | --- | -| center | Array | [ 0, 0 ] | 图的中心 | 随机布局的中心 | +| center | Array | [ 0, 0 ] | 图的中心 | 布局的中心 | | width | Number | 300 | 图的宽 | | | height | Number | 300 | 图的高 | | +| workerEnabled | Boolean | true / false | false | 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 | #### Force
**描述**：经典力导向布局。 -
**API**：[Force API](https://www.yuque.com/antv/g6/rllgdl) -
**参数**：与 d3 的力导布局参数相对应。 +
**API**：[Force API](/zh/docs/api/layout/Graph#force) +
**参数**：与 d3.js 的力导布局参数相对应。 | 参数名 | 类型 | 示例 | 默认值 | 说明 | | --- | --- | --- | --- | --- | -| center | Array | [ 0, 0 ] | 图的中心 | 随机布局的中心 | -| linkDistance | Number | Function | 示例1: 50 
示例2:
d => {
  // d 是一条边
  if (d.id === 'edge1') {
    return 100;
  }
  return 50;
} | 50 | 边长。可以使用回调函数的形式对不同对边定义不同边长（如示例2） | -| nodeStrength | Number | Function | 示例1: -30 
示例2:
d => {
  // d 是一个节点
  if (d.id === 'node1') {
    return -100;
  }
  return -30;
} | null | 节点作用力，正数代表节点之间的引力作用，负数代表节点之间的斥力作用。可以使用回调函数的形式对不同对节点定义不同节点作用力（如示例2） | +| center | Array | [ 0, 0 ] | 图的中心 | 布局的中心 | +| linkDistance | Number / Function | 示例1: 50 
示例2:
d => {
  // d 是一条边
  if (d.id === 'edge1') {
    return 100;
  }
  return 50;
} | 50 | 边长。可以使用回调函数的形式对不同对边定义不同边长（如示例2） | +| nodeStrength | Number / Function | 示例1: -30 
示例2:
d => {
  // d 是一个节点
  if (d.id === 'node1') {
    return -100;
  }
  return -30;
} / null | 节点作用力，正数代表节点之间的引力作用，负数代表节点之间的斥力作用。可以使用回调函数的形式对不同对节点定义不同节点作用力（如示例2） | | edgeStrength | Number | 示例1: 1 
示例2:
d => {
  // d 是一个节点
  if (d.id === 'node1') {
    return 10;
  }
  return 1;
} | null | 边的作用力，默认根据节点的出入度自适应。可以使用回调函数的形式对不同对节点定义不同边作用力（如示例2） | | preventOverlap | Boolean | false | false | 是否防止重叠，必须配合属性 `nodeSize` ，只有设置了与当前图节点大小相同的 `nodeSize` 值，才能够进行节点重叠的碰撞检测。若未设置 `nodeSize` ，则根据节点数据中的 `size` 进行碰撞检测。若二者都未设置，则默认以 10 为节点大小进行碰撞检测 | -| nodeSize | Array | Number | 20 | undefined | 节点大小（直径）。用于碰撞检测。
若不指定，则根据传入的数据节点中的 `size` 字段计算。若即不指定，节点中也没有 `size`，则默认大小为 10 | -| nodeSpacing

3.1.6 后支持 | Number / Function | 示例 1 : 10
示例 2 : 
d => {
  // d 是一个节点
  if (d.id === 'node1') {
    return 100;
  }
  return 10;
} | 0 |
`preventOverlap` 为 `true` 时生效，防止重叠时节点边缘间距的最小值。可以是回调函数，为不同节点设置不同的最小间距，如示例 2 所示
| -| alphaDecay | Number | 0.03 | 0.028 | 迭代阈值的衰减率。[0, 1]，0.028 对应迭代书为 300 | +| nodeSize | Array / Number | 20 | undefined | 节点大小（直径）。用于碰撞检测。
若不指定，则根据传入的数据节点中的 `size` 字段计算。若即不指定，节点中也没有 `size`，则默认大小为 10 | +| nodeSpacing

| Number / Function | 示例 1 : 10
示例 2 : 
d => {
  // d 是一个节点
  if (d.id === 'node1') {
    return 100;
  }
  return 10;
} | 0 |
`preventOverlap` 为 `true` 时生效，防止重叠时节点边缘间距的最小值。可以是回调函数，为不同节点设置不同的最小间距，如示例 2 所示
| +| alphaDecay | Number | 0.03 | 0.028 | 迭代阈值的衰减率。范围 [0, 1]，0.028 对应迭代数为 300 | | alphaMin | Number | 0.03 | 0.001 | 停止迭代的阈值 | | alpha | Number | 0.1 | 0.3 | 当前阈值 | -| collideStrength | Number | 0.8 | 1 | 防止重叠的力强度，[0, 1]。 | +| collideStrength | Number | 0.8 | 1 | 防止重叠的力强度，范围 [0, 1]。 | | forceSimulation | Object | | null | 自定义 force 方法，若不指定，则使用 d3 的方法。 | | onTick | Function | | {} | 每一次迭代的回调函数 | | onLayoutEnd | Function | | {} | 布局完成后的回调函数 | +| workerEnabled | Boolean | true / false | false | 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 | #### Fruchterman
**描述**：Fruchterman 布局，一种力导布局。 -
**API**：[Fruchterman API](https://www.yuque.com/antv/g6/vzqn07) +
**API**：[Fruchterman API](/zh/docs/api/layout/Graph/#fruchterman)
**参数**： | 参数名 | 类型 | 示例 | 默认值 | 说明 | | --- | --- | --- | --- | --- | -| center | Array | [ 0, 0 ] | 图的中心 | 随机布局的中心 | +| center | Array | [ 0, 0 ] | 图的中心 | 布局的中心 | | maxIteration | Number | 1000 | 1000 | 最大迭代次数 | | gravity | Number | 10 | 10 | 重力大小，影响布局的紧凑程度 | | speed | Number | 1 | 1 | 每次迭代节点移动的速度。速度太快可能会导致强烈震荡 | | clustering | Boolean | false | false | 是否按照聚类布局 | | clusterGravity | Number | 30 | 10 | 聚类内部的重力大小，影响聚类的紧凑程度 | +| workerEnabled | Boolean | true / false | false | 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 | + - #### Circular @@ -121,76 +126,82 @@ const graph = new G6.Graph({
**描述**：环形布局。 -
**API**：[Circular API](https://www.yuque.com/antv/g6/ml1qe3) +
**API**：[Circular API](/zh/docs/api/layout/Graph/#circular)
**参数**： | 参数名 | 类型 | 示例/可选值 | 默认值 | 说明 | | --- | --- | --- | --- | --- | -| center | Array | [ 0, 0 ] | 图的中心 | 随机布局的中心 | -| radius | Number | 50 | null | 圆的半径。若设置了 radius，则 startRadius 与 endRadius 不生效 | +| center | Array | [ 0, 0 ] | 图的中心 | 布局的中心 | +| radius | Number | 50 | null | 圆的半径。若设置了 `radius`，则 `startRadius` 与 `endRadius` 不生效 | | startRadius | Number | 10 | null | 螺旋状布局的起始半径 | | endRadius | Number | 100 | null | 螺旋状布局的结束半径 | | clockwise | Boolean | true | true | 是否顺时针排列 | -| divisions | Number | 3 | 1 | 节点在环上的分段数（几个段将均匀分布），在 endRadius - startRadius != 0 时生效 | +| divisions | Number | 3 | 1 | 节点在环上的分段数（几个段将均匀分布），在 `endRadius - startRadius != 0` 时生效 | | ordering | String | null | 'topology' | 'degree' | null | 节点在环上排序的依据。默认 null 代表直接使用数据中的顺序。'topology' 按照拓扑排序。'degree' 按照度数大小排序 | | angleRatio | Number | 1 | 1 | 从第一个节点到最后节点之间相隔多少个 2*PI | +| workerEnabled | Boolean | true / false | false | 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 | + - #### Radial
**描述**：辐射状布局。 -
**API**：[Radial API](https://www.yuque.com/antv/g6/ngp0vg#7ZOs7) +
**API**：[Radial API](/zh/docs/api/layout/Graph/#radial)
**参数**： | 参数名 | 类型 | 示例 | 默认值 | 说明 | | --- | --- | --- | --- | --- | -| center | Array | [ 0, 0 ] | 图的中心 | 随机布局的中心 | +| center | Array | [ 0, 0 ] | 图的中心 | 布局的中心 | | linkDistance | Number | 50 | 50 | 边长 | | maxIteration | Number | 1000 | 1000 | 停止迭代到最大迭代数 | -| focusNode | String | Object | 'node1' | null | 中心点，默认为数据中第一个节点。可以传入节点 id 或节点本身。 | +| focusNode | String / Object | 'node1' | null | 中心点，默认为数据中第一个节点。可以传入节点 id 或节点本身。 | | unitRadius | Number | 10 | 100 | 每一圈距离上一圈的距离。默认填充整个画布，即根据图的大小决定 | -| preventOverlap | Boolean | false | false | 是否防止重叠，必须配合属性 `nodeSize` ，只有设置了与当前图节点大小相同的 `nodeSize` 值，才能够进行节点重叠的碰撞检测。
3.1.6 后支持：
若未设置 `nodeSize`，则将会根据数据中节点的 size 字段数值进行碰撞检测计算。若二者皆未设置，则以节点大小为 10 进行计算。 | +| preventOverlap | Boolean | false | false | 是否防止重叠，必须配合属性 `nodeSize` ，只有设置了与当前图节点大小相同的 `nodeSize` 值，才能够进行节点重叠的碰撞检测。
：
若未设置 `nodeSize`，则将会根据数据中节点的 `size` 字段数值进行碰撞检测计算。若二者皆未设置，则以节点大小为 `10` 进行计算。 | | maxPreventOverlapIteration | Number | 500 | 200 | 防止重叠步骤的最大迭代次数 | -| nodeSize | Number | 10 | 10 | 节点大小（直径）。用于防止节点重叠时的碰撞检测。
3.1.6 后支持：
若未设置则使用数据中节点的 `size` 字段数值进行碰撞检测计算。若二者皆未设置，则以节点大小为 10 进行计算。 | -| nodeSpacing
3.1.6 后支持 | Number | Function | 示例 1 : 10
示例 2 : 
d => {
  // d 是一个节点
  if (d.id === 'node1') {
    return 100;
  }
  return 10;
} | 0 |
`preventOverlap` 为 `true` 时生效，防止重叠时节点边缘间距的最小值。可以是回调函数，为不同节点设置不同的最小间距，如示例 2 所示
| -| strictRadial | Boolean | true | false | 是否必须是严格的 radial 布局，即每一层的节点严格布局在一个环上。`preventOverlap` 为 `true` 时生效。详见 [Radial-strictRadial API](https://www.yuque.com/antv/g6/ngp0vg#7ZOs7)
- 当 `preventOverlap` 为 `true`，且 `strictRadial` 为 `false` 时，有重叠的节点严格沿着所在的环展开，但在一个环上若节点过多，可能无法完全避免节点重叠。
- 当 `preventOverlap` 为 `true`，且 `strictRadial` 为 `true` 时，允许同环上重叠的节点不严格沿着该环布局，可以在该环的前后偏移以避免重叠。
| +| nodeSize | Number | 10 | 10 | 节点大小（直径）。用于防止节点重叠时的碰撞检测。
：
若未设置则使用数据中节点的 `size` 字段数值进行碰撞检测计算。若二者皆未设置，则以节点大小为 `10` 进行计算。 | +| nodeSpacing
| Number / Function | 示例 1 : 10
示例 2 : 
d => {
  // d 是一个节点
  if (d.id === 'node1') {
    return 100;
  }
  return 10;
} | 0 |
`preventOverlap` 为 `true` 时生效，防止重叠时节点边缘间距的最小值。可以是回调函数，为不同节点设置不同的最小间距，如示例 2 所示
| +| strictRadial | Boolean | true | false | 是否必须是严格的 radial 布局，即每一层的节点严格布局在一个环上。`preventOverlap` 为 `true` 时生效。详见 [Radial-strictRadial API](/zh/docs/api/layout/Graph/#strictradial)
- 当 `preventOverlap` 为 `true`，且 `strictRadial` 为 `false` 时，有重叠的节点严格沿着所在的环展开，但在一个环上若节点过多，可能无法完全避免节点重叠。
- 当 `preventOverlap` 为 `true`，且 `strictRadial` 为 `true` 时，允许同环上重叠的节点不严格沿着该环布局，可以在该环的前后偏移以避免重叠。
| +| sortBy | String | 'data' / 'cluster' | undefined | 同层节点布局后相距远近的依据。默认 `undefined` ，表示根据数据的拓扑结构（节点间最短路径）排布，即关系越近/点对间最短路径越小的节点将会被尽可能排列在一起；`'data'` 表示按照节点在数据中的顺序排列，即在数据顺序上靠近的节点将会尽可能排列在一起；也可以指定为节点数据中的某个字段名，例如 `'cluster'`、`'name'` 等（必须在数据中存在） | +| sortStrength | Number | 10 | 10 | 同层节点根据 `sortBy` 排列的强度，数值越大，`sortBy` 指定的方式计算出距离越小的越靠近。`sortBy` 不为 `undefined` 时生效 | +| workerEnabled | Boolean | true / false | false | 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 | + - #### MDS -
**描述**：高维数据降维算法布局。
**API**：[MDS API](https://www.yuque.com/antv/g6/kbvo7q)
**参数**： +
**描述**：高维数据降维算法布局。
**API**：[MDS API](/zh/docs/api/layout/Graph/#mds)
**参数**： | 参数名 | 类型 | 示例 | 默认值 | 说明 | | --- | --- | --- | --- | --- | -| center | Array | [ 0, 0 ] | 图的中心 | 随机布局的中心 | +| center | Array | [ 0, 0 ] | 图的中心 | 布局的中心 | | linkDistance | Number | 50 | 50 | 边长 | +| workerEnabled | Boolean | true / false | false | 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 | + - #### Dagre -
**描述**：层次布局。
**API**：[Dagre API](https://www.yuque.com/antv/g6/fkhp3c)
**参数**： +
**描述**：层次布局。
**API**：[Dagre API](/zh/docs/api/layout/Graph/#dagre)
**参数**： -| 参数名 | 类型 | 示例 / 可选值 | 默认值 | 说明 | +| 参数名 | 类型 | 示例/可选值 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | rankdir | String | 'TB' / 'BT' / 'LR' / 'RL' | 'TB' | layout 的方向。T：top；B：bottom；L：left；R：right | | align | String | 'UL' / 'UR' / 'DL' / 'DR' | 'UL' | 节点对齐方式。U：upper；D：down；L：left；R：right | -| nodesep | Number | 40 | 50 | 在`rankdir` 为 'TB' 或 'BT' 时代表节点水平间距（px）；在`rankdir` 为 'LR' 或 'RL' 时代表节点的竖直间距。优先级高于 `nodesepFunc` | -| ranksep | Number | 40 | 50 | 层间距（px）。在`rankdir` 为 'TB' 或 'BT' 时是竖直方向相邻层间距；在`rankdir` 为 'LR' 或 'RL' 时代表水平方向相邻层间距。优先级高于 `ranksepFunc` | -| nodesepFunc

3.1.6 后支持 | Function | d => {
  // d 是一个节点
  if (d.id === 'node1') {
    return 100;
  }
  return 10;
} | undefined | 节点水平间距（px）的回调函数，通过该参数可以对不同节点设置不同的节点间距。在`rankdir` 为 'TB' 或 'BT' 时是节点的水平间距；在`rankdir` 为 'LR' 或 'RL' 时是节点的竖直间距。优先级低于 `nodesep`，即若设置了 `nodesep`，则 `nodesepFunc` 不生效 | -| ranksepFunc

3.1.6 后支持 | Function | d => {
  // d 是一个节点
  if (d.id === 'node1') {
    return 100;
  }
  return 10;
} | undefined | 层间距（px）的回调函数，通过该参数可以对不同节点设置不同的层间距。在`rankdir` 为 'TB' 或 'BT' 时是竖直方向相邻层间距；在`rankdir` 为 'LR' 或 'RL' 时代表水平方向相邻层间距。优先级低于 `ranksep`，即若设置了 `ranksep`，则 `ranksepFunc` 不生效 | +| nodesep | Number | 40 | 50 | 在 `rankdir` 为 `'TB'` 或 `'BT'` 时代表节点水平间距(px)；在 `rankdir` 为 `'LR'` 或 `'RL'` 时代表节点的竖直间距。优先级高于 `nodesepFunc` | +| ranksep | Number | 40 | 50 | 层间距（px）。在`rankdir` 为 `'TB'` 或 `'BT'` 时是竖直方向相邻层间距；在`rankdir` 为 `'LR'` 或 `'RL'` 时代表水平方向相邻层间距。优先级高于 `ranksepFunc` | +| nodesepFunc

| Function | d => {
  // d 是一个节点
  if (d.id === 'node1') {
    return 100;
  }
  return 10;
} | undefined | 节点水平间距（px）的回调函数，通过该参数可以对不同节点设置不同的节点间距。在`rankdir` 为 'TB' 或 'BT' 时是节点的水平间距；在`rankdir` 为 'LR' 或 'RL' 时是节点的竖直间距。优先级低于 `nodesep`，即若设置了 `nodesep`，则 `nodesepFunc` 不生效 | +| ranksepFunc

| Function | d => {
  // d 是一个节点
  if (d.id === 'node1') {
    return 100;
  }
  return 10;
} | undefined | 层间距（px）的回调函数，通过该参数可以对不同节点设置不同的层间距。在`rankdir` 为 'TB' 或 'BT' 时是竖直方向相邻层间距；在`rankdir` 为 'LR' 或 'RL' 时代表水平方向相邻层间距。优先级低于 `ranksep`，即若设置了 `ranksep`，则 `ranksepFunc` 不生效 | | controlPoints | Boolean | true | true | 是否保留布局连线的控制点 | +| workerEnabled | Boolean | true / false | false | 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 | + - #### Concentric -
注：该算法参考 [cytoscape.js](https://github.com/cytoscape/cytoscape.js)，遵守 MIT 开源协议。
**描述**：同心圆布局。
**API**：[Concentric API](https://www.yuque.com/antv/g6/lx038n)
**参数**： +
注：该算法参考 cytoscape.js，遵守 MIT 开源协议。
**描述**：同心圆布局。
**API**：[Concentric API](/zh/docs/api/layout/Graph/#concentric)
**参数**： -| 参数名 | 类型 | 示例 / 可选值 | 默认值 | 说明 | +| 参数名 | 类型 | 示例/可选值 | 默认值 | 说明 | | --- | --- | --- | --- | --- | -| center | Array | [ 0, 0 ] | 图的中心 | 随机布局的中心 | +| center | Array | [ 0, 0 ] | 图的中心 | 布局的中心 | | nodeSize | Number | 30 | 30 | 节点大小（直径）。用于防止节点重叠时的碰撞检测 | | minNodeSpacing | Number | 10 | 10 | 环与环之间最小间距，用于调整半径 | | preventOverlap | Boolean | false | false | 是否防止重叠，必须配合属性 `nodeSize` ，只有设置了与当前图节点大小相同的 `nodeSize` 值，才能够进行节点重叠的碰撞检测。若未设置 `nodeSize` ，则将根据节点数据中的 `size` 进行碰撞检测。若二者都未设置，则默认以 30 为节点大小进行碰撞检测 | @@ -199,32 +210,32 @@ const graph = new G6.Graph({ | startAngle | Number | 3.14 | 3 / 2 * Math.PI | 开始放置节点的弧度 | | clockwise | Boolean | false | false | 是否按照顺时针顺序 | | maxLevelDiff | Number | 0.5 | undefined | 每一层同心值的求和。若为 undefined，则将会被设置为 maxValue / 4 ，其中 maxValue 为最大的排序依据的属性值。例如，若 sortBy='degree'，则 maxValue 为所有节点中度数最大的节点的度数 | -| sortBy | String | 'degree' | 'property1' | 'weight' | ... | undefined | 指定的节点排序的依据（节点属性名）。该属性值高的放在中心。如果是 `sortBy` 为 `undefined` 则会计算节点度数，度数最高的放在中心。
| +| sortBy | String | 'degree' / 'property1' / 'weight' / ... | undefined | 指定的节点排序的依据（节点属性名）。该属性值高的放在中心。如果是 `sortBy` 为 `undefined` 则会计算节点度数，度数最高的放在中心。
| +| workerEnabled | Boolean | true / false | false | 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 | + - #### Grid -
注：该算法参考 [cytoscape.js](https://github.com/cytoscape/cytoscape.js)，遵守 MIT 开源协议。
**描述**：网格布局。
**API**：[Grid API](https://www.yuque.com/antv/g6/wn4kg9)
**参数**： +
注：该算法参考 cytoscape.js，遵守 MIT 开源协议。
**描述**：网格布局。
**API**：[Grid API](/zh/docs/api/layout/Graph/#grid)
**参数**： -| 参数名 | 类型 | 示例 / 可选值 | 默认值 | 说明 | +| 参数名 | 类型 | 示例/可选值 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | begin | Array | [ 0, 0 ] | [ 0, 0 ] | 网格开始位置（左上角） | | preventOverlap | Boolean | false | false | 是否防止重叠，必须配合属性 `nodeSize` ，只有设置了与当前图节点大小相同的 `nodeSize` 值，才能够进行节点重叠的碰撞检测。若未设置 `nodeSize` ，则将根据节点数据中的 `size` 进行碰撞检测。若二者都未设置，则默认以 30 为节点大小进行碰撞检测 | -| preventOverlapPadding | Number | 10 | 10 | 避免重叠时节点的间距 padding。preventOverlap 为 true 时生效 | +| preventOverlapPadding | Number | 10 | 10 | 避免重叠时节点的间距 padding。`preventOverlap` 为 `true` 时生效 | | nodeSize | Number | 30 | 30 | 节点大小（直径）。用于防止节点重叠时的碰撞检测 | -| condense | Boolean | false | false | 为 false 时表示利用所有可用画布空间，为 true 时表示利用最小的画布空间 | -| rows | Number | 5 | undefined | 网格的行数，为 undefined 时算法根据节点数量、布局空间、cals（若指定）自动计算 | -| cals | Number | 5 | undefined | 网格的列数，为 undefined 时算法根据节点数量、布局空间、rows（若指定）自动计算 | -| sortBy | String | 'degree' | 'property1' | 'weight' | ... | 'degree' | 指定排序的依据（节点属性名），数值越高则该节点被放置得越中心。若为 undefined，则会计算节点的度数，度数越高，节点将被放置得越中心 | +| condense | Boolean | false | false | 为 `false` 时表示利用所有可用画布空间，为 `true` 时表示利用最小的画布空间 | +| rows | Number | 5 | undefined | 网格的行数，为 undefined 时算法根据节点数量、布局空间、`cols`（若指定）自动计算 | +| cols | Number | 5 | undefined | 网格的列数，为 undefined 时算法根据节点数量、布局空间、`rows`（若指定）自动计算 | +| sortBy | String | 'degree' / 'property1' / 'weight' / ... | 'degree' | 指定排序的依据（节点属性名），数值越高则该节点被放置得越中心。若为 undefined，则会计算节点的度数，度数越高，节点将被放置得越中心 | +| workerEnabled | Boolean | true / false | false | 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 | - ## 树图 TreeGraph -由于树图特殊性，G6扩展出了 TreeGraph ，详细文档请见：[TreeGraph](https://www.yuque.com/antv/g6/treegraph) API。树布局是一种能很好展示有一定层次结构数据的布局方式。推荐使用 G6.TreeGraph 实现。 +由于树图特殊性，G6 扩展出了 TreeGraph ，详细文档请见：[TreeGraph](/zh/docs/api/layout/TreeGraph) API。树布局是一种能很好展示有一定层次结构数据的布局方式。推荐使用 G6.TreeGraph 实现。 - ### 配置树图布局 -与一般图 Graph 配置方法相似，通过实例化图时配置 `layout` 属性设置树的布局，还可以通过 `modes` 属性为树配置 [展开/收缩行为](https://www.yuque.com/antv/g6/treegraph#157b6823)。以下代码声明了一个实例，定义了布局为从左到右结构的基础树图，并且定义了展开收缩行为。 +与一般图 Graph 配置方法相似，通过实例化图时配置 `layout` 属性设置树的布局，还可以通过 `modes` 属性为树配置 [展开/收缩行为](/zh/docs/manual/middle/states/defaultBehavior/#collapse-expand)。以下代码声明了一个实例，定义了布局为从左到右结构的基础树图，并且定义了展开收缩行为。 ```javascript const graph = new G6.TreeGraph({ container: 'mountNode', @@ -243,18 +254,15 @@ const graph = new G6.TreeGraph({ } }); ``` - -### - -### 树图布局方法 - -#### compactBox -**描述**：紧凑树布局。从根节点开始，同一深度的节点在同一层，并且布局时会将节点大小考虑进去。

**API**：[CompactBox API](https://www.yuque.com/antv/g6/rufc7b)
**参数**： -| 参数名 | 类型 | 示例 / 可选值 | 默认值 | 说明 | +### 树图布局方法 +#### compactBox +**描述**：紧凑树布局。从根节点开始，同一深度的节点在同一层，并且布局时会将节点大小考虑进去。

**API**：[CompactBox API](/zh/docs/api/layout/TreeGraph/#compactbox-紧凑树布局)
**参数**： + +| 参数名 | 类型 | 示例/可选值 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | direction | String | 'TB' / 'BT' / 'LR' / 'RL' / 'H' / 'V' | 'LR' | layout 的方向。
- TB —— 根节点在上，往下布局
- BT —— 根节点在下，往上布局
    
（左）TB。（右）BT。
- LR —— 根节点在左，往右布局
- RL —— 根节点在右，往左布局
             
（左）LR。（右）RL。
- H —— 根节点在中间，水平对称布局
- V —— 根节点在中间，垂直对称布局
          
> （左）H。（右）V。 | -| getId | Function | (d) => {
  // d 是一个节点
  return d.id;
} | undefined | 节点 id 的回调函数 | +| getId | Function | (d) => {
  // d 是一个节点
  return d.id + 'node';
} | undefined | 节点 id 的回调函数 | | getHeight | Function | (d) => {
  // d 是一个节点
  return 10;
} | undefined | 节点高度的回调函数 | | getWidth | Function | (d) => {
  // d 是一个节点
  return 20;
} | undefined | 节点宽度的回调函数 | | getVGap | Function | (d) => {
  // d 是一个节点
  return 100;
} | undefined | 节点纵向间距的回调函数 | @@ -262,11 +270,10 @@ const graph = new G6.TreeGraph({ | radial | Boolean | true | false | 是否按照辐射状布局。若 `radial` 为 `true`，建议 `direction` 设置为 `'LR'` 或 `'RL'`： | - #### dendrogram -**描述**：生态树布局。不管数据的深度多少，总是叶节点对齐。不考虑节点大小，布局时将节点视为1个像素点。

**API**：[Dendrogram API](https://www.yuque.com/antv/g6/co00r6)
**参数**： +**描述**：生态树布局。不管数据的深度多少，总是叶节点对齐。不考虑节点大小，布局时将节点视为1个像素点。

**API**：[Dendrogram API](/zh/docs/api/layout/TreeGraph/#dendrogram-生态树布局)
**参数**： -| 参数名 | 类型 | 示例 / 可选值 | 默认值 | 说明 | +| 参数名 | 类型 | 示例/可选值 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | direction | String | 'TB' / 'BT' / 'LR' / 'RL' / 'H' / 'V' | 'LR' | layout 的方向。
- TB —— 根节点在上，往下布局
- BT —— 根节点在下，往上布局

> （左）TB。（右）BT。
- LR —— 根节点在左，往右布局
- RL —— 根节点在右，往左布局

> （左）LR。（右）RL。
- H —— 根节点在中间，水平对称布局
- V —— 根节点在中间，垂直对称布局

> （左）H。（右）V。 | | nodeSep | Number | 50 | 0 | 节点间距 | @@ -274,13 +281,12 @@ const graph = new G6.TreeGraph({ | radial | Boolean | true | false | 是否按照辐射状布局。若 `radial` 为 `true`，建议 `direction` 设置为 `'LR'` 或 `'RL'`：
| - #### indented **描述**：缩进树布局。每个元素会占一行/一列。
-**API**：[Indented API](https://www.yuque.com/antv/g6/hl4syb)
**参数**： +**API**：[Indented API](/zh/docs/api/layout/TreeGraph/#indented-缩进树布局)
**参数**： -| 参数名 | 类型 | 示例 / 可选值 | 默认值 | 说明 | +| 参数名 | 类型 | 示例/可选值 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | direction | String | 'LR' / 'RL' / 'H' | 'LR' | layout 的方向。
'LR' —— 根节点在左，往右布局（下图左）
'RL' —— 根节点在右，往左布局（下图中）
'H' —— 根节点在中间，水平对称布局（下图右）
indented1indented2indented3 | | indent | Number | 80 | 20 | 列间间距 | @@ -289,28 +295,28 @@ const graph = new G6.TreeGraph({ | getSide | Function | (d) => {
  // d 是一个节点
  return 'left';
} | undefined | 节点放置在根节点左侧或右侧的回调函数，仅对与根节点直接相连的节点有效，设置后将会影响被设置节点的所有子孙节点 | - -#### mindmap -**描述**：脑图布局。深度相同的节点将会被放置在同一层，与 compactBox 不同的是，布局不会考虑节点的大小。

**API**：[Mindmap API](https://www.yuque.com/antv/g6/wk3mh8)
**参数**： -| 参数名 | 类型 | 示例 / 可选值 | 默认值 | 说明 | +#### mindmap +**描述**：脑图布局。深度相同的节点将会被放置在同一层，与 compactBox 不同的是，布局不会考虑节点的大小。

**API**：[Mindmap API](/zh/docs/api/layout/TreeGraph/#mindmap-脑图树布局)
**参数**： + +| 参数名 | 类型 | 示例/可选值 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | direction | String | 'H' / 'V' | 'H' | layout 的方向。
- H：horizontal（水平）—— 根节点的子节点分成两部分横向放置在根节点左右两侧

- V：vertical （竖直）—— 将根节点的所有孩子纵向排列
| | getHeight | Function | (d) => {
  // d 是一个节点
  return 10;
} | undefined | 节点高度的回调函数 | | getWidth | Function | (d) => {
  // d 是一个节点
  return 20;
} | undefined | 节点宽度的回调函数 | | getVGap | Function | (d) => {
  // d 是一个节点
  return 100;
} | 18 | 节点纵向间距的回调函数 | | getHGap | Function | (d) => {
  // d 是一个节点
  return 50;
} | 18 | 节点横向间距的回调函数 | -| getSide | String | Function | (d) => {
  // d 是一个节点
  return 'left';
} | 'right' | 节点排布在根节点的左侧/右侧。若设置了该值，则所有节点会在根节点同一侧，即 direction = 'H' 不再起效。若该参数为回调函数，则可以指定每一个节点在根节点的左/右侧 | +| getSide | String | Function | (d) => {
  // d 是一个节点
  return 'left';
} / 'right' | 节点排布在根节点的左侧/右侧。若设置了该值，则所有节点会在根节点同一侧，即 direction = 'H' 不再起效。若该参数为回调函数，则可以指定每一个节点在根节点的左/右侧 | + - ## 布局的切换机制 G6 提供了两种关于布局的切换机制： -- `updateLayout(params)`：布局方法或参数的切换 -- `changeData()`：数据的切换 +- `updateLayout(params)`：布局方法或参数的切换； +- `changeData()`：数据的切换。 + - ### 布局方法或参数切换 **接口定义：** ```javascript @@ -327,7 +333,7 @@ updateLayout(cfg); **布局参数切换：**
若参数 `cfg` 是对象且其中不含有 `type` 字段，或指定的布局方法名称与之前的布局方法相同，则保持原有布局方法，仅更新该布局的参数。 - + ### 数据切换 **接口定义：** ```javascript @@ -339,12 +345,12 @@ updateLayout(cfg); changeData(data); ``` - + ### 切换示例 - + #### 期待效果 初始化时使用默认 random 布局，2000 ms 后更换为允许节点重叠的 force 布局，4000 ms 后更换为不允许节点重叠的 force 布局，6000 ms 后更换数据为 `data2`。
- + #### 完整代码 ```html @@ -421,11 +427,11 @@ changeData(data); ``` - -## 子图布局 -目前，子图布局独立与全局布局的思路，与 graph 不挂钩，直接使用实例化布局方法的方式，灌入子图数据，通过布局将位置写到相应数据中。这种机制还可供外部的全局布局使用，即使不用 G6 渲染，也可以计算节点布局后的位置。但与萧庆讨论后，决定这种方式暂时不透出够用户。在子图布局上，这种机制后续需要修改，并与全局布局思路统一（ graph，controller ）。 - +## 子图布局 +目前，子图布局独立与全局布局的思路，与 graph 不挂钩，直接使用实例化布局方法的方式，灌入子图数据，通过布局将位置写到相应数据中。这种机制还可供外部的全局布局使用，即使不用 G6 渲染，也可以计算节点布局后的位置。 + + ### 使用方法 ```javascript // 实例化布局 @@ -439,7 +445,7 @@ subgraphLayout.init({ 'edges': subGraphEdges }); -//执行布局 +// 执行布局 subgraphLayout.execute(); // 图实例根据数据更新节点位置 diff --git a/docs/manual/middle/nodeGroup.en.md b/docs/manual/middle/nodeGroup.en.md index 5c2e034fb6..6c10a37c64 100644 --- a/docs/manual/middle/nodeGroup.en.md +++ b/docs/manual/middle/nodeGroup.en.md @@ -1,24 +1,24 @@ --- -title: Node's Group +title: Node Group order: 8 --- -> Feature 自 G6 3.1.2 开始支持自定义节点分组的标题了，可以渲染带有标题的分组。 +> The title of Node Group is supported from G6 V3.1.2. -对于熟悉图可视化类库的用户来说，节点分组可能是比较实用的一个功能。自 G6 3.0.5 版本开始，G6 加入了节点分组的功能，详情参考[Demo](https://github.com/antvis/g6/blob/master/demos/drag-group.html)。
+Node Group is a practical function for graph visualization. It is supported from G6 V3.0.5. Refer to the demo Demo.
-### 数据结构 -新增节点分组功能时，尽量保持了 G6 数据结构的稳定性。为了体现分组的特性，我们在 nodes 数据项中加入了 groupId 属性，另外新增了 groups 字段，用于表示数据中所包括的分组及各分组之间的层级关系。 +### Data Structure +In data, Node Group are defined as array `group`, and each node data has a property `groupId`. -当 groups 中的对象包括 title 属性字段时，表示要渲染带有标题的分组，title 字段的类型可以是 string 或 object： +The `title` for a group can be a string or an object: -- title：类型为 string 时，值表示标题名称，不能设置任何样式，也不能调整标题位置； -- title 为 object 时，可以设置标题的样式及位置，title 中各字段含义： - - text：必选，分组的标题，类型为 string； - - offsetX：可选，默认为 0，表示 x 方向上的偏移量； - - offsetY：可选，默认为 0，表示 y 方向上的偏移量； - - stroke：字体边框颜色，同时也支持 fill、fontSize 等所有的[文本样式属性](/zh/docs/api/properties/TextProperties)。 +- When the `title` is a string, it indicates the text of the group title. The styles and the position are fixed; +- When the `title` is an object, users are able to define the styles and position for the group title. The object contains: + - text: required, a string indicates the text of the group title; + - offsetX: the x offset of the title, `0` by default; + - offsetY: the y offset of the title, `0` by default; + - stroke: the stroke color. The `fill`, `fontSize`, and other [Label Styles on Node](/en/docs/manual/middle/elements/nodes/defaultNode/#label-and-labelcfg). @@ -57,7 +57,7 @@ order: 8 { id: 'group1', title: { - text: '第一个分组', + text: 'The 1st group', stroke: '#444', offsetX: 0, offsetY: 0 @@ -75,8 +75,8 @@ order: 8 } ``` -### 如何渲染 group -当 nodes 中存在 `groupId` 属性字段时，在渲染过程中，G6 就会自动去渲染分组，当存在 groups 属性时，G6 就会自定去判断各分组之间的层级关系，并渲染出嵌套的分组。但当没有使用任何布局的时候，需要在 nodes 中指定各个阶段的坐标信息，即阶段的 `x` 和 `y` 属性值。 +### Render the Node Group +If there are `groupId` in node data, G6 will render the group for the node automatically. You need to defined the `x` and `y` for nodes when there is no layout method for the graph. ```javascript const data = { @@ -145,7 +145,7 @@ const data = { { id: 'group1', title: { - text: '第一个分组', + text: 'The first group', stroke: '#444', offsetX: -30, offsetY: 30 @@ -173,7 +173,6 @@ const graph = new G6.Graph({ container: 'mountNode', width: 800, height: 600, - pixelRatio: 2, modes: { default: [ 'drag-canvas' ] }, @@ -189,41 +188,40 @@ graph.data(data); graph.render(); ``` -渲染的效果如下图所示：

此时，不能对分组中的节点及分组进行任何操作，接下来，我们介绍可以对分组进行的各种操作。 +The result:
-### 操作分组 -只是简单地将分组渲染出来，并没有多大的实用价值，只有支持一系列的交互操作后，才能最大程度地体现分组的价值。 +
To controll the nodes and the groups, we now assign the behaviors to them. -在 G6 中，我们内置了 `drag-group`、`collapse-expand-group` 及  `drag-node-with-group`  三个[Behavior](./defaultBehavior)，共支持以下的交互行为： +### Manipulate the Group -- 拖动分组； -- 通过拖拽，动态改变分组中的节点数量及分组大小； -- 将一个分组从父分组中拖拽出来，并取消分组直接的关联关系，动态改变父分组的大小； -- 双击分组，收起和展开分组： - - 当收起分组后，与分组节点中的连线会自动连到分组上； - - 展开分组后，恢复之前的连接和位置。 -- 拖动节点，所在的分组高亮，当拖到其他分组时，其他分组高亮； -- [暂不支持] ~~将分组拖入到另外个分组，并改变分组层级的所属关系~~。 +The built-in [Behavior](/en/docs/manual/middle/states/defaultBehavior)s `drag-group`, `collapse-expand-group`, and `drag-node-with-group` allow user to manipulate the group: + +- Drag the group; +- Unrelate the node and its group by dragging the node out of the group; +- Double click to expand/collapse the group: + - When the group is collapsed, the edges linked to the inner nodes will link to the group; + - When the group is expanded, the related edges are restored. +- When user is dragging a node, the node's group will be highlighted; when the node is dragged to another group, the corresponding group will be highlighted +- **Do not Support** ~~Dropping a node into another group~~. #### drag-group -`drag-group` Behavior，支持拖动分组，拖动分组过程中，会动态改变分组中节点和边的位置，在拖拽完成以后，保持分组和节点的相对位置不变。 +`drag-group` is a Behavior which supports the group dragging. #### collapse-expand-group -`collapse-expand-group` Behavior，支持双击分组收起和展开分组，收起分组以后，隐藏分组中的所有节点，外部节点和分组中节点有连线的情况下，所有连接会连接到分组上面。 +`collapse-expand-group` is a Behavior which supports expand and collapse the group by double click. -优化目前只支持双击交互，正式发布时，会支持用户自定义交互方式，来实现分组的收起和展开。 +Now, we only support collapse and expand the group by double click. #### drag-node-with-group -`drag-node-with-group` Behavior 和 `drag-node` 类似，但该 Behavior 仅用于用 group 时 node 的拖拽。拖拽 node 过程中，会动态改变 node 所在的分组。 +`drag-node-with-group` is a Behavior that similar to `drag-node`. But it is applied on the node which has a group. The group of the node will be changed by dragging. -优化目前暂不支持将多个节点拖出拖入到分组中。 +We do not support dragging multiple nodes in/out a group. ```javascript const graph = new G6.Graph({ container: 'mountNode', width: 800, height: 600, - pixelRatio: 2, modes: { default: [ 'drag-group', 'collapse-expand-group', 'drag- node-with-group' ] }, @@ -236,13 +234,7 @@ const graph = new G6.Graph({ }); ``` -将这三个内置提供的 Behavior 加入到 modes 中以后的效果如下图所示。 +Assigning the three built-in Behavior into `modes` of the graph instance results in: -### 适用的场景 - -1. 风控、反洗钱、保险骗保、网络诈骗、信用卡诈骗等场景下团伙分析； -1. 特征分析：同一个分组中的节点在某些特征上面比较相似； -1. 整理节点：当类似的节点放到一个分组中，只渲染分组，不渲染节点，减少干扰元素。 - diff --git a/docs/manual/middle/nodeGroup.zh.md b/docs/manual/middle/nodeGroup.zh.md index 1cb2a6dfdb..7797826c74 100644 --- a/docs/manual/middle/nodeGroup.zh.md +++ b/docs/manual/middle/nodeGroup.zh.md @@ -3,10 +3,10 @@ title: 节点分组 Group order: 8 --- -> Feature 自 G6 3.1.2 开始支持自定义节点分组的标题了，可以渲染带有标题的分组。 +> New Feature：自 G6 3.1.2 开始支持自定义节点分组的标题了，可以渲染带有标题的分组。 -对于熟悉图可视化类库的用户来说，节点分组可能是比较实用的一个功能。自 G6 3.0.5 版本开始，G6 加入了节点分组的功能，详情参考[Demo](https://github.com/antvis/g6/blob/master/demos/drag-group.html)。
+对于熟悉图可视化类库的用户来说，节点分组可能是比较实用的一个功能。自 G6 3.0.5 版本开始，G6 加入了节点分组的功能，详情参考 Demo。
### 数据结构 新增节点分组功能时，尽量保持了 G6 数据结构的稳定性。为了体现分组的特性，我们在 nodes 数据项中加入了 groupId 属性，另外新增了 groups 字段，用于表示数据中所包括的分组及各分组之间的层级关系。 @@ -18,7 +18,7 @@ order: 8 - text：必选，分组的标题，类型为 string； - offsetX：可选，默认为 0，表示 x 方向上的偏移量； - offsetY：可选，默认为 0，表示 y 方向上的偏移量； - - stroke：字体边框颜色，同时也支持 fill、fontSize 等所有的[文本样式属性](/zh/docs/api/properties/TextProperties)。 + - stroke：字体边框颜色，同时也支持 fill、fontSize 等所有的 [节点上的文本样式属性](/zh/docs/manual/middle/elements/nodes/defaultNode/#标签文本-label-及其配置-labelcfg)。 @@ -173,7 +173,6 @@ const graph = new G6.Graph({ container: 'mountNode', width: 800, height: 600, - pixelRatio: 2, modes: { default: [ 'drag-canvas' ] }, @@ -194,7 +193,7 @@ graph.render(); ### 操作分组 只是简单地将分组渲染出来，并没有多大的实用价值，只有支持一系列的交互操作后，才能最大程度地体现分组的价值。 -在 G6 中，我们内置了 `drag-group`、`collapse-expand-group` 及  `drag-node-with-group`  三个[Behavior](./defaultBehavior)，共支持以下的交互行为： +在 G6 中，我们内置了 `drag-group`、`collapse-expand-group` 及  `drag-node-with-group`  三个 [Behavior](/zh/docs/manual/middle/states/defaultBehavior)，共支持以下的交互行为： - 拖动分组； - 通过拖拽，动态改变分组中的节点数量及分组大小； @@ -223,7 +222,6 @@ const graph = new G6.Graph({ container: 'mountNode', width: 800, height: 600, - pixelRatio: 2, modes: { default: [ 'drag-group', 'collapse-expand-group', 'drag- node-with-group' ] }, @@ -236,13 +234,13 @@ const graph = new G6.Graph({ }); ``` -将这三个内置提供的 Behavior 加入到 modes 中以后的效果如下图所示。 +将这三个内置提供的 Behavior 加入到 `modes` 中以后的效果如下图所示。 -### 适用的场景 +### 适用场景 1. 风控、反洗钱、保险骗保、网络诈骗、信用卡诈骗等场景下团伙分析； -1. 特征分析：同一个分组中的节点在某些特征上面比较相似； -1. 整理节点：当类似的节点放到一个分组中，只渲染分组，不渲染节点，减少干扰元素。 +2. 特征分析：同一个分组中的节点在某些特征上面比较相似； +3. 整理节点：当类似的节点放到一个分组中，只渲染分组，不渲染节点，减少干扰元素。 diff --git a/docs/manual/middle/states/bindEvent.en.md b/docs/manual/middle/states/bindEvent.en.md index 129fbc6034..fa52baf176 100644 --- a/docs/manual/middle/states/bindEvent.en.md +++ b/docs/manual/middle/states/bindEvent.en.md @@ -3,18 +3,18 @@ title: Listener and Event order: 1 --- -除了 [内置交互行为 Behavior](./defaultBehavior) 和 [交互模式 Mode](./mode) 搭配的事件管理方式外，G6 提供了直接的单个事件、时机的监听方法，可以监听画布、节点、边、以及各函数被调用的时机等。这些事件可以分为以下四个层次： +G6 manages events by combining the [Behavior](/en/docs/manual/middle/states/defaultBehavior) and [Mode](/en/docs/manual/middle/states/mode). Besides, G6 provides lots of listeners for single events and timing, which monitor the canvas/nodes/edges and the timing of function call. These events can be categorized into the following four levels: -- 画布、图形层次的事件，`mousedown`， `mouseup`，`click`，`mouseenter`，`mouseleave` 等； -- 节点/边 上的事件，`node:mousedown`， `edge:click` 等，以 `type:eventName` 为事件名称； -- 时机事件： - - 节点/边增删改时的事件, 例如：`beforeadditem` ， `afteradditem` 等； - - 节点/边状态改变时的事件，例如：`beforerefreshitem`，`afterrefreshitem`。 - - 布局时机，例如：`beforelayout`，`afterlayout`。 +- The events of canvas and graphics shapes, e.g. `mousedown`, `mouseup`, `click`, `mouseenter`, `mouseleave`, and so on; +- The events on nodes/edges, e.g. `node:mousedown`, `edge:click`, and so on. It is named as `type:eventName`; +- The timing events: + - The timing of adding/removing/modifying a node/edge, e.g. `beforeadditem`, `afteradditem`, and so on; + - The timing of states change on node/edge: `beforerefreshitem` and `afterrefreshitem`; + - The timing of layout change: `beforelayout` and `afterlayout`. -如果要了解G6支持的所有事件，请参考[Event文档](/zh/docs/api/Event)。 +For more information about the events in G6, please refer to [Event API](/en/docs/api/Event). -G6 上所有的事件都需要在graph上监听。 +All the events are mounted on the graph: ```javascript graph.on('click', ev => { const shape = ev.target; diff --git a/docs/manual/middle/states/bindEvent.zh.md b/docs/manual/middle/states/bindEvent.zh.md index 0f6c9e9fcd..b765e3e313 100644 --- a/docs/manual/middle/states/bindEvent.zh.md +++ b/docs/manual/middle/states/bindEvent.zh.md @@ -3,18 +3,18 @@ title: 监听和绑定事件 order: 1 --- -除了 [内置交互行为 Behavior](./defaultBehavior) 和 [交互模式 Mode](./mode) 搭配的事件管理方式外，G6 提供了直接的单个事件、时机的监听方法，可以监听画布、节点、边、以及各函数被调用的时机等。这些事件可以分为以下四个层次： +除了 [内置交互行为 Behavior](/zh/docs/manual/middle/states/defaultBehavior) 和 [交互模式 Mode](/zh/docs/manual/middle/states/mode) 搭配的事件管理方式外，G6 提供了直接的单个事件、时机的监听方法，可以监听画布、节点、边、以及各函数被调用的时机等。这些事件可以分为以下四个层次： -- 画布、图形层次的事件，`mousedown`， `mouseup`，`click`，`mouseenter`，`mouseleave` 等； -- 节点/边 上的事件，`node:mousedown`， `edge:click` 等，以 `type:eventName` 为事件名称； +- 画布、图形层次的事件，`mousedown`，`mouseup`，`click`，`mouseenter`，`mouseleave` 等； +- 节点/边 上的事件，`node:mousedown`，`edge:click` 等，以 `type:eventName` 为事件名称； - 时机事件： - - 节点/边增删改时的事件, 例如：`beforeadditem` ， `afteradditem` 等； - - 节点/边状态改变时的事件，例如：`beforerefreshitem`，`afterrefreshitem`。 - - 布局时机，例如：`beforelayout`，`afterlayout`。 + - 节点/边增删改时的事件, 例如：`beforeadditem`，`afteradditem` 等； + - 节点/边状态改变时的事件：`beforerefreshitem` 与 `afterrefreshitem`； + - 布局时机：`beforelayout` 与 `afterlayout`。 -如果要了解G6支持的所有事件，请参考[Event文档](/zh/docs/api/Event)。 +如果要了解 G6 支持的所有事件，请参考 [Event API](/zh/docs/api/Event)。 -G6 上所有的事件都需要在graph上监听。 +G6 上所有的事件都需要在 graph 上监听。 ```javascript graph.on('click', ev => { const shape = ev.target; diff --git a/docs/manual/middle/states/defaultBehavior.en.md b/docs/manual/middle/states/defaultBehavior.en.md index 4cdc202340..605e5b17cf 100644 --- a/docs/manual/middle/states/defaultBehavior.en.md +++ b/docs/manual/middle/states/defaultBehavior.en.md @@ -3,19 +3,19 @@ title: Built-in Behavior order: 4 --- -## 什么是 Behavior -Behavior 是 G6 提供的定义图上交互事件的机制。它与[交互模式 Mode](/zh/docs/manual/middle/states/mode) 搭配使用，如何将下文所述各种 Behavior 配置到图上，见 [交互模式](/zh/docs/manual/middle/states/mode)。 +## What is Behavior +Behavior is the interaction mechanism in G6. It is used with [Interaction Mode](/en/docs/manual/middle/states/mode). This document introduces the Built-in behaviors in G6. Besides, you can register a type of [Custom Behavior](/zh/docs/manual/advanced/custom-behavior). The document [Interaction Mode](/en/docs/manual/middle/states/mode) introduces how to configure the Behaviors onto the graph. -## 内置 Behavior -理论上说 G6 上的所有基础图形、Item（节点/边）都能通过事件来进行操作，考虑到通用性， G6目前共提供了以下9个内置的 Behavior。 +## Built-in Behavior +All the basic graphics Shapes, Items(nodes/edges) can be interacted by events. To achieve it with versatility, there are 9 built-in Behaviors in G6. ### drag-canvas -- 含义：拖拽画布； -- `type: 'drag-canvas'`； -- `direction`: 允许拖拽方向，支持`'x'`， `'y'`，`'both'`，默认方向为 `'both'`。 +- Description: Allows users drag canvas; +- `type: 'drag-canvas'`; +- `direction`: The direction of dragging that is allowed. Options: `'x'`, `'y'`, `'both'`. `'both'` by default. -**默认配置** +**Default Configuration** ```javascript const graph = new G6.Graph({ modes: { @@ -24,9 +24,9 @@ const graph = new G6.Graph({ }) ``` -默认配置下，可以在 x 和 y 两个方向上拖动画布。 +By default, the x and y directions are both allowed. -**配置参数** +**Configuration** ```javascript const graph = new G6.Graph({ modes: { @@ -40,25 +40,25 @@ const graph = new G6.Graph({ }) ``` -此时只能在 x 方向上面拖动，y 方向上不允许拖动。
+The canvas can be dragged along x direction only.
### zoom-canvas -- 含义：缩放画布； -- `type: 'zoom-canvas'`； -- `sensitivity`: 缩放灵敏度，支持 1-10 的数值，默认灵敏度为 5。 +- Description: Zoom the canvas; +- `type: 'zoom-canvas'`; +- `sensitivity`: The sensitivity of the zooming, range from 1 to 10. `5` by default. -**提示：若要限定缩放尺寸，请在 graph 上设置 **`**minZoom**`** 和 **`**maxZoom**`**。** +**Tips: Assign values for `minZoom` and  `maxZoom` on the graph to limit the zooming ratio.** ### drag-node -- 含义：拖拽节点； -- `type: 'drag-node'`； -- `delegateStyle`: 节点拖拽时的绘图属性，默认为 `{ strokeOpacity: 0.6, fillOpacity: 0.6 }`； -- `updateEdge`: 是否在拖拽节点时更新所有与之相连的边，默认为 `true` 。 -- 3.1.2 `enableDelegate`：拖动节点过程中是否启用 `delegate`，即在拖动过程中是否使用方框代替元素的直接移动，效果区别见下面两个动图。默认值为 `false`。 +- Description: Allows users drag nodes; +- `type: 'drag-node'`; +- `delegateStyle`: The drawing properties when the nodes are dragged. `{ strokeOpacity: 0.6, fillOpacity: 0.6 }` by default; +- `updateEdge`: Whether to update all connected edges when dragging nodes. `true` by default. +- `enableDelegate`: Whether activate `delegate` when dragging nodes, which means whether to use a virtual rect moved with the dragging mouse instead of the node. The effect is shown in the figures below. `false` by default. -**默认配置** +**Default Configuration** ```javascript const graph = new G6.Graph({ modes: { @@ -68,7 +68,7 @@ const graph = new G6.Graph({ ``` -**启用** `delegate` +**Activate** `delegate` ```javascript const graph = new G6.Graph({ modes: { @@ -85,12 +85,13 @@ const graph = new G6.Graph({ ### click-select -- 含义：点击选中节点，再次点击节点或点击 Canvas 取消选中状态； -- `type: 'click-select'`； -- `multiple`: 是否允许多选，默认为 `true`，当设置为 `false`，表示不允许多选，此时 `trigger` 参数无效。 -- 3.1.2 `trigger`: 指定按住哪个键进行多选，默认为 shift，按住 Shift 键多选，用户可配置 shift、ctrl、alt； +- Description: Select a node by clicking. Cancel the selected state by clicking the node agian or clicking the canvas; +- `type: 'click-select'`; +- `multiple`: Whether to allow multiple selection. `true` by default. `false` means multiple selection is not allowed, and the `trigger` will not take effect. +- `trigger`: Specify which key to hold for multiple selection. `shift` by default, which means multiple selection is activated when the shift button is pressed. Options: `'shift'`, `'ctrl'`, `'alt'`, and so on; + +**Default Configuration** -**默认配置**
** ```javascript const graph = new G6.Graph({ modes: { @@ -99,9 +100,9 @@ const graph = new G6.Graph({ }) ``` -按住 **`Shift`** 键可多选。
+Press **`Shift`** button to select more items.
-**配置参数** +**Configuration** ```javascript const graph = new G6.Graph({ modes: { @@ -115,13 +116,14 @@ const graph = new G6.Graph({ }) ``` -以上配置中，用户可按住 **Ctrl** 键进行多选，也可以配置 **Alt** 键。当配置了 `multiple` 参数为 `false`，则表示不允许多谢，此时 `trigger` 参数无效。 +With the configuration above, users are allowed to select more than one nodes when pressing **Ctrl**. You can also assign **Alt** for it. But the multiple selection is turned off when `multiple` is `false`, and the `trigger` will not take effect any more. ### tooltip -- 含义：节点文本提示； -- `type: 'tooltip'`； -- `formatText(model)` 格式化函数，可以返回文本或者 HTML； +- Description: The tooltip for node; +- `type: 'tooltip'`; +- `formatText(model)`: Format function, returns a text string or an HTML element. + ```javascript const graph = new G6.Graph({ container: 'mountNode', @@ -138,7 +140,8 @@ const graph = new G6.Graph({ }); ``` -**提示：由于 G6 没有内置任何 tooltip 的样式，用户需要自己定义样式，例如：** +**Tips: Since there are no styles for tooltip in G6, you need to define the styles for it as:** + ```css .g6-tooltip { padding: 10px 6px; @@ -150,24 +153,24 @@ const graph = new G6.Graph({ ``` ### edge-tooltip -使用方式基本与 tooltip 相同，但是移到边时触发。主要是为了将两个交互区分开，以满足用户边与节点的提示样式或 HTML 结构不同，以及不需要在事件中去区分是节点事件还是边事件等。 +The usage of edge-tooltip is similar to tooltip. It will be activated when the user hover the mouse onto an edge. -- 含义：边文本提示； -- `type: 'edge-tooltip'`； -- `formatText(model)` 格式化函数，可以返回文本或者 HTML。 +- Description: The tooltip for edge; +- `type: 'edge-tooltip'`; +- `formatText(model)`: Format function, returns a text string or an HTML element. ### activate-relations -- 含义：当鼠标移到某节点时，突出显示该节点以及与其直接关联的节点和连线； -- `type: 'activate-relations'`； -- 参数： - - `trigger: 'mouseenter'`, 可以是 `mousenter` , 鼠标移入时触发；也可以是 `click` ，鼠标点击时触发； - - `activeState: 'active'`, 活跃节点状态；当行为被触发，需要被突出显示的节点和边都会附带此状态，默认值为 `active`；可以与 graph 实例的 `nodeStyle` 和 `edgeStyle` 结合实现丰富的视觉效果。 - - `inactiveState: 'inactive'`，非活跃节点状态，不需要被突出显示的节点和边都会附带此状态，默认值为 `inactive`；可以与 graph 实例的 `nodeStyle` 和 `edgeStyle` 结合实现丰富的视觉效果； - - 3.1.2 `resetSelected`：高亮相连节点时是否重置已经选中的节点，默认为false，即选中的节点状态不会被 `activate-relations` 覆盖。 +- Description: Highlight the node and its related nodes and edges when the mouse enter the node; +- `type: 'activate-relations'`; +- Configurations: + - `trigger: 'mouseenter'`. `mousenter` means acitvating when the mouse enter a node; `click` means activating when the mouse click a node; + - `activeState: 'active'`. The state name when the node is activated. When `activate-relations` is activated, the related nodes and edges will have this state. `active` by default. It can be combined with `nodeStyle` and `edgeStyle` of graph to enrich the visual effect; + - `inactiveState: 'inactive'`. The state name when of the node is inactivated. All the nodes and edges which are not activated by `activate-relations` will have this state. `inactive` by default. It can be combined with `nodeStyle` and `edgeStyle` of graph to enrich the visual effect; + - `resetSelected`: Whether to reset the selected nodes when highlight the related nodes. `false` by default, which means the selected state will not be covered by `activate-relations`. -
**默认配置**
+
**Default Configuration**
```javascript const graph = new G6.Graph({ @@ -176,9 +179,9 @@ const graph = new G6.Graph({ } }) ``` -默认情况下，选中的节点状态，在操作完以后仍然会保持选中状态。
+The selected state of the selected node will be maintained after the `activate-relations` operation by default.
-**配置参数** +**Configuration** ```javascript const graph = new G6.Graph({ modes: { @@ -192,29 +195,28 @@ const graph = new G6.Graph({ }) ``` -配置 `resetSelected` 参数为 `true` 后，交互后会重置节点的选择状态。 +Assign `true` to `resetSelected` to reset the selected states for nodes after the `activate-relations` operation. ### brush-select -- 含义：拖动框选节点； -- `type: 'brush-select'`； -- 参数： - - `brushStyle`：拖动框选框的样式； - - `onSelect(nodes)`：选中节点时的回调，参数 `nodes` 表示选中的节点； - - `onDeselect(nodes)`：取消选中节点时的回调，参数 `nodes` 表示取消选中的节点； - - `brushStyle`：框选时样式的配置项，包括 `fill`、`fillOpacity`、`stroke` 和 `lineWidth` 四个属性； - - `selectedState`：选中的状态，默认值为 `'selected'`； - - `includeEdges`：框选过程中是否选中边，默认为 `true`，用户配置为 `false` 时，则不选中边； - - 3.1.2 `trigger`：触发框选的动作，默认为 `'shift'`，即用户按住 Shift 键拖动就可以进行框选操作，可配置的的选项为: `'shift'`、`'ctrl' / 'control'`、`'alt'` 和 `'drag'` ，不区分大小写： - - `'shift'`：按住 Shift 键进行拖动框选； - - `'ctrl' / 'control'`：按住 Ctrl 键进行拖动框选； - - `'alt'`：按住 Alt 键进行拖动框选； - - 风险 `'drag'`：不需要按任何键，进行拖动框选，如果同时配置了 `drag-canvas`，则会与该选项冲突。 +- Description: Allows uers to select nodes by brushing; +- `type: 'brush-select'`; +- Configurations: + - `brushStyle`: The styles of the marquee. It contains four configurations: `fill`、`fillOpacity`、`stroke` and `lineWidth`; + - `onSelect(nodes)`: The callback function when selecting a node. `nodes` is the selected ndoes; + - `onDeselect(nodes)`: The callback function when canceling selections. `nodes` is the selected ndoes; + - `selectedState`: The state of the selected nodes. `'selected'` by default; + - `includeEdges`: Whether to select the edges when selecting by brushing. `true` by default. `false` means do not select the edges. + - `trigger`: The trigger button for this operation. `'shift'` by default, which means the select by brushing operation will be activated by pressing Shift button. Options: `'shift'`, `'ctrl' / 'control'`, `'alt'` and `'drag'`, not case sensitive: + - `'shift'`: Select by brushing when Shift is pressed; + - `'ctrl' / 'control'`: Select by brushing when Ctrl is pressed; + - `'alt'`: Select by brushing when Alt is pressed; + - `'drag'`: Select by brushing without any pressed buttons. Note that it will conflict with the `drag-canvas`. -**默认配置** +**Default Configuration** ```javascript const graph = new G6.Graph({ @@ -223,8 +225,9 @@ const graph = new G6.Graph({ } }) ``` -默认情况下，按住 Shift 键进行框选，选中节点的同时，也会选中边。
-**配置参数** +Select by brushing when the Shift button is pressed by default. And the edges are selectable as well.
+ +**Configuration** ```javascript const graph = new G6.Graph({ modes: { @@ -239,9 +242,9 @@ const graph = new G6.Graph({ }) ``` -上面的配置，按住 Ctrl 键，进行框选，框选过程中不会选中边。
+By the configurations above, the operation is activated when the Ctrl button is pressed, and the edges will not be selected during the process.
-**配置冲突** +**Conflict Configuration：** ```javascript const graph = new G6.Graph({ modes: { @@ -255,9 +258,9 @@ const graph = new G6.Graph({ }) ``` -当用户配置 `brush-select` 的 `trigger` 为 `drag`，同时又配置了 `drag-canvas` 时，在交互上面会出现冲突的情况。
+When the `trigger` in `brush-select` is assigned to `drag`, an the `drag-canvas` exists in this mode, their operation will conflict.
-可以看到，在拖动过程中也出现了框选的情况，这种情况很显然不是我们期望的效果，除过使用 `brush-select `的 `trigger` 参数避免这种冲突外，我们还可以通过下面的方式来实现： +It is obvious that the selecting by brushing is activated while dragging the canvas. To avoid this situation, we can assign other values for `trigger` in `brush-select`. Besides, the following solution also works: ```javascript const graph = new G6.Graph({ @@ -273,20 +276,19 @@ const graph = new G6.Graph({ }) ``` -上面这种方式是使用不同的 mode 来区分，mode 可以达到使用相同交互动作而产生不同的效果，更多关于 mode 的内容请参数 [G6 中的 Mode 文档](./mode)。 - -使用 mode 区分，默认情况下使用的是 `drag-canvas`，但用户需要切换到框选时，通过 `graph.setModel('brush')` 即可实现，此时同样的交互产生的就是框选的效果。 +It is a solution to put these two conflicting events into two mdoes. They will be activated on different graph modes. Dragging operation corresponds to `drag-canvas` in the default mode. When user switch the state to brush mode by `graph.setModel('brush')`, the dragging operation will be responsed by `brush-select` instead. +Refer to [Mode](/en/docs/manual/middle/states/mode) for more information. ### collapse-expand -- 含义：只适用于树图，展开或收起节点； -- `type: 'collapse-expand'`； -- 参数： - - `trigger`：收起和展开树图的方式，支持`click`和`dblclick`两种方式，默认为`click`； - - `onChange`：收起或展开的回调函数，警告 `3.1.2 `版本中将移除。 +- Description: Collapse or expand a subtree on a treeGraph +- `type: 'collapse-expand'`; +- Configuration: + - `trigger`: The operation for collapsing and expanding. Options: `click` and `dblclick`. `click` by default; + - `onChange`: The callback function after collapsing or expanding. **Warining**: it will be removed from V3.1.2. -**用法** +**Usage** ```javascript const graph = new G6.TreeGraph({ @@ -306,12 +308,12 @@ const graph = new G6.TreeGraph({ ### collapse-expand-group -- 含义：收起和展开群组； -- `type：'collapse-expand-group'` -- 参数： - - 3.1.2 trigger：收起和展开节点分组的方式，支持`click`和`dblclick`两种方式，默认为`dblclick` +- Description: Collapse or expand a node group; +- `type: 'collapse-expand-group'` +- Configurations: + - trigger: The operation for collapsing and expanding. Options: `click` and `dblclick`. `dblclick` by default, which means double click. -**默认配置** +**Default Configuration** ```javascript const graph = new G6.Graph({ modes: { @@ -320,7 +322,7 @@ const graph = new G6.Graph({ }) ``` -**配置参数**
配置 `trigger` 参数为 **`click`** 后，单击节点分组即可收起或展开分组。 +**Configuration**
Assign `trigger` to **`click`**, the collapsing or expanding a node group will be triggered by click. ```javascript const graph = new G6.Graph({ @@ -339,12 +341,12 @@ const graph = new G6.Graph({ ### drag-group -- 含义：拖动节点分组； -- `type: 'drag-group'`； -- 参数： - - `delegateStyle`：拖动节点分组时 `delegate` 的样式。 +- Description: Allows users drag node group; +- `type: 'drag-group'`; +- Configuration: + - `delegateStyle`: The style of the `delegate` when dragging the group. -**默认配置** +**Default Configuration** ```javascript const graph = new G6.Graph({ modes: { @@ -355,14 +357,14 @@ const graph = new G6.Graph({ ### drag-node-with-group -- 含义：拖动节点分组中的节点； -- `type：'drag-node-with-group'`； -- 参数： - - `delegateStyle`：拖动节点分组时 `delegate` 的样式； - - `maxMultiple`： - - `minMultiple`。 +- Description: Allow users to drag the nodes in the group; +- `type: 'drag-node-with-group'`; +- Configuration: + - `delegateStyle`: The style of the `delegate` when dragging the node. + - `maxMultiple`; + - `minMultiple`. -**默认配置** +**Default Configuration** ```javascript const graph = new G6.Graph({ modes: { diff --git a/docs/manual/middle/states/defaultBehavior.zh.md b/docs/manual/middle/states/defaultBehavior.zh.md index b615d16821..02a1551f70 100644 --- a/docs/manual/middle/states/defaultBehavior.zh.md +++ b/docs/manual/middle/states/defaultBehavior.zh.md @@ -7,13 +7,13 @@ order: 4 Behavior 是 G6 提供的定义图上交互事件的机制。它与[交互模式 Mode](/zh/docs/manual/middle/states/mode) 搭配使用，如何将下文所述各种 Behavior 配置到图上，见 [交互模式](/zh/docs/manual/middle/states/mode)。 ## 内置 Behavior -理论上说 G6 上的所有基础图形、Item（节点/边）都能通过事件来进行操作，考虑到通用性， G6目前共提供了以下9个内置的 Behavior。 +理论上， G6 上的所有基础图形、Item（节点/边）都能通过事件来进行操作。考虑到通用性，G6 目前共提供了以下 9 个内置的 Behavior。此外，用户可以注册 [自定义 Behavior](/zh/docs/manual/advanced/custom-behavior)。 ### drag-canvas - 含义：拖拽画布； - `type: 'drag-canvas'`； -- `direction`: 允许拖拽方向，支持`'x'`， `'y'`，`'both'`，默认方向为 `'both'`。 +- `direction`：允许拖拽方向，支持`'x'`，`'y'`，`'both'`，默认方向为 `'both'`。 **默认配置** ```javascript @@ -46,17 +46,17 @@ const graph = new G6.Graph({ - 含义：缩放画布； - `type: 'zoom-canvas'`； -- `sensitivity`: 缩放灵敏度，支持 1-10 的数值，默认灵敏度为 5。 +- `sensitivity`：缩放灵敏度，支持 1-10 的数值，默认灵敏度为 5。 -**提示：若要限定缩放尺寸，请在 graph 上设置 **`**minZoom**`** 和 **`**maxZoom**`**。** +**提示：若要限定缩放尺寸，请在 graph 上设置 `minZoom` 和 `maxZoom`。** ### drag-node - 含义：拖拽节点； - `type: 'drag-node'`； -- `delegateStyle`: 节点拖拽时的绘图属性，默认为 `{ strokeOpacity: 0.6, fillOpacity: 0.6 }`； -- `updateEdge`: 是否在拖拽节点时更新所有与之相连的边，默认为 `true` 。 -- 3.1.2 `enableDelegate`：拖动节点过程中是否启用 `delegate`，即在拖动过程中是否使用方框代替元素的直接移动，效果区别见下面两个动图。默认值为 `false`。 +- `delegateStyle`：节点拖拽时的绘图属性，默认为 `{ strokeOpacity: 0.6, fillOpacity: 0.6 }`； +- `updateEdge`：是否在拖拽节点时更新所有与之相连的边，默认为 `true` 。 +- `enableDelegate`：拖动节点过程中是否启用 `delegate`，即在拖动过程中是否使用方框代替元素的直接移动，效果区别见下面两个动图。默认值为 `false`。 **默认配置** ```javascript @@ -87,10 +87,11 @@ const graph = new G6.Graph({ - 含义：点击选中节点，再次点击节点或点击 Canvas 取消选中状态； - `type: 'click-select'`； -- `multiple`: 是否允许多选，默认为 `true`，当设置为 `false`，表示不允许多选，此时 `trigger` 参数无效。 -- 3.1.2 `trigger`: 指定按住哪个键进行多选，默认为 shift，按住 Shift 键多选，用户可配置 shift、ctrl、alt； +- `multiple`：是否允许多选，默认为 `true`，当设置为 `false`，表示不允许多选，此时 `trigger` 参数无效。 +- `trigger`：指定按住哪个键进行多选，默认为 shift，按住 Shift 键多选，用户可配置 shift、ctrl、alt； + +**默认配置** -**默认配置**
** ```javascript const graph = new G6.Graph({ modes: { @@ -115,13 +116,14 @@ const graph = new G6.Graph({ }) ``` -以上配置中，用户可按住 **Ctrl** 键进行多选，也可以配置 **Alt** 键。当配置了 `multiple` 参数为 `false`，则表示不允许多谢，此时 `trigger` 参数无效。 +以上配置中，用户可按住 **Ctrl** 键进行多选，也可以配置 **Alt** 键。当配置了 `multiple` 参数为 `false`，则表示不允许多选，此时 `trigger` 参数无效。 ### tooltip - 含义：节点文本提示； - `type: 'tooltip'`； -- `formatText(model)` 格式化函数，可以返回文本或者 HTML； +- `formatText(model)`：格式化函数，可以返回文本或者 HTML； + ```javascript const graph = new G6.Graph({ container: 'mountNode', @@ -154,17 +156,17 @@ const graph = new G6.Graph({ - 含义：边文本提示； - `type: 'edge-tooltip'`； -- `formatText(model)` 格式化函数，可以返回文本或者 HTML。 +- `formatText(model)`：格式化函数，可以返回文本或者 HTML。 ### activate-relations - 含义：当鼠标移到某节点时，突出显示该节点以及与其直接关联的节点和连线； - `type: 'activate-relations'`； - 参数： - - `trigger: 'mouseenter'`, 可以是 `mousenter` , 鼠标移入时触发；也可以是 `click` ，鼠标点击时触发； - - `activeState: 'active'`, 活跃节点状态；当行为被触发，需要被突出显示的节点和边都会附带此状态，默认值为 `active`；可以与 graph 实例的 `nodeStyle` 和 `edgeStyle` 结合实现丰富的视觉效果。 - - `inactiveState: 'inactive'`，非活跃节点状态，不需要被突出显示的节点和边都会附带此状态，默认值为 `inactive`；可以与 graph 实例的 `nodeStyle` 和 `edgeStyle` 结合实现丰富的视觉效果； - - 3.1.2 `resetSelected`：高亮相连节点时是否重置已经选中的节点，默认为false，即选中的节点状态不会被 `activate-relations` 覆盖。 + - `trigger: 'mouseenter'`。可以是 `mousenter`，表示鼠标移入时触发；也可以是 `click`，鼠标点击时触发； + - `activeState: 'active'`。活跃节点状态。当行为被触发，需要被突出显示的节点和边都会附带此状态，默认值为 `active`；可以与 graph 实例的 `nodeStyle` 和 `edgeStyle` 结合实现丰富的视觉效果。 + - `inactiveState: 'inactive'`。非活跃节点状态。不需要被突出显示的节点和边都会附带此状态。默认值为 `inactive`。可以与 graph 实例的 `nodeStyle` 和 `edgeStyle` 结合实现丰富的视觉效果； + - `resetSelected`：高亮相连节点时是否重置已经选中的节点，默认为 `false`，即选中的节点状态不会被 `activate-relations` 覆盖。
**默认配置**
@@ -178,6 +180,7 @@ const graph = new G6.Graph({ ``` 默认情况下，选中的节点状态，在操作完以后仍然会保持选中状态。
+ **配置参数** ```javascript const graph = new G6.Graph({ @@ -202,13 +205,12 @@ const graph = new G6.Graph({ - 含义：拖动框选节点； - `type: 'brush-select'`； - 参数： - - `brushStyle`：拖动框选框的样式； + - `brushStyle`：拖动框选框的样式，包括 `fill`、`fillOpacity`、`stroke` 和 `lineWidth` 四个属性; - `onSelect(nodes)`：选中节点时的回调，参数 `nodes` 表示选中的节点； - `onDeselect(nodes)`：取消选中节点时的回调，参数 `nodes` 表示取消选中的节点； - - `brushStyle`：框选时样式的配置项，包括 `fill`、`fillOpacity`、`stroke` 和 `lineWidth` 四个属性； - `selectedState`：选中的状态，默认值为 `'selected'`； - `includeEdges`：框选过程中是否选中边，默认为 `true`，用户配置为 `false` 时，则不选中边； - - 3.1.2 `trigger`：触发框选的动作，默认为 `'shift'`，即用户按住 Shift 键拖动就可以进行框选操作，可配置的的选项为: `'shift'`、`'ctrl' / 'control'`、`'alt'` 和 `'drag'` ，不区分大小写： + - `trigger`：触发框选的动作，默认为 `'shift'`，即用户按住 Shift 键拖动就可以进行框选操作，可配置的的选项为: `'shift'`、`'ctrl' / 'control'`、`'alt'` 和 `'drag'` ，不区分大小写： - `'shift'`：按住 Shift 键进行拖动框选； - `'ctrl' / 'control'`：按住 Ctrl 键进行拖动框选； - `'alt'`：按住 Alt 键进行拖动框选； @@ -223,7 +225,10 @@ const graph = new G6.Graph({ } }) ``` -默认情况下，按住 Shift 键进行框选，选中节点的同时，也会选中边。
+默认情况下，按住 Shift 键进行框选，选中节点的同时，也会选中边。 +
+ + **配置参数** ```javascript const graph = new G6.Graph({ @@ -241,7 +246,7 @@ const graph = new G6.Graph({ 上面的配置，按住 Ctrl 键，进行框选，框选过程中不会选中边。
-**配置冲突** +**冲突的配置：** ```javascript const graph = new G6.Graph({ modes: { @@ -257,7 +262,7 @@ const graph = new G6.Graph({ 当用户配置 `brush-select` 的 `trigger` 为 `drag`，同时又配置了 `drag-canvas` 时，在交互上面会出现冲突的情况。
-可以看到，在拖动过程中也出现了框选的情况，这种情况很显然不是我们期望的效果，除过使用 `brush-select `的 `trigger` 参数避免这种冲突外，我们还可以通过下面的方式来实现： +可以看到，在拖动过程中也出现了框选的情况，这种情况很显然不是我们期望的效果，除过使用 `brush-select` 的 `trigger` 参数避免这种冲突外，我们还可以通过下面的方式来实现： ```javascript const graph = new G6.Graph({ @@ -273,17 +278,15 @@ const graph = new G6.Graph({ }) ``` -上面这种方式是使用不同的 mode 来区分，mode 可以达到使用相同交互动作而产生不同的效果，更多关于 mode 的内容请参数 [G6 中的 Mode 文档](./mode)。 - -使用 mode 区分，默认情况下使用的是 `drag-canvas`，但用户需要切换到框选时，通过 `graph.setModel('brush')` 即可实现，此时同样的交互产生的就是框选的效果。 +上面这种方式是使用不同的 mode 来区分，mode 可以达到使用相同交互动作而产生不同的效果。默认模式中，使用的是拖拽操作由 `drag-canvas` 响应。当用户通过通过 `graph.setMode('brush')` 切换到 brush 模式后，此时同样的拖拽操作由 `brush-select` 响应。更多关于 mode 的内容请参考 [Mode](/zh/docs/manual/middle/states/mode) 教程。 ### collapse-expand - 含义：只适用于树图，展开或收起节点； - `type: 'collapse-expand'`； - 参数： - - `trigger`：收起和展开树图的方式，支持`click`和`dblclick`两种方式，默认为`click`； - - `onChange`：收起或展开的回调函数，警告 `3.1.2 `版本中将移除。 + - `trigger`：收起和展开树图的方式，支持 `'click'` 和 `'dblclick'` 两种方式。默认为 `'click'`，即单击； + - `onChange`：收起或展开的回调函数。警告：V3.1.2 版本中将移除。 **用法** @@ -309,7 +312,7 @@ const graph = new G6.TreeGraph({ - 含义：收起和展开群组； - `type：'collapse-expand-group'` - 参数： - - 3.1.2 trigger：收起和展开节点分组的方式，支持`click`和`dblclick`两种方式，默认为`dblclick` + - trigger：收起和展开节点分组的方式。支持 `'click'` 和 `'dblclick'` 两种方式。默认为 `'dblclick'`，即双击。 **默认配置** ```javascript @@ -358,8 +361,8 @@ const graph = new G6.Graph({ - 含义：拖动节点分组中的节点； - `type：'drag-node-with-group'`； - 参数： - - `delegateStyle`：拖动节点分组时 `delegate` 的样式； - - `maxMultiple`： + - `delegateStyle`：拖动节点时 `delegate` 的样式； + - `maxMultiple`； - `minMultiple`。 **默认配置** diff --git a/docs/manual/middle/states/mode.en.md b/docs/manual/middle/states/mode.en.md index e091d2e46b..fd511f0cac 100644 --- a/docs/manual/middle/states/mode.en.md +++ b/docs/manual/middle/states/mode.en.md @@ -3,19 +3,19 @@ title: Interaction Mode order: 5 --- -## 什么是 Mode -用户在交互一张图时，可能由于意图不同而存在不同的交互模式，例如在编辑模式下点击节点需要弹出窗口让用户编辑，在查看模式下点击节点需要选中节点。 +## What is Mode +When a user interacts with a graph, there may be different interaction modes due to different intents. For example, clicking a node in edit mode requires a pop-up window for the user to edit, and clicking a node in view mode requires selecting a node. -为了解决上述问题，G6 提供了交互模式 Mode，它是图上交互行为 [Behavior](./defaultBehavior) 的管理机制。一个图上可以有存在多种交互模式，每个交互模式包含多种交互行为 [Behavior](./defaultBehavior)。 +To address the problem above, G6 provides the interaction Mode. It is a manage mechanism for the [Behavior](/en/docs/manual/middle/states/defaultBehavior) on a graph. There can be multiple interaction modes on a graph, each interaction mode contains multiple interaction [Behavior](/en/docs/manual/middle/states/defaultBehavior)s. -例如，存在 default 和 edit 两种 mode（交互模式）: -- default 模式中包含点击选中节点行为和拖拽画布行为; -- edit 模式中包含点击节点弹出编辑框行为和拖拽节点行为。 +For example, there are two modes on a graph: default and edit: +- default mode contains click to select node behavior and drag canvas behavior; +- edit mode contains click node to pop up an editing window behavior and drag node behavior; -默认情况下，该图对 default 模式中的行为见效，即点击节点时节点被选中而不是弹出编辑框。用户可以通过简单的命令切换该图的行为模式到 edit 模式，则 default 模式中的行为失效，edit 交互模式中的行为起效，即点击节点将弹出编辑框。 +Default mode takes effect by default, which means the node will be selected by clicking insteand of a editing window pops up. You can switch to edit mode by simple code, then the behaviors in the defualt mode will not take effect any more, which means the editing window will pop up when user clicks a node. -## 配置 Mode -在实例化图时配置 `modes` 属性： +## Configure Mode +Configure the `modes` when instantiating a Graph: ```javascript const graph = new G6.Graph({ container: 'mountNode', @@ -29,50 +29,50 @@ const graph = new G6.Graph({ }); ``` -以上是模式定义的一个例子。在图上定义了两个模式，分别是 `default`， `edit` 。其中 `default` 包含两个 [Behavior](./defaultBehavior)：`'drag-canvas'` 和 `'``zoom-canvas'`，都使用行为的默认参数。 +There are two modes on the graph defined above: `default` and `edit`. The `default` mode contains two [Behavior](/en/docs/manual/middle/states/defaultBehavior)s: `'drag-canvas'` and `'``zoom-canvas'` with default configurations. -## 切换 Mode -默认时 Graph 会使用 `default` 的 Mode ，可以拖动和缩放画布，当需要点击选中节点时，可以通过 `graph.``setMode('edit')` 来切换到 `edit` 的 Mode 。 +## Switch Mode +The `default` mode takes effect by default. Users are allowed to drag and zoom the canvas. Swich the mode to edit mode by `graph.``setMode('edit')` to select a node by clicking. ```javascript graph.setMode('edit'); ``` -此时 Graph 就支持了拖拽节点，`default` 模式下的拖拽画布 `'drag-canvas'`、放缩画布行为 `'zoom-canvas'` 失效。 +Now, the graph supports clicking to select nodes. The `'drag-canvas'` and `'zoom-canvas'` behaviors in `default` do not take effect any more. -在调用了 `setMode` 方法后，G6 内部进行了以下操作： - -- 解绑目前图模式的所有事件监听； -- 生成新的 Behavior ，进行事件初始化； -- 绑定新的行为对应的事件监听。 +`setMode` calls the following operations inside: +- Unbind all the event listeners of current mode; +- Generate new Behaviors. Initialize the events; +- Bind event listeners to the new Behaviors. -## 编辑已有的 Mode -如果有已经定义好的 Behavior （[内置 Behavior](./defaultBehavior) 或 [自定义 Behavior](../../advanced/custom-behavior)），需要把它添加到某个模式下，可以通过 `graph.addBehaviors` 方法；需要从某个模式中移除一些 Behavior，可以使用 `graph.removeBehaviors` 方法。如下示例： +## Edit Mode +If there are existing Behaviors ([Built-in Behavior](/en/docs/manual/middle/states/defaultBehavior) or [Custom Behavior](/en/docs/manual/advanced/custom-behavior)), You can add them to a mode by `graph.addBehaviors`, and also remove some Behaviors by `graph.removeBehaviors`: + ```javascript -// 向 default 模式中添加名为 drag-canvas 的行为，并使用行为的默认配置 +// Add drag-canvas with configurations from default mode graph.addBehaviors('drag-canvas', 'default'); -// 从 default 模式中移除名为 drag-canvas 的行为 +// Remove drag-canvas from default mode graph.removeBehaviors('drag-canvas', 'default'); -// 向 edit 模式中添加名为 drag-canvas 的行为，并定义个性化配置 +// Add drag-canvas with configurations into edit mode graph.addBehaviors({ type: 'drag-canvas', direction: 'x' }, 'edit'); -// 从 edit 模式中移除名为 drag-canvas 的行为 +// Remove drag-canvas from edit mode graph.removeBehaviors('drag-canvas', 'edit'); -// 一次向 default 模式中添加多个行为 +// Add multiple behaviors into default mode graph.addBehaviors([ 'drag-canvas', 'zoom-canvas' ], 'default'); -// 一次从 default 模式中移除多个行为 +// Remove multiple behaviors from default mode graph.removeBehaviors([ 'drag-canvas', 'zoom-canvas' ], 'default'); ``` -## 相关阅读 +## Related Reading -- [内置交互行为 Behavior](./defaultBehavior) -- [自定义交互行为 Behavior](../../advanced/custom-behavior) +- [Built-in Behavior](/en/docs/manual/middle/states/defaultBehavior) +- [Custom Behavior](/en/docs/manual/advanced/custom-behavior) diff --git a/docs/manual/middle/states/mode.zh.md b/docs/manual/middle/states/mode.zh.md index 539e93d1f8..356e2e87d7 100644 --- a/docs/manual/middle/states/mode.zh.md +++ b/docs/manual/middle/states/mode.zh.md @@ -6,7 +6,7 @@ order: 5 ## 什么是 Mode 用户在交互一张图时，可能由于意图不同而存在不同的交互模式，例如在编辑模式下点击节点需要弹出窗口让用户编辑，在查看模式下点击节点需要选中节点。 -为了解决上述问题，G6 提供了交互模式 Mode，它是图上交互行为 [Behavior](./defaultBehavior) 的管理机制。一个图上可以有存在多种交互模式，每个交互模式包含多种交互行为 [Behavior](./defaultBehavior)。 +为了解决上述问题，G6 提供了交互模式 Mode，它是图上交互行为 [Behavior](/zh/docs/manual/middle/states/defaultBehavior) 的管理机制。一个图上可以有存在多种交互模式，每个交互模式包含多种交互行为 [Behavior](/zh/docs/manual/middle/states/defaultBehavior)。 例如，存在 default 和 edit 两种 mode（交互模式）: - default 模式中包含点击选中节点行为和拖拽画布行为; @@ -29,16 +29,16 @@ const graph = new G6.Graph({ }); ``` -以上是模式定义的一个例子。在图上定义了两个模式，分别是 `default`， `edit` 。其中 `default` 包含两个 [Behavior](./defaultBehavior)：`'drag-canvas'` 和 `'``zoom-canvas'`，都使用行为的默认参数。 +以上是模式定义的一个例子。在图上定义了两个模式，分别是 `default`，`edit`。其中 `default` 包含两个 [Behavior](/zh/docs/manual/middle/states/defaultBehavior)：`'drag-canvas'` 和 '`zoom-canvas'`，都使用行为的默认参数。 ## 切换 Mode -默认时 Graph 会使用 `default` 的 Mode ，可以拖动和缩放画布，当需要点击选中节点时，可以通过 `graph.``setMode('edit')` 来切换到 `edit` 的 Mode 。 +默认时 graph 会使用 `default` 模式 ，可以拖动和缩放画布，当需要点击选中节点时，可以通过 `graph.setMode('edit')` 来切换到 `edit` 的 Mode 。 ```javascript graph.setMode('edit'); ``` -此时 Graph 就支持了拖拽节点，`default` 模式下的拖拽画布 `'drag-canvas'`、放缩画布行为 `'zoom-canvas'` 失效。 +此时 graph 便支持了点击选中节点，`default` 模式下的拖拽画布 `'drag-canvas'`、放缩画布行为 `'zoom-canvas'` 失效。 在调用了 `setMode` 方法后，G6 内部进行了以下操作： @@ -48,7 +48,7 @@ graph.setMode('edit'); ## 编辑已有的 Mode -如果有已经定义好的 Behavior （[内置 Behavior](./defaultBehavior) 或 [自定义 Behavior](../../advanced/custom-behavior)），需要把它添加到某个模式下，可以通过 `graph.addBehaviors` 方法；需要从某个模式中移除一些 Behavior，可以使用 `graph.removeBehaviors` 方法。如下示例： +如果有已经定义好的 Behavior （[内置 Behavior](/zh/docs/manual/middle/states/defaultBehavior) 或 [自定义 Behavior](/zh/docs/manual/advanced/custom-behavior)），需要把它添加到某个模式下，可以通过 `graph.addBehaviors` 方法；需要从某个模式中移除一些 Behavior，可以使用 `graph.removeBehaviors` 方法。如下示例： ```javascript // 向 default 模式中添加名为 drag-canvas 的行为，并使用行为的默认配置 graph.addBehaviors('drag-canvas', 'default'); @@ -74,5 +74,5 @@ graph.removeBehaviors([ 'drag-canvas', 'zoom-canvas' ], 'default'); ## 相关阅读 -- [内置交互行为 Behavior](./defaultBehavior) -- [自定义交互行为 Behavior](../../advanced/custom-behavior) +- [内置交互行为 Behavior](/zh/docs/manual/middle/states/defaultBehavior) +- [自定义交互行为 Behavior](/zh/docs/manual/advanced/custom-behavior) diff --git a/docs/manual/middle/states/state.en.md b/docs/manual/middle/states/state.en.md index b56532d910..98f1d5e4ac 100644 --- a/docs/manual/middle/states/state.en.md +++ b/docs/manual/middle/states/state.en.md @@ -3,92 +3,32 @@ title: State order: 6 --- -## 什么是 state -G6 中的 **state**，指的是状态，包括**交互状态**和**业务状态**两种。 +## What is State +The **State** in G6 is the state of an item (node/edge), including **Interaction State** and **Bussiness State**. -### 交互状态 -交互状态是与具体的交互动作密切相关的，如用户使用鼠标选中某个节点，hover 到某条边。 +In G6, the way to configure interaction state and business state is the same. For some users who only use G6 to develop of a certain requirement, and do not want to understand G6 in depth, there is no need to distinguish the difference between the interactive state and the business state. You can define and use the states in the same way without understanding cost. -G6 中默认处理的是交互状态。 +### Interaction State +The interaction state is closely related to specific interaction actions, such as the user using a mouse to select a node, or hover an edge. -### 业务状态 -指根据用户业务需求自定义的状态。业务状态是与交互动作无关的，与具体业务逻辑强相关的，也可理解为是强数据驱动的。如某个任务的执行状态、某条申请的审批状态等，不同的数据值代表不同的业务状态。业务状态与用户交互动作无关，但在 G6 中的处理方式同交互状态一致。 +G6 handles interactive states by default. -## 何时使用 state -判断是否该使用 state 的原则很简单，从交互和业务两个层面来看： +### Bussiness State +Business state refers to the states customized according to the user's business needs. Business state is not related to interaction actions, and is strongly related to specific business logic. It can also be understood as being strongly data-driven. Such as the execution status of a task, the approval state of an application, etc., different data values ​​represent different business states. Business state has nothing to do with user interaction, but it is handled in the same way as interaction state in G6. -- 某个交互动作要改变节点或边的样式及属性； -- 呈现给用户的内容会根据数据改变（如 1 代表成功，0 代表失败）。 +## When to Use State +The principle of judging whether or not to use state comes from the perspective of interaction and business: -满足上述条件其一，则应该使用 state。 +- Some interactions need to change the style and properties of nodes or edges; +- The content presented to the user will change based on the data (eg 1 for success, 0 for failure). -## 配置不同 state 的样式 -在 G6 中，配置交互状态和业务状态的方式是相同的。对于部分只使用 G6 来完成某个需求的开发，而不想深入理解G6的用户，其实不用区分交互状态和业务状态的区别，使用相同的方式定义状态，使用相同的方式使用状态，完全没有理解成本。 +If one of these conditions is met, state should be used. -在 G6 中，定义 state 时，我们有两种选择： - -- 在实例化 Graph 时，通过 `nodeStateStyles` 和 `edgeStateStyles` 来定义； -- 在自定义节点时，在 options 配置项的 `stateStyles` 中定义状态。 - -### 实例化 Graph 时定义 state 样式 -```javascript -const graph = new G6.Graph({ - container: 'mountNode', - width: 800, - height: 600, - defaultNode: { - shape: 'diamond', - style: { // 默认状态样式 - fill: 'blue' - } - }, - nodeStateStyles: { - hover: { // hover 状态为 true 时的样式 - fill: '#d3adf7' - }, - running: { // running 状态为 true 时的样式 - stroke: 'steelblue' - } - } -}) -``` - -上面的实例代码中，我们在实例化 Graph 时候，通过 `nodeStateStyles` 定义了交互状态 `hover` 和业务状态`running`，当用户操作过程中，鼠标 `hover` 到某个节点上时，节点的填充色就会变为指定的颜色，当某个任务状态变为正在执行时，节点的边框就会变为 `running` 状态定义的颜色。
- -同理，defaultEdge 中的 style 属性定义了默认状态下边的样式，使用 `edgeStateStyles` 可以定义不同状态下边的样式。 - -### 自定义节点和边时定义 state 样式 -下面代码是在自定义节点时候通过 `stateStyles` 定义的交互状态 `hover` 和 `selected`。用户在操作过程中，如果hover到某个节点，则节点的透明度会变为 0.8，如果选中某个节点，选中节点的边框宽度变为 3。 -```javascript -G6.registerNode('customShape', { - // 自定义节点时的配置 - options: { - size: 60, - style: { - lineWidth: 1 - }, - stateStyles: { - // 鼠标hover状态下的配置 - hover: { - fillOpacity: 0.8 - }, - // 选中节点状态下的配置 - selected: { - lineWidth: 3 - } - } - } -} -``` - - -## 使用 state -不管使用哪种方式，当我们定义好了 state 以后，**使用 `graph.setItemState` 来使定义的状态生效**。 - -那么，我们该在什么地方使用 **`graph.setItemState`** 来使 state 生效呢？一种是直接使用 `graph.on` 监听事件，在回调中使 state 生效，另一种是在自定义 Behavior 中使 state 生效。 +## Using state +After defining the state, you can activate it by **`graph.setItemState`**, which can be called in the listeners like `graph.on` or the custom Behavior, or any place as you wish. ### graph.on -在回调函数中使定义的交互状态 hover 生效。 +Activate the hover state in the event listeners. ```javascript graph.on('node:mouseenter', evt => { const { item } = evt @@ -102,7 +42,7 @@ graph.on('node:mouseleave', evt => { ``` ### Behavior -在自定义 Behavior 中使定义的交互状态 selected 生效。 +Activate the selected state in custom Behavior. ```javascript G6.registerBehavior('nodeClick', { getEvents() { @@ -122,5 +62,67 @@ G6.registerBehavior('nodeClick', { }) ``` -## 小结 -G6 底层提供了状态管理的能力，通过使用 state，简化了状态管理，降低了用户的认知成本。更多关于 G6 中状态的内容请参考 [G6 状态量思考](https://www.yuque.com/antv/g6/xiux28)。 + +## Configure Styles for State +In last section, we call `graph.setItemState` to activate/inactivate the states on a node or an edge. But it just marks the state on the item object. To reflect these states to the visual space which is observed by the end users, we need to set the item styles for different states to response the states change. + +There are two choices to define the styles of a state: + +- Define the state styles in `nodeStateStyles` and `edgeStateStyles` when instantiating a Graph; +- Configure the `stateStyles` in options when customizing a node/edge. + +### Configure When instantiating a Graph +```javascript +const graph = new G6.Graph({ + container: 'mountNode', + width: 800, + height: 600, + defaultNode: { + shape: 'diamond', + style: { // Node style on default state + fill: 'blue' + } + }, + nodeStateStyles: { + hover: { // The node style when it is on the its hover state is true + fill: '#d3adf7' + }, + running: { // The node style when it is on the its running state is true + stroke: 'steelblue' + } + } +}) +``` + +The code above defines the styles of interaction state `hover` and bussiness state `running` by `nodeStateStyles`, which means when the mouse `hover` a node, the filling color of the node will be changed into `'#d3adf7'`. When the `running` of a node is activated, the stroke color of the node will be changed into `'steelblue'`.
+ +Similarly, the `style` of `defaultEdge` defines the styles of the node on the default state. And `edgeStateStyles` can be used for defined the styles on other states. + +### Configure Styles When Customizing Node +The following code defines the styles for interaction states `hover` and `selected` by `stateStyles`. When user hovers anode, the opacity of the node will reduce to 0.8. When user clicks the ndoe, the line width of the stroke will widen to 3. +```javascript +G6.registerNode('customShape', { + // The configurations of the custom node + options: { + size: 60, + style: { + lineWidth: 1 + }, + stateStyles: { + // The style of the node when the mouse hovers the node + hover: { + fillOpacity: 0.8 + }, + // The style of the node when the node is selected + selected: { + lineWidth: 3 + } + } + } +} +``` + + + +## Conclusion +G6 provides the state management for simplify the states of the items. For more information about the state thinking, please refer to The Thinking of the State in G6. diff --git a/docs/manual/middle/states/state.zh.md b/docs/manual/middle/states/state.zh.md index 3067c32b4b..aae7db9f79 100644 --- a/docs/manual/middle/states/state.zh.md +++ b/docs/manual/middle/states/state.zh.md @@ -6,6 +6,8 @@ order: 6 ## 什么是 state G6 中的 **state**，指的是状态，包括**交互状态**和**业务状态**两种。 +在 G6 中，配置交互状态和业务状态的方式是相同的。对于部分只使用 G6 来完成某个需求的开发，而不想深入理解G6的用户，其实不用区分交互状态和业务状态的区别，使用相同的方式定义状态，使用相同的方式使用状态，完全没有理解成本。 + ### 交互状态 交互状态是与具体的交互动作密切相关的，如用户使用鼠标选中某个节点，hover 到某条边。 @@ -22,70 +24,9 @@ G6 中默认处理的是交互状态。 满足上述条件其一，则应该使用 state。 -## 配置不同 state 的样式 -在 G6 中，配置交互状态和业务状态的方式是相同的。对于部分只使用 G6 来完成某个需求的开发，而不想深入理解G6的用户，其实不用区分交互状态和业务状态的区别，使用相同的方式定义状态，使用相同的方式使用状态，完全没有理解成本。 - -在 G6 中，定义 state 时，我们有两种选择： - -- 在实例化 Graph 时，通过 `nodeStateStyles` 和 `edgeStateStyles` 来定义； -- 在自定义节点时，在 options 配置项的 `stateStyles` 中定义状态。 - -### 实例化 Graph 时定义 state 样式 -```javascript -const graph = new G6.Graph({ - container: 'mountNode', - width: 800, - height: 600, - defaultNode: { - shape: 'diamond', - style: { // 默认状态样式 - fill: 'blue' - } - }, - nodeStateStyles: { - hover: { // hover 状态为 true 时的样式 - fill: '#d3adf7' - }, - running: { // running 状态为 true 时的样式 - stroke: 'steelblue' - } - } -}) -``` - -上面的实例代码中，我们在实例化 Graph 时候，通过 `nodeStateStyles` 定义了交互状态 `hover` 和业务状态`running`，当用户操作过程中，鼠标 `hover` 到某个节点上时，节点的填充色就会变为指定的颜色，当某个任务状态变为正在执行时，节点的边框就会变为 `running` 状态定义的颜色。
- -同理，defaultEdge 中的 style 属性定义了默认状态下边的样式，使用 `edgeStateStyles` 可以定义不同状态下边的样式。 - -### 自定义节点和边时定义 state 样式 -下面代码是在自定义节点时候通过 `stateStyles` 定义的交互状态 `hover` 和 `selected`。用户在操作过程中，如果hover到某个节点，则节点的透明度会变为 0.8，如果选中某个节点，选中节点的边框宽度变为 3。 -```javascript -G6.registerNode('customShape', { - // 自定义节点时的配置 - options: { - size: 60, - style: { - lineWidth: 1 - }, - stateStyles: { - // 鼠标hover状态下的配置 - hover: { - fillOpacity: 0.8 - }, - // 选中节点状态下的配置 - selected: { - lineWidth: 3 - } - } - } -} -``` - ## 使用 state -不管使用哪种方式，当我们定义好了 state 以后，**使用 `graph.setItemState` 来使定义的状态生效**。 - -那么，我们该在什么地方使用 **`graph.setItemState`** 来使 state 生效呢？一种是直接使用 `graph.on` 监听事件，在回调中使 state 生效，另一种是在自定义 Behavior 中使 state 生效。 +**使用 `graph.setItemState` 来使定义的状态生效**。该函数可以在监听函数 `graph.on` 中被调用吗，也可以在另一种是在自定义 Behavior 中调用，或在其他任意地方用于响应交互/业务的变化。 ### graph.on 在回调函数中使定义的交互状态 hover 生效。 @@ -122,5 +63,65 @@ G6.registerBehavior('nodeClick', { }) ``` +## 配置不同 state 的样式 +上小节使用 `graph.setItemState` 使某些状态在元素上生效/失效，仅仅是为该元素做了某些状态的标识。为了将这些状态反应到终端用户所见的视觉空间中，我们需要为不同的状态设置不同的元素样式，以响应元素状态的变化。 + +在 G6 中，有两种方式配置不同状态的样式： + +- 在实例化 Graph 时，通过 `nodeStateStyles` 和 `edgeStateStyles` 定义； +- 在自定义节点时，在 options 配置项的 `stateStyles` 中定义状态。 + +### 实例化 Graph 时定义 state 样式 +```javascript +const graph = new G6.Graph({ + container: 'mountNode', + width: 800, + height: 600, + defaultNode: { + shape: 'diamond', + style: { // 默认状态样式 + fill: 'blue' + } + }, + nodeStateStyles: { + hover: { // hover 状态为 true 时的样式 + fill: '#d3adf7' + }, + running: { // running 状态为 true 时的样式 + stroke: 'steelblue' + } + } +}) +``` + +上面的实例代码中，我们在实例化 Graph 时候，通过 `nodeStateStyles` 定义了交互状态 `hover` 和业务状态 `running` 的样式，当用户操作过程中，鼠标 `hover` 到某个节点上时，节点的填充色就会变为指定的颜色，当某个任务状态变为正在执行时，节点的边框就会变为 `running` 状态定义的颜色。
+ +同理，`defaultEdge` 中的 `style` 属性定义了默认状态下边的样式，使用 `edgeStateStyles` 可以定义不同状态下边的样式。 + +### 自定义节点和边时定义 state 样式 +下面代码是在自定义节点时候通过 `stateStyles` 定义的交互状态 `hover` 和 `selected` 时该类型节点的样式。用户在操作过程中，如果 hover 到某个节点，则节点的透明度会变为 0.8。如果选中某个节点，选中节点的边框宽度变为 3。 +```javascript +G6.registerNode('customShape', { + // 自定义节点时的配置 + options: { + size: 60, + style: { + lineWidth: 1 + }, + stateStyles: { + // 鼠标 hover 状态下的配置 + hover: { + fillOpacity: 0.8 + }, + // 选中节点状态下的配置 + selected: { + lineWidth: 3 + } + } + } +} +``` + + ## 小结 -G6 底层提供了状态管理的能力，通过使用 state，简化了状态管理，降低了用户的认知成本。更多关于 G6 中状态的内容请参考 [G6 状态量思考](https://www.yuque.com/antv/g6/xiux28)。 +G6 底层提供了状态管理的能力，通过使用 state，简化了状态管理，降低了用户的认知成本。更多关于 G6 中状态的内容请参考 G6 状态量思考。 diff --git a/docs/manual/tutorial/animation.en.md b/docs/manual/tutorial/animation.en.md index 0c1af2386a..e759d06463 100644 --- a/docs/manual/tutorial/animation.en.md +++ b/docs/manual/tutorial/animation.en.md @@ -3,11 +3,11 @@ title: Animation* order: 6 --- -The animation mechanism is too complicated to understand by beginners and out of the scope of the tutorial. In this chapter, we only introduce the animation in G6 briefly. For more information, please refer to [Basic Animation](../advanced/animation). +The animation mechanism is too complicated to understand by beginners and out of the scope of the tutorial. In this chapter, we only introduce the animation in G6 briefly. For more information, please refer to [Basic Animation](/en/docs/manual/advanced/animation/). There are two levels of animation in G6: -- GLobal animation: Transform the graph when the changes are global; +- GLobal animation: Transform the graph animatively when the changes are global; - Item animation: The animation on a node or an edge. ## Global Animation @@ -22,14 +22,14 @@ Configure `animate: true` when instantiating a graph to achieve it. ```javascript const graph = new G6.Graph({ // ... // Other configurations - animate: true // Boolean, whether activate the animation when global changes happen + animate: true // Boolean, whether to activate the animation when global changes happen }); ``` ## Item Animation -G6 allows user to custom animation for item when register a type of custom item.
+G6 allows user to customize animation for item when register a type of custom item.
-For more cases, please refer to [Animation Case](/zh/examples/scatter/node)。 +For more cases, please refer to [Animation Case](/en/examples/scatter/node). diff --git a/docs/manual/tutorial/animation.zh.md b/docs/manual/tutorial/animation.zh.md index 75ee8df06b..a2d55b2854 100644 --- a/docs/manual/tutorial/animation.zh.md +++ b/docs/manual/tutorial/animation.zh.md @@ -3,7 +3,7 @@ title: 动画（选读） order: 6 --- -由于动画机制较为复杂，我们未在 Tutorial-案例 中增加动画。本文简单描述了 G6 中的动画，希望快速上手的用户可以跳过本文，希望深入了解的用户可参见：[基础动画](../advanced/animation)。 +由于动画机制较为复杂，我们未在 Tutorial-案例 中增加动画。本文简单描述了 G6 中的动画，希望快速上手的用户可以跳过本文，希望深入了解的用户可参见：[基础动画](/zh/docs/manual/advanced/animation/)。 G6 的动画分为两个层次： @@ -32,4 +32,4 @@ G6 允许用户通过自定义节点/边的方式，给元素增加动画效果 -更多关于动画的案例请参考[G6 中的动画案例](/zh/examples/scatter/node)。 +更多关于动画的案例请参考 [G6 中的动画案例](/zh/examples/scatter/node)。 diff --git a/docs/manual/tutorial/behavior.en.md b/docs/manual/tutorial/behavior.en.md index 3ffd1a8405..bf3ae3c28c 100644 --- a/docs/manual/tutorial/behavior.en.md +++ b/docs/manual/tutorial/behavior.en.md @@ -17,14 +17,14 @@ G6 provides several **Built-in** interaction behaviors. You can enable these beh - `drag-canvas`: enable the canvas to be dragged; - `zoom-canvas`: enable the canvas to be zoomed; -Refer to [Behavior](../middle/states/defaultBehavior) for more information. +Refer to [Interaction Behavior](/en/docs/manual/middle/states/defaultBehavior) document for more information. ### Mode -Mode is a mechanism for state management in G6. One mode is a set of several Behaviors. You can assemble different Behaviors to modes. The concept of mode is too complicated to understand for the beginners of G6. You do not need to know it well in this tutorial. For more information, please refer to [Mode](../middle/states/mode). +Mode is a mechanism for state management in G6. One mode is a set of several Behaviors. You can assemble different Behaviors to modes. The concept of mode is too complicated to understand for the beginners of G6. You do not need to know it well in this tutorial. For more information, please refer to [Interaction Mode](/en/docs/manual/middle/states/mode). ### Interaction State -[State](../middle/states/state) is a mechanism of item state in G6. You can set different item styles for different states. When the state of an item is changed, the style will be updated automatically. +[State](/en/docs/manual/middle/states/state) is a mechanism of item state in G6. You can set different item styles for different states. When the state of an item is changed, the style will be updated automatically. For example, set the state `'click'` of a node as `true` or `false`, and set the node style of the state `'click'` with thicker stroke. This style will take effect when the state `'click'` is switched to `true`, and restore when `'click'` state is switched to `false`. There will be a specific in the Usage part. ## Usage @@ -39,7 +39,7 @@ const graph = new G6.Graph({ }); ``` -The code above uses the Behaviors by assigning their types. Besides, you can also configure the parameters for them, e.g. the sensitivity of zooming, max/min zoom ratio. Refer to [Behavior](../middle/states/defaultBehavior) for more detail. +The code above uses the Behaviors by assigning their types. Besides, you can also configure the parameters for them, e.g. the sensitivity of zooming, max/min zoom ratio. Refer to [Ineteraction Behavior](/en/docs/manual/middle/states/defaultBehavior) document for more detail. `modes` object above defines a set of interaction modes of the graph, where `default` is the default mode, which includes `'drag-canvas'`, `'zoom-canvas'`, and `'drag-node'`. You can add more modes with their Behaviors into `modes`, e.g. `edit` mode: @@ -51,12 +51,12 @@ modes: { } ``` -Refer to [Mode](/zh/docs/manual/middle/states/mode) and [Behavior](/zh/docs/manual/middle/states/defaultBehavior) for more detail. +Refer to [Interaction Mode](/en/docs/manual/middle/states/mode) and [Interaction Behavior](/en/docs/manual/middle/states/defaultBehavior) document for more detail. ### Hover and Click to Change Styles -Sometimes, the styles of the items interacted by users should be updated to make the response. As shown in figure 1, the styles are changed when user hovers the node, clicks the node, and clicks the edge. It is achieved by [ State](../middle/states/state) mechanism. In other word, whether the item is clicked or hovered can be described as some states. You are able to set the styles for different states by two steps: +Sometimes, the styles of the items interacted by users should be updated to make the response. As shown in figure 1, the styles are changed when user hovers the node, clicks the node, and clicks the edge. It is achieved by [State](/en/docs/manual/middle/states/state) mechanism. In other word, whether the item is clicked or hovered can be described as some states. You are able to set the styles for different states by two steps: - Step 1: Set the styles for different states; - Step 2: Listen to the relative events and switch the states. @@ -95,7 +95,7 @@ const graph = new G6.Graph({ ``` #### Listen to the Events and Switch the States -The listeners in G6 are mounted on the instance of Graph. `graph` is the instance of G6.Graph in the following code. `graph.on()` listens some event (`click` / `mouseenter` / `mouseleave` / ... all the events are collected in: [Event API](../../api/Event)）of some type of item（`node` / `edge`） +The listeners in G6 are mounted on the instance of Graph. `graph` is the instance of G6.Graph in the following code. `graph.on()` listens some event (`click` / `mouseenter` / `mouseleave` / ... all the events are collected in: [Event API](/en/docs/api/Event)）of some type of item（`node` / `edge`） ```javascript // add listener on graph graph.on('itemType:event', e => { @@ -156,7 +156,7 @@ graph.on('edge:click', e => { container: 'mountNode', width: 800, height: 600, - // Default attributes for all the nodes + // Default properties for all the nodes defaultNode: { labelCfg: { style: { @@ -164,7 +164,7 @@ graph.on('edge:click', e => { } } }, - // Default attributes for all the edges + // Default properties for all the edges defaultEdge: { labelCfg: { autoRotate: true @@ -288,4 +288,4 @@ graph.on('edge:click', e => { ``` -**⚠️Attention**: 
Replace the url `'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'` to change the data into yours. +⚠️Attention: 
Replace the url `'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'` to change the data into yours. diff --git a/docs/manual/tutorial/behavior.zh.md b/docs/manual/tutorial/behavior.zh.md index f91be0baea..b8b7a9c4d0 100644 --- a/docs/manual/tutorial/behavior.zh.md +++ b/docs/manual/tutorial/behavior.zh.md @@ -3,11 +3,11 @@ title: 图的交互 Behavior order: 4 --- -G6 封装了一系列交互方法，方便用户直接使用。本文将为 **Tutorial案例** 增加简单的交互：hover 节点、点击节点、点击边、放缩画布、拖拽画布。本节目标效果如下： +G6 封装了一系列交互方法，方便用户直接使用。本文将为 **Tutorial 案例** 增加简单的交互：hover 节点、点击节点、点击边、放缩画布、拖拽画布。本节目标效果如下： -
图 1 Tutorial案例的交互效果。
+> 图 1 Tutorial 案例的交互效果。 ## 基本概念 @@ -17,18 +17,18 @@ G6 中的交互行为。G6 **内置**了一系列交互行为，用户可以直 - `drag-canvas`：拖拽画布； - `zoom-canvas`：缩放画布。 -更多详见：[交互行为 Behavior](../middle/states/defaultBehavior) +更多详见：[交互行为 Behavior](/zh/docs/manual/middle/states/defaultBehavior) ### 交互管理 Mode -Mode 是 G6 交互行为的管理机制，一个 mode 是多种行为 Behavior 的组合，允许用户通过切换不同的模式进行交互行为的管理。由于该概念较为复杂，在本入门教程中，读者不需要对该机制深入理解。如有需求，参见 [G6 中的 mode](../middle/states/mode)。 +Mode 是 G6 交互行为的管理机制，一个 mode 是多种行为 Behavior 的组合，允许用户通过切换不同的模式进行交互行为的管理。由于该概念较为复杂，在本入门教程中，读者不需要对该机制深入理解。如有需求，参见 [交互模式 Mode](/zh/docs/manual/middle/states/mode)。 ### 交互状态 State -[状态 State](../middle/states/state) 是 G6 中的状态机制。用户可以为图中的元素（节点/边）设置不同的状态及不同状态下的样式。在状态发生变化时，G6 自动更新元素的样式。例如，可以为节点设置状态 `'click'` 为 `true` 或 `false`，并为节点设置 `'click'` 的样式为加粗节点边框。当 `'click'` 状态被切换为 `true` 时，节点的边框将会被加粗，`'click'` 状态被切换为 `false` 时，节点的样式恢复到默认。在下面的使用方法中，将会有具体例子。 +[状态 State](/zh/docs/manual/middle/states/state) 是 G6 中的状态机制。用户可以为图中的元素（节点/边）设置不同的状态及不同状态下的样式。在状态发生变化时，G6 自动更新元素的样式。例如，可以为节点设置状态 `'click'` 为 `true` 或 `false`，并为节点设置 `'click'` 的样式为加粗节点边框。当 `'click'` 状态被切换为 `true` 时，节点的边框将会被加粗，`'click'` 状态被切换为 `false` 时，节点的样式恢复到默认。在下面的使用方法中，将会有具体例子。 ## 使用方法 ### 拖拽、缩放——内置的交互行为 -在 G6 中使用内置 behavior 的方式非常简单，只需要在图实例化时配置 `modes`。拖拽和缩放属于 G6 内置交互行为，修改代码如下： +在 G6 中使用内置 Behavior 的方式非常简单，只需要在图实例化时配置 `modes`。拖拽和缩放属于 G6 内置交互行为，修改代码如下： ```javascript const graph = new G6.Graph({ // ... // 其他配置项 @@ -38,7 +38,7 @@ const graph = new G6.Graph({ }); ``` -除了直接使用内置交互名称外，也可以为 behavior 配置参数，例如放缩画布的敏感度、最大/最小放缩程度等，具体用法参见 [内置的交互 Behavior](../middle/states/defaultBehavior)。 +除了直接使用内置交互名称外，也可以为 Behavior 配置参数，例如放缩画布的敏感度、最大/最小放缩程度等，具体用法参见 [交互行为 Behavior](/zh/docs/manual/middle/states/defaultBehavior)。 上面代码中的 `modes` 定义了 G6 的模式，`default` 是默认的模式，还可以允许有其他的模式，比如：编辑模式 `edit` 等。不同的模式，用户能进行的行为可以不同，比如默认模式能拖拽画布，编辑模式不允许拖拽画布： ```javascript @@ -49,18 +49,18 @@ modes: { } ``` -更多关于模式、行为可以参考: [交互模型 Mode](/zh/docs/manual/middle/states/mode)和[内置 Behavior](/zh/docs/manual/middle/states/defaultBehavior)。 +更多关于模式、行为可以参考: [交互模型 Mode](/zh/docs/manual/middle/states/mode) 和 [交互行为 Behavior](/zh/docs/manual/middle/states/defaultBehavior) 文档。 ### Hover、Click 改变样式——状态式交互 -有时我们希望通过交互可以将元素样式变成特定样式，如我们看到的图 1 中，鼠标 hover 节点、点击节点、点击边时，样式发生了变化。这里涉及到了 G6 中 [状态 State](../middle/states/state) 的概念。简单地说，是否 `hover` 、`click` 、任何操作（可以是自己起的状态名），都可以称为一种状态（state）。用户可以自由设置不同状态下的元素样式。要达到交互更改元素样式，需要两步： +有时我们希望通过交互可以将元素样式变成特定样式，如我们看到的图 1 中，鼠标 hover 节点、点击节点、点击边时，样式发生了变化。这里涉及到了 G6 中 [状态 State](/zh/docs/manual/middle/states/state) 的概念。简单地说，是否 `hover` 、`click` 、任何操作（可以是自己起的状态名），都可以称为一种状态（state）。用户可以自由设置不同状态下的元素样式。要达到交互更改元素样式，需要两步： - Step 1: 设置各状态下的元素样式； - Step 2: 监听事件并切换元素状态。 #### 设置各状态下的元素样式 -在实例化图时，通过 `nodeStateStyles` 和 `edgeStateStyles` 两个配置项可以配置元素在不同状态下的样式。
为达到 **Tutorial案例** 中的效果： +在实例化图时，通过 `nodeStateStyles` 和 `edgeStateStyles` 两个配置项可以配置元素在不同状态下的样式。
为达到 **Tutorial 案例** 中的效果： - 鼠标 hover 节点时，该节点颜色变浅； - 点击节点时，该节点边框加粗变黑； @@ -93,7 +93,7 @@ const graph = new G6.Graph({ ``` #### 监听事件并切换元素状态 -G6 中所有元素监听都挂载在图实例上，如下代码中的 `graph` 对象是 G6.Graph 的实例，`graph.on()` 函数监听了某元素类型（`node` / `edge`）的某种事件（`click` / `mouseenter` / `mouseleave` / ... 所有事件参见：[Event API](../../api/Event)）。 +G6 中所有元素监听都挂载在图实例上，如下代码中的 `graph` 对象是 G6.Graph 的实例，`graph.on()` 函数监听了某元素类型（`node` / `edge`）的某种事件（`click` / `mouseenter` / `mouseleave` / ... 所有事件参见：[Event API](/zh/docs/api/Event)）。 ```javascript // 在图实例 graph 上监听 graph.on('元素类型:事件名', e => { @@ -101,7 +101,7 @@ graph.on('元素类型:事件名', e => { }); ``` -现在，我们通过下面代码，为 **Tutorial案例** 增加点和边上的监听事件，并在监听函数里使用 `graph.setItemState()` 改变元素的状态： +现在，我们通过下面代码，为 **Tutorial 案例** 增加点和边上的监听事件，并在监听函数里使用 `graph.setItemState()` 改变元素的状态： ```javascript // 鼠标进入节点 graph.on('node:mouseenter', e => { @@ -288,4 +288,4 @@ graph.on('edge:click', e => { ``` -**⚠️注意** 
若需更换数据，请替换 `'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'` 为新的数据文件地址。 +⚠️注意:
若需更换数据，请替换 `'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'` 为新的数据文件地址。 diff --git a/docs/manual/tutorial/elements.en.md b/docs/manual/tutorial/elements.en.md index 993291bb73..a899e02ce6 100644 --- a/docs/manual/tutorial/elements.en.md +++ b/docs/manual/tutorial/elements.en.md @@ -3,7 +3,7 @@ title: Configure the Items order: 2 --- -There are `Node` and `Edge` two types of items in a graph. In the last chapter, we rendered the **Tutorial Demo** with items with rough styles. Now, we are going to beautify the items while introducing the attributes of the items. +There are `Node` and `Edge` two types of items in a graph. In the last chapter, we rendered the **Tutorial Demo** with items with rough styles. Now, we are going to beautify the items while introducing the properties of the items. @@ -12,15 +12,15 @@ There are `Node` and `Edge` two types of items in a graph. In the last chapter, ## Basic Concept ### Graph Item -There are `Node` and `Edge` two types of items in a graph. Several [Built-in Nodes](../middle/elements/defaultNode) and [Built-in Edges](../middle/elements/defaultEdge) are provided by G6. The main difference between different types of items is their [Graphics Shape](../middle/keyConcept). For example, a node's graphics shape can be a circle, a rect, an image, or others. +There are `Node` and `Edge` two types of items in a graph. Several [Built-in Nodes](/en/docs/manual/middle/elements/nodes/defaultNode) and [Built-in Edges](/en/docs/manual/middle/elements/edges/defaultEdge) are provided by G6. The main difference between different types of items is their [Graphics Shape](/en/docs/manual/middle/keyconcept/shape-keyshape). For example, a node's graphics shape can be a circle, a rect, an image, or others. -## Attributes of Item -The attributes of an item can be be divided into two categories: +## Properties of Item +The properties of an item can be be divided into two categories: -- **Style Attribute `style`**: Corresponds to the style in Canvas. When the [State](../middle/states/state) of an item is changed, the style can be updated. It is an object named`style`; -- **Other Attribute**: Such as graphics `shape`, `id`, they are a kind of attributes that will not be changed when the [State](../middle/states/state) of the item is changed. +- **Style Property `style`**: Corresponds to the style in Canvas. When the [State](/en/docs/manual/middle/states/state) of an item is changed, the style can be updated. It is an object named `style`; +- **Other Property**: Such as graphics `shape`, `id`, they are a kind of properties that will not be changed when the [State](/en/docs/manual/middle/states/state) of the item is changed. -For example, When you change the state `'hover'` or `'click'` to `true` for a node A, only the **style attributes** of A can be updated, e.g. `fill`, `stroke`, and so on. The **other attributes** such as `shape` can not be changed. To update the other attributes, configure A by [graph.updateItem](../../api/Graph) manually. +For example, When you change the state `'hover'` or `'click'` to `true` for a node A, only the **style properties** of A can be updated, e.g. `fill`, `stroke`, and so on. The **other properties** such as `shape` can not be changed. To update the other properties, configure A by [graph.updateItem](/en/docs/api/Graph/#updateitemitem-model) manually. ### Data Structure The data structure of a node: @@ -32,13 +32,13 @@ The data structure of a node: label: 'node0' // The label labelCfg: { // The configurations for the label positions: 'center',// The relative position of the label - style: { // The style attributes of the label + style: { // The style properties of the label fontSize: 12, // The font size of the label - // ... // Other style attributes of the label + // ... // Other style properties of the label } } - // ..., // Other attributes of the node - style: { // The object of style attributes of the node + // ..., // Other properties of the node + style: { // The object of style properties of the node fill: '#000', // The filling color stroke: '#888', // The stroke color // ... // Other styleattribtues of the node @@ -46,7 +46,7 @@ The data structure of a node: } ``` -The data structure of an edge is similar to node, but two more attributes `source` and `target` in addition, representing the `id` of the source node and the `id` of the target node respectively. +The data structure of an edge is similar to node, but two more properties `source` and `target` in addition, representing the `id` of the source node and the `id` of the target node respectively.
We can refine the visual requirements in figure 1 of **Tutorial Demo** into: @@ -59,67 +59,67 @@ The data structure of an edge is similar to node, but two more attributes `sourc - R5: Configure the shape of nodes with `shape` according to the property `class` in node data; - R6: Configure the line widht of edges with `lineWidth` according to the property `weight` in edge data. -## Configure the Attributes -To satisfy different scenario, G6 provides 7 ways to configure the attributes for items. Here we will only introduce two of them: +## Configure the Properties +To satisfy different scenario, G6 provides 7 ways to configure the properties for items. Here we will only introduce two of them: -1. Configure the global attributes when instantiating a Graph; -2. Configure the attributes for different items in their data. +1. Configure the global properties when instantiating a Graph; +2. Configure the properties for different items in their data. -### 1. Configure the Global Attributes When Instantiating a Graph +### 1. Configure the Global Properties When Instantiating a Graph **Applicable Scene:** Unify the configurations for all the nodes or edges.
**Usage:** Configure it with two configurations of graph: -- `defaultNode`: The **Style Attribute** and **Other Attributes** in the default state; -- `defaultEdge`: The **Style Attribute** and **Other Attributes** in the default state. +- `defaultNode`: The **Style Property** and **Other Properties** in the default state; +- `defaultEdge`: The **Style Property** and **Other Properties** in the default state. -⚠️**Attention:** It is a way of unified global configuration, which does not distinguish the nodes with different properties (e.g. `class` and `weight`) in their data. That is to say, only R1, R2, R3, and R4 can be satisfied now: +⚠️Attention: It is a way of unified global configuration, which does not distinguish the nodes with different properties (e.g. `class` and `weight`) in their data. That is to say, only R1, R2, R3, and R4 can be satisfied now: > Figure 2  **Tutorial Demo** with items configured by global configurations. -
Configuer the `defaultNode` and `defaultEdge` for graph to achieve the expected effect: +
Configure the `defaultNode` and `defaultEdge` for graph to achieve the expected effect: ```javascript const graph = new G6.Graph({ // ... // Other configurations of the graph - // The style attributes and other attributes for all the nodes in the default state + // The style properties and other properties for all the nodes in the default state defaultNode:{ size: 30, // The size of nodes - // ... // The other attributes - // The style attributes of nodes + // ... // The other properties + // The style properties of nodes style: { fill: 'steelblue', // The filling color of nodes stroke: '#666', // The stroke color of nodes lineWidth: 1 // The line width of the stroke of nodes }, - // The attributes for label of nodes + // The properties for label of nodes labelCfg: { - // The style attributes for the label + // The style properties for the label style: { fill: '#fff' // The color of the text } } }, - // The style attributes and other attributes for all the edges in the default state + // The style properties and other properties for all the edges in the default state defaultEdge: { - // ... // The other attributes - // The style attributes of edges + // ... // The other properties + // The style properties of edges style: { opacity: 0.6, // The opacity of edges stroke: 'grey' // The color of the edges }, - // The attributes for label of edges + // The properties for label of edges labelCfg: { - autoRotate: true // Whether rotate the label according to the edges + autoRotate: true // Whether to rotate the label according to the edges } }, }); ``` -### 2. Configure the Attributes in Data +### 2. Configure the Properties in Data **Applicable Scene:** By this way, you can configure different items according to their properties in data.
Thus, the R5 and R6 can be satisfied now. -
**Usage:** Write the attributes into each item data, or traverse the data to assign the attributes. Here we show assigning the attrbiutes into data by traversing: +
**Usage:** Write the properties into each item data, or traverse the data to assign the properties. Here we show assigning the attrbiutes into data by traversing: ```javascript const nodes = remoteData.nodes; @@ -155,7 +155,7 @@ The result: > Figure 3 -From figure 3, we find some nodes are rendered as rects, some are ellipses. We also set the size to override the size in global configuration. The size is an array when the node is a rect or an ellipse. We did not set the size for circle node, so `size: 30` in global configuration will still take effect for circle node. That is to say, configuring items by writing into data has higher priority than global configurations. +From figure 3, we find some nodes are rendered as rects, some are ellipses. We also set the `size` to override the `size` in global configuration. The `size` is an array when the node is a rect or an ellipse. We did not set the `size` for circle node, so `size: 30` in global configuration will still take effect for circle node. That is to say, configuring items by writing into data has higher priority than global configurations. We further set the line widths for edges according to their weight: ```javascript @@ -183,8 +183,8 @@ const graph = new G6.Graph({ // ... defaultEdge: { // Remove the style here - labelCfg: { // The attributes for label of edges - autoRotate: true // Whether rotate the label according to the edges + labelCfg: { // The properties for label of edges + autoRotate: true // Whether to rotate the label according to the edges } } }); @@ -290,4 +290,4 @@ graph.render() ``` -**⚠️Attention**: 
Replace the url `'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'` to change the data into yours. +⚠️Attention: 
Replace the url `'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'` to change the data into yours. diff --git a/docs/manual/tutorial/elements.zh.md b/docs/manual/tutorial/elements.zh.md index b7fc8352ac..20e9a244b0 100644 --- a/docs/manual/tutorial/elements.zh.md +++ b/docs/manual/tutorial/elements.zh.md @@ -3,24 +3,24 @@ title: 元素及其配置 order: 2 --- -图的元素特指图上的**节点**`Node`和**边**`Edge`。在上一章节中，我们已经将**Tutorial案例**的图绘制了出来，但是各个元素及其 `label` 在视觉上很简陋。本文通过将上一章节中简陋的元素美化成如下效果，介绍元素的属性、配置方法。 +图的元素特指图上的**节点** `Node` 和**边** `Edge` 。在上一章节中，我们已经将**Tutorial 案例**的图绘制了出来，但是各个元素及其 `label` 在视觉上很简陋。本文通过将上一章节中简陋的元素美化成如下效果，介绍元素的属性、配置方法。 -> 图 1  元素属性配置后的 **Tutorial案例**。 +> 图 1  元素属性配置后的 **Tutorial 案例**。 ## 基本概念 ### 图的元素 -图的元素特指图上的**节点**`Node`和**边**`Edge`。G6 内置了一系列 [内置的节点](../middle/elements/defaultNode) 和[内置的边](../middle/elements/defaultEdge)，供用户自由选择。G6 不同的内置节点或不同的内置边主要区别在于元素的 [图形Shape](../middle/keyConcept)，例如，节点可以是圆形、矩形、图片等。 +图的元素特指图上的**节点** `Node` 和**边** `Edge` 。G6 内置了一系列 [内置的节点](/zh/docs/manual/middle/elements/nodes/defaultNode) 和 [内置的边](/zh/docs/manual/middle/elements/edges/defaultEdge)，供用户自由选择。G6 不同的内置节点或不同的内置边主要区别在于元素的 [图形 Shape](/zh/docs/manual/middle/keyconcept/shape-keyshape)，例如，节点可以是圆形、矩形、图片等。 ## 元素的属性 不论是节点还是边，它们的属性分为两种： -- **样式属性 `style`**：对应 Canvas 中的各种样式，在元素[状态State](../middle/states/state) 发生变化时，可以被改变； -- **其他属性**：例如图形（ `shape`）、id（`id` ）一类在元素[状态State](../middle/states/state)发生变化时不能被改变的属性。 +- **样式属性 `style`**：对应 Canvas 中的各种样式，在元素[状态 State](/zh/docs/manual/middle/states/state) 发生变化时，可以被改变； +- **其他属性**：例如图形（ `shape`）、id（`id` ）一类在元素[状态 State](/zh/docs/manual/middle/states/state) 发生变化时不能被改变的属性。 -例如，G6 设定 hover 或 click 节点，造成节点状态的改变，只能自动改变节点的**样式属性**（如 `fill`、`stroke` 等**）**，**其他属性**（如 `shape` 等）不能被改变。如果需要改变其他属性，要通过 [graph.updateItem](../../api/Graph) 手动配置。**样式属性**是一个名为 `style` 的对象， `style` 字段与其他属性并行。 +例如，G6 设定 hover 或 click 节点，造成节点状态的改变，只能自动改变节点的**样式属性**（如 `fill`、`stroke` 等**）**，**其他属性**（如 `shape` 等）不能被改变。如果需要改变其他属性，要通过 [graph.updateItem](/zh/docs/api/Graph/#updateitemitem-model) 手动配置。**样式属性**是一个名为 `style` 的对象， `style` 字段与其他属性并行。 ### 数据结构 以节点元素为例，其属性的数据结构如下： @@ -46,7 +46,7 @@ order: 2 } ``` -边元素的属性数据结构与节点元素相似，只是其他属性中多了 `source` 和 `target` 字段，代表起始和终止节点的 `id`。
细化在图 1 中 **Tutorial案例** 的视觉需求，我们需要完成： +边元素的属性数据结构与节点元素相似，只是其他属性中多了 `source` 和 `target` 字段，代表起始和终止节点的 `id`。
细化在图 1 中 **Tutorial 案例** 的视觉需求，我们需要完成： - 视觉效果： - R1: 节点的描边和填充色，对应节点样式属性：`fill`，`stroke`； @@ -69,11 +69,11 @@ order: 2 - `defaultNode`：节点在默认状态下的**样式属性**（`style`）和**其他属性**； - `defaultEdge`：边在默认状态下的**样式属性**（`style`）和**其他属性**。 -⚠️**注意：**由于是统一的配置，不能根据数据中的属性（如 `class`、`weight`）等值的不同进行个性化设置，因此只能满足 R1、R2、R3、R4 需求。达到如下效果： +⚠️注意:由于是统一的配置，不能根据数据中的属性（如 `class`、`weight`）等值的不同进行个性化设置，因此只能满足 R1、R2、R3、R4 需求。达到如下效果： -> 图 2  全局配置元素属性后的 **Tutorial案例**。 +> 图 2  全局配置元素属性后的 **Tutorial 案例**。
通过如下方式在实例化图时 `defaultNode` 和 `defaultEdge` ，可以完成上图效果： @@ -150,7 +150,7 @@ graph.data(remoteData); > 图 3 -可以看到，图中有一些节点被渲染成了矩形，还有一些被渲染成了椭圆形。除了设置 shape 属性之外，我们还覆盖了上文全局配置的节点的 size 属性，在矩形和椭圆的情况下，size 是一个数组；而在默认圆形的情况下，G6 仍然会去读全局配置的 size 属性为数字 30。也就是说，动态配置属性让我们既可以根据数据的不同配置不同的属性值，也可以有能力覆盖全局静态的属性值。 +可以看到，图中有一些节点被渲染成了矩形，还有一些被渲染成了椭圆形。除了设置 `shape` 属性之外，我们还覆盖了上文全局配置的节点的 `size` 属性，在矩形和椭圆的情况下，size 是一个数组；而在默认圆形的情况下，G6 仍然会去读全局配置的 `size` 属性为数字 `30`。也就是说，动态配置属性让我们既可以根据数据的不同配置不同的属性值，也可以有能力覆盖全局静态的属性值。 进一步地，我们尝试根据数据的比重不同，配置不一样边的粗细： ```javascript diff --git a/docs/manual/tutorial/epilog.en.md b/docs/manual/tutorial/epilog.en.md index 0bc5865985..191e12584b 100644 --- a/docs/manual/tutorial/epilog.en.md +++ b/docs/manual/tutorial/epilog.en.md @@ -14,7 +14,7 @@ Congratulations! You have created a graph visualization powered by G6. You have [Complete Code of Tutorial Demo](https://codepen.io/Yanyan-Wang/pen/mdbYZvZ). -If you wish to go further in G6, please check out [Key Concept in G6](../middle/keyConcept); For higher level functions and theory of G6, check out [Advanced Guides](../advanced/shape-and-properties). +If you wish to go further in G6, please check out [Key Concept in G6](/en/docs/manual/middle/graph); For higher level functions and theory of G6, check out [Advanced Guides](/en/docs/manual/advanced/keyconcept/shape-and-properties). -You can also refer to [G6 API](../../api/GlobalAPI) during the process of development. +You can also refer to [G6 API](/en/docs/api/Graph) during the process of development. diff --git a/docs/manual/tutorial/epilog.zh.md b/docs/manual/tutorial/epilog.zh.md index a7ed98505d..853781dd67 100644 --- a/docs/manual/tutorial/epilog.zh.md +++ b/docs/manual/tutorial/epilog.zh.md @@ -12,8 +12,8 @@ order: 7 - 增加交互 - 添加辅助工具 -完整代码见：[Tutorial案例代码](https://codepen.io/Yanyan-Wang/pen/mdbYZvZ)。 +完整代码见：[Tutorial 案例代码](https://codepen.io/Yanyan-Wang/pen/mdbYZvZ)。 -如果你希望继续学习深入的 G6 知识，请查看 [G6 核心概念](../middle/keyConcept)；关于 G6 的更高阶的功能原理介绍和深入探讨，请查看[G6 高级指引](../advanced/shape-and-properties)。 +如果你希望继续学习深入的 G6 知识，请查看 [G6 核心概念](/zh/docs/manual/middle/graph)；关于 G6 的更高阶的功能原理介绍和深入探讨，请查看 [G6 高级指引](/zh/docs/manual/advanced/keyconcept/shape-and-properties)。 -开发过程中可通过 [G6 API](../../api/GlobalAPI) 快速查询。 \ No newline at end of file +开发过程中可通过 [G6 API](/zh/docs/api/Graph) 快速查询。 \ No newline at end of file diff --git a/docs/manual/tutorial/example.en.md b/docs/manual/tutorial/example.en.md index de54de3683..dfbd63e633 100644 --- a/docs/manual/tutorial/example.en.md +++ b/docs/manual/tutorial/example.en.md @@ -22,7 +22,7 @@ Create an HTML container for graph canvas, `div` tag in general. G6 will append ### Data Preparation -The data for G6 should be JSON format, includes array attributes `nodes` and `edges`: +The data for G6 should be JSON format, includes array properties `nodes` and `edges`: ```html ``` -**Attention** +⚠️Attention: - `nodes` is an array of nodes, the `id` is an unique and required property; the `x` and `y` are the coordinates of the node; - `edges` is an array of edges, `source` and `target` are required, represent the `id` of the source node and the `id` of the target node respectively. -- The properties of node and edge are described in [Properties of Nodes](/en/docs/api/properties/NodeProperties) and [Properties of Edges](/en/docs/api/properties/EdgeProperties) +- The properties of node and edge are described in [Built-in Nodes](/en/docs/manual/middle/elements/nodes/defaultNode) and [Built-in Edges](/en/docs/manual/middle/elements/edges/defaultEdge) document. ### Instantiate the Graph The container, width, and height are required configurations when instantiating a Graph: @@ -132,7 +132,7 @@ Here goes a part of tutorial-data.json. There are `x` and `y` in node data, and G6 will render the graph according to the position information in the data once G6 finds `x` and `y` in the data. This mechanism satisfies the requirement that rendering the source data. To solve the problem of the graph out of the view port partially, two configurations are provided: --  `fitView`: Whether fit the graph to the canvas; +-  `fitView`: Whether to fit the graph to the canvas; -  `fitViewPadding`: The padding between the content of the graph and the borders of the canvas. We modify the code about instantiating Graph as shown below: @@ -155,14 +155,14 @@ The configurations below will be used in the following Tutorial: | Name | Type | Options / Example | Default | Description | | --- | --- | --- | --- | --- | | renderer | String | 'canvas' / 'svg' | 'canvas' | Render engine of the graph. | -| fitView | Boolean | true / false | false | Whether fit the graph to the canvas. | +| fitView | Boolean | true / false | false | Whether to fit the graph to the canvas. | | fitViewPadding | Number / Array | 20 / [ 20, 40, 50, 20 ] | 0 | The padding between the content of the graph and the borders of the canvas. | -| animate | Boolean | true / false | false | Whether activate the global animation. | -| modes | Object | {
  default: [ 'drag-node', 'drag-canvas' ]
} | null | The set of graph interaction modes. This is a complicated concept, refer to [Mode](../middle/mode) for more detial. | -| defaultNode | Object | {
  shape: 'circle',
  color: '#000',
  style: {
    ......
  }
} | null | The default global attributes for nodes, includes styles attributes and other attributes. | -| defaultEdge | Object | {
  shape: 'polyline',
  color: '#000',
  style: {
    ......
  }
} | null | The default global attributes for edges, includes styles attributes and other attributes. | -| nodeStateStyles | Object | {
  hover: {
    ......
  },
  select: {
    ......
  }
} | null | The style attributes of nodes in different states except for default state. Such as hover, select. | -| edgeStateStyles | Object | {
  hover: {
    ......
  },
  select: {
    ......
  }
} | null | The style attributes of edges in different states except for default state. Such as hover, select. | +| animate | Boolean | true / false | false | Whether to activate the global animation. | +| modes | Object | {
  default: [ 'drag-node', 'drag-canvas' ]
} | null | The set of graph interaction modes. This is a complicated concept, refer to [Mode](/en/docs/manual/middle/states/mode) for more detial. | +| defaultNode | Object | {
  shape: 'circle',
  color: '#000',
  style: {
    ......
  }
} | null | The default global properties for nodes, includes styles properties and other properties. | +| defaultEdge | Object | {
  shape: 'polyline',
  color: '#000',
  style: {
    ......
  }
} | null | The default global properties for edges, includes styles properties and other properties. | +| nodeStateStyles | Object | {
  hover: {
    ......
  },
  select: {
    ......
  }
} | null | The style properties of nodes in different states except for default state. Such as hover, select. | +| edgeStateStyles | Object | {
  hover: {
    ......
  },
  select: {
    ......
  }
} | null | The style properties of edges in different states except for default state. Such as hover, select. | ## Complete Code @@ -199,4 +199,4 @@ The configurations below will be used in the following Tutorial: ``` -**⚠️注意** 
Replace the url `'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'` to change the data into yours. +⚠️注意:
Replace the url `'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'` to change the data into yours. diff --git a/docs/manual/tutorial/example.zh.md b/docs/manual/tutorial/example.zh.md index 5ae255d8d2..1415c4f6a2 100644 --- a/docs/manual/tutorial/example.zh.md +++ b/docs/manual/tutorial/example.zh.md @@ -49,11 +49,11 @@ order: 1 ``` - `注意` +⚠️注意: - `nodes` 数组中包含节点对象，唯一的 `id` 是每个节点对象中必要的属性，`x`、 `y` 用于定位； - `edges` 数组中包含边对象，`source` 和 `target` 是每条边的必要属性，分别代表了该边的起始点 `id` 与 目标点 `id`。 -- 点和边的更多属性参见：[内置的节点](../middle/elements/defaultNode)，[内置的边](../middle/elements/defaultEdge)。 +- 点和边的更多属性参见：[内置的节点](/zh/docs/manual/middle/elements/nodes/defaultNode)，[内置的边](/zh/docs/manual/middle/elements/edges/defaultEdge) 教程。 ### 图实例化 图实例化时，至少需要为图设置容器、宽、高： @@ -85,7 +85,7 @@ order: 1 ## 真实数据加载 -上文中，我们使用了仅含有两个节点和一条边的数据，直接将数据定义放在了代码中。而真实场景的数据通常是远程接口请求加载的。为了方便，我们已经给读者准备好了一份 json 数据文件，地址如下：
`https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json` +上文中，我们使用了仅含有两个节点和一条边的数据，直接将数据定义放在了代码中。而真实场景的数据通常是远程接口请求加载的。为了方便，我们已经给读者准备好了一份 JSON 数据文件，地址如下：
`https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json` ### 加载远程数据 修改 index.html，通过 `fetch` 函数异步加载远程的数据源，并传入 G6 的图实例中： @@ -103,7 +103,7 @@ order: 1 main(); ``` -> `fetch` 函数允许我们发起网络请求，加载数据，而其异步的过程可以通过 async/await 进行更合理的控制。这里我们为了方便起见，将主要逻辑放在了 `main` 函数里面。如果读者对 `fetch` 和 `async`/`await` 的知识有疑问，可以参考：[async function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)，[Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) +> `fetch` 函数允许我们发起网络请求，加载数据，而其异步的过程可以通过 async/await 进行更合理的控制。这里我们为了方便起见，将主要逻辑放在了 `main` 函数里面。如果读者对 `fetch` 和 `async`/`await` 的知识有疑问，可以参考：async function，Fetch API 运行后，我们得到了下图结果： @@ -151,11 +151,11 @@ const graph = new G6.Graph({ | 配置项 | 类型 | 选项 / 示例 | 默认 | 说明 | | --- | --- | --- | --- | --- | -| renderer | String | 'canvas' / 'svg' | 'canvas' | 绘制图的方式是 canvas 还是 SVG。 | +| renderer | String | 'canvas' / 'svg' | 'canvas' | 绘制图的方式是 Canvas 还是 SVG。 | | fitView | Boolean | true / false | false | 是否将图适配到画布大小，可以防止超出画布或留白太多。 | | fitViewPadding | Number / Array | 20 / [ 20, 40, 50, 20 ] | 0 | 画布上的四周留白宽度。 | | animate | Boolean | true / false | false | 是否启用图的动画。 | -| modes | Object | {
  default: [ 'drag-node', 'drag-canvas' ]
} | null | 图上行为模式的集合。由于比较复杂，按需参见：[G6 中的 mode](../middle/mode)。 | +| modes | Object | {
  default: [ 'drag-node', 'drag-canvas' ]
} | null | 图上行为模式的集合。由于比较复杂，按需参见：[G6 中的 Mode](/zh/docs/manual/middle/states/mode) 教程。 | | defaultNode | Object | {
  shape: 'circle',
  color: '#000',
  style: {
    ......
  }
} | null | 节点默认的属性，包括节点的一般属性和样式属性（style）。 | | defaultEdge | Object | {
  shape: 'polyline',
  color: '#000',
  style: {
    ......
  }
} | null | 边默认的属性，包括边的一般属性和样式属性（style）。 | | nodeStateStyles | Object | {
  hover: {
    ......
  },
  select: {
    ......
  }
} | null | 节点在除默认状态外，其他状态下的样式属性（style）。例如鼠标放置（hover）、选中（select）等状态。 | @@ -196,4 +196,4 @@ const graph = new G6.Graph({ ``` -**⚠️注意** 
若需更换数据，请替换 `'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'` 为新的数据文件地址。 +⚠️注意:
若需更换数据，请替换 `'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'` 为新的数据文件地址。 diff --git a/docs/manual/tutorial/layout.en.md b/docs/manual/tutorial/layout.en.md index 6458189dbe..e95243527d 100644 --- a/docs/manual/tutorial/layout.en.md +++ b/docs/manual/tutorial/layout.en.md @@ -1,5 +1,5 @@ --- -title: Utilize Layout +title: Utilizing Layout order: 3 --- @@ -24,7 +24,7 @@ When there is no node position information in the data, or the location informat - Mindmap Layout; - Intended Layout. -For more information about each layout algorithm, please refer to [Layout API](/en/docs/api/Layout). We will utilize Force Layout in the tutorial. +For more information about each layout algorithm, please refer to [Layout API](/en/docs/api/layout/Layout). We will utilize Force Layout in the tutorial. @@ -45,7 +45,7 @@ When the `layout` is not assigned to graph instance: - If there is no position information in node data, arrange the nodes with Random Layout by default. ## Configure the Layout -It is very simple to configure a layout for a graph in G6. Just assign `layout` to the graph when instantiating. The following code configures the layout with `type: 'force'`, which is the classical force-directed layout algorithm. And set `preventOverlap: true` to avoid node overlappings. More configurations are described in: [Layout API](/en/docs/api/Layout)。 +It is very simple to configure a layout for a graph in G6. Just assign `layout` to the graph when instantiating. The following code configures the layout with `type: 'force'`, which is the classical force-directed layout algorithm. And set `preventOverlap: true` to avoid node overlappings. More configurations are described in: [Layout API](/en/docs/api/layout/Layout). ```javascript const graph = new G6.Graph({ ... // Other configurations @@ -76,9 +76,9 @@ const graph = new G6.Graph({ The result: -
![image.png] +
-> Transformation between different layouts and configurations are described in: [Layout Transformation](../middle/layout)。 +> Transformation between different layouts and configurations are described in: [Layout Transformation](/en/docs/manual/middle/layout/#layout-transformation-mechanism). **Tips:** 
The layout algorithm will be executed in `graph.render()`. @@ -169,5 +169,5 @@ The result: ``` -**⚠️Attention**: 
Replace the url `'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'` to change the data into yours. +⚠️Attention: 
Replace the url `'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'` to change the data into yours. diff --git a/docs/manual/tutorial/layout.zh.md b/docs/manual/tutorial/layout.zh.md index 5b77755054..52b353598f 100644 --- a/docs/manual/tutorial/layout.zh.md +++ b/docs/manual/tutorial/layout.zh.md @@ -22,7 +22,7 @@ order: 3 - Mindmap Layout：脑图布局； - Intended Layout：缩进布局。 -各种布局方法的具体介绍及其配置参见 [Layout API](/zh/docs/api/Layout)。本教程中，我们使用的是力导向布局 (Force Layout)。 +各种布局方法的具体介绍及其配置参见 [Layout API](/zh/docs/api/layout/Layout)。本教程中，我们使用的是力导向布局 (Force Layout)。 @@ -43,7 +43,7 @@ const graph = new G6.Graph({ - 若数据中节点没有位置信息，则默认使用 Random Layout 进行布局。 ## 配置布局 -G6 使用布局的方式非常简单，在图实例化的时候，加上 layout 配置即可。下面代码在实例化图时设置了布局方法为 `type: 'force'`，即经典力导向图布局。并设置了参数 `preventOverlap: true` ，表示希望节点不重叠。力导向布局的更多配置项参见：[Layout API](/zh/docs/api/Layout)。 +G6 使用布局的方式非常简单，在图实例化的时候，加上 layout 配置即可。下面代码在实例化图时设置了布局方法为 `type: 'force'`，即经典力导向图布局。并设置了参数 `preventOverlap: true` ，表示希望节点不重叠。力导向布局的更多配置项参见：[Layout API](/zh/docs/api/layout/Layout)。 ```javascript const graph = new G6.Graph({ ... // 其他配置项 @@ -74,9 +74,9 @@ const graph = new G6.Graph({ 结果如下： -
![image.png] +
-> 不同布局之间、相同布局不同参数允许动态切换和过渡，具体参见：[布局切换](../middle/layout)。 +> 不同布局之间、相同布局不同参数允许动态切换和过渡，具体参见：[布局切换](/zh/docs/manual/middle/layout/#布局的切换机制)。  提示 
布局将在调用 `graph.render()` 时执行计算。 @@ -167,5 +167,5 @@ const graph = new G6.Graph({ ``` -**⚠️注意** 
若需更换数据，请替换 `'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'` 为新的数据文件地址。 +⚠️注意:
若需更换数据，请替换 `'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'` 为新的数据文件地址。 diff --git a/docs/manual/tutorial/plugins.en.md b/docs/manual/tutorial/plugins.en.md index fc986a7819..2cb324778f 100644 --- a/docs/manual/tutorial/plugins.en.md +++ b/docs/manual/tutorial/plugins.en.md @@ -186,6 +186,6 @@ const graph = new G6.Graph({ The same as node tooltip, edge-tooltip is a floating `
` tag in HTML. Thus, you can define the CSS style for it in `