Cytoscape.js plug-in implementation of the network graph style property Detailed

. 1 Selector: 'Node' , 
 2  style: {
 . 3      'width': 'XXX', // width of the body nodes 
. 4      'height': 'XXX', // height of the node body 
. 5      'Shape': 'XXX' ,
 6      / * *
 7       * node shape, possible values:
 . 8       * Ellipse
 . 9       * Triangle
 10       * round-Triangle
 . 11       * Rectangle
 12 is       * round-Rectangle
 13 is       * bottom-round-Rectangle
 14       * Cut-Rectangle
 15       * Barrel
 16       * Rhomboid
 17      *diamond
18      *round-diamond
19      *pentagon
20      *round-pentagon
21      *hexagon
22      *round-hexagon
23      *concave-hexagon
24      *heptagon
25      *round-heptagon
26      *octagon
27      *round-octagon
28      *star
29      *tag
30      *round-tag
31      *vee
32      *polygon
33      */
34     'shape-polygon-points': 'XXX', //Using an array (or space-separated string) to represent the shape of the node, each value range is [1,1], each of the two denotes a power failure, for example (-1, 1, - 1,1,1, -1,1). This array represents the shape of the bounding box of a node, the node by points (-1, -1), (1, -1), (1,1), (- 1,1) connected to each other, the node position is the origin ( 0,0) 
35      'background-color': 'XXX', // node color 
36      'background-Blacken' ':' XXX ', // adjust nodes color range [-1, 1], where the value in the - 1-0 color between white / bright, between 0-1 color black / dark 
37 [      background-opacity: XXX, // node colors opacity 
38 is      'background-Fill': 'XXX', // node color fill style; may Solid (default), linear-gradient-gradient or Radial 
39      'background-gradient-STOP-colors':' XXX ', // node color gradients (Cyan Magenta Yellow EG) 
40      ' background-gradient -stop-positions':Color gradient position of the node (e.g., 0% 50% 100%). If not specified or default, the position will change color in the aliquot. 
41 is      'background-gradient-direction': 'XXX' , 
 42 is      / * *
 43 is       * direction nodes color gradient, takes the following values:
 44 is       * to-bottom (default)
 45       * to-Top
 46 is       * to-left
 47       * to -right
 48       *-right to bottom-
 49       *-left to bottom-
 50       * Top-to-right
 51 is       * Top-to-left
 52 is       * / 
53 is      'XXX',: 'border-width' // size of the border node 
54 is      'border-style': 'XXX', //Style border nodes may be solid, dotted, dashed, or Double 
55      'border-Color': 'XXX', // node border color 
56 is      ' border-Opacity ':' XXX ', // node opacity frame 
57 is      ' padding ':' XXX ', // loading of all the nodes around the edges. You may specify a percentage or pixel value. For example, 50%, and acceptable values are 50px. By default, the fill percentage is calculated as a percentage of the width of the node. 
58      'padding-relative-to': 'XXX' , 
 59      / * *
 60       * if and determined only when the percentage of units of how to calculate the filling, accepts the following values:
 61 is       * width
 62 is       * height
 63 is       * Average: height and width the average value of
 64       * min: height and width larger value
 65       * max: the smaller the height and width
 66       * / 
67     'Compound-Sizing-WRT-Labels': 'XXX', // if resized when the label comprises a composite node of the child node; or may include the exclude 
68      'min-width': 'XXX', // specified compound the smallest body parent node (e.g. 400px) (internal) width. If the deviation is less than the minimum width of the combined 100%, the deviation will be normalized to 100%. 
69      'min-width-BIAS-left': 'XXX', // when its minimum width amplified composite node, the value specified percentage extra width on the left side of the node (e.g., 50%). 
70      'min-width-BIAS-right': 'XXX', // when its minimum width amplified composite node, the value is placed in the specified percentage (e.g. 50%) extra width in the right side of the node. 
71 is      'min-height': 'XXX', // minimal (internal) Specifies the height of the parent compound (e.g. 400px) node body. If the minimum height variation not add up to 100%, the deviation will be normalized to 100% 
72      'min-height-BIAS-Top': 'XXX', @ When the amplified composite node its minimum height, the value specified percentage extra width placed on top of the nodes (e.g., 50%). 
73     'min-height-BIAS-bottom': 'XXX', // when its minimum height amplified composite node, the value is placed in the specified percentage (e.g. 50%) of the width of the bottom of the additional node. 
74      'background-Image': 'XXX', // points to be used as the URL of the image to fill the background node. PNG, JPG and SVG formats are supported. 
75      'Image-background-the crossOrigin': 'XXX', // all images are loaded the crossOrigin a property, which may be anonymous, may also be use-credentials. The default setting is anonymous. 
76      'background-Image-Opacity': 'XXX', // opacity of the background image 
77      'background-width': 'XXX', // specify the width of the image 
78      'background-height': 'XXX', // Specifies the height of the image 
79      'background-Fit': 'XXX',
80      'background-REPEAT': 'XXX', // whether to repeat the background image; may be no repeat, repeat-x, repeat -y or REPEAT 
81      'background-position-X': 'XXX', // background image x-position, the pixel values may be a percentage or 
82      'background-position-Y': 'XXX', // Y position of the background image, the pixel values may be a percentage or 
83      'background-offset-x': 'XXX', / / X offset of the background image, the pixel values may be a percentage or 
84      'background-offset-Y': 'XXX', // Y offset of the background image, the pixel values may be a percentage or 
85      'background-width- to-relative ':' XXX ', // adjust the width to the width is the width of the negative node or padding filling, inner or may include-padding, padding-default is the include 
86      'background-height-relative-to': 'XXX', //Adjust the height according to the height of a node is excluded or padding filling height, or may be inner include-padding, padding-default is the include 
87      'Clip-background': 'XXX', // processing the background image clip; the clip may be node shape, the clip may be not free nodes. 
88      'Expansion-bounds': 'XXX', // specify bounding boxes of nodes expand in all directions padding size (e.g. 20px). This allows a normal image is drawn outside the bounding box of a node is none in the background-clip. This is useful for small decorative external node. receiving an extended bounds values (for all directions), the two values ([topAndBottom, leftAndRight]) or four values ([top, right, bottom, left]). 
89 }

 

. 1 Selector: 'Edge' ,
 2  style: {
 . 3      'width': XXX, // edge width 
. 4      'Curve-style' : XXX, 
 . 5      / * *
 . 6       * is used to display two separate between two nodes or more sides of the bending method, the possible values are:
 . 7       * of haystack (default value)
 . 8       * Straight
 . 9       * Bezier
 10       * Bezier-unbundled
 . 11       * Segments
 12 is       * Taxi
 13 is       * / 
14      'Color-Line': XXX, / / color edges 
15      'style-Line': XXX, // pattern edge may be solid, dotted, or Dashed 
16     'CAP-Line': XXX, // sealing edge style, may be butt (default), round, or Square 
. 17      'Line-Fill': XXX, // fill pattern edge may be solid (default), linear- gradient (source to target) or a gradient-Radial (Midpoint outwards) 
18 is      ' Dash-pattern-line ': XXX, // alternating lengths specified dash pattern of lines and spaces, such as [6,3] 
. 19      ' line-dash- offset ': XXX, // broken line offset 
20 is      ' Line-gradient-STOP-colors': XXX, // color gradient manner edge 
21 is      ' Line-gradient-STOP-Positions': XXX, // edge gradients in position 
22 }

 

Guess you like

Origin www.cnblogs.com/Neptunejiang/p/12662497.html