Cytoscape.js插件实现网络图之style属性详解 

 1 selector: 'node', 
 2 style: {
 3     'width': 'XXX', //节点主体的宽度
 4     'height': 'XXX', //节点主体的高度
 5     'shape': 'XXX',
 6     /**
 7      *节点的形状，可能的值：
 8      *ellipse
 9      *triangle
10      *round-triangle
11      *rectangle
12      *round-rectangle
13      *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', //用一个数组（或空格分隔的字符串）来表示节点的形状，其每个值的范围为[-1，1]，每两个表示一个断电，比如（-1，-1，1，-1，1，1，-1，1）。这个数组表示节点的形状，节点的边界框由点（-1，-1），（1，-1），（1，1），（-1，1）连接而成，节点的位置是原点（0，0）
35     'background-color': 'XXX', //节点颜色
36     'background-blacken': 'XXX', //调整节点颜色，值域为[-1, 1]，其中数值在-1到0之间颜色变白/亮，在0到1之间颜色变黑/暗
37     background-opacity: XXX, //节点颜色的不透明度
38     'background-fill': 'XXX', //节点颜色的填充样式；可以是solid（默认）、linear-gradient或radial-gradient
39     'background-gradient-stop-colors': 'XXX', //节点颜色渐变（e.g. cyan magenta yellow）
40     'background-gradient-stop-positions': 'XXX', //节点颜色渐变的位置（例如0%50%100%）。如果未指定或是default，则将颜色在等分的位置变化。
41     'background-gradient-direction': 'XXX', 
42     /**
43      *节点颜色渐变的方向，接受以下值：
44      *to-bottom (default)
45      *to-top
46      *to-left
47      *to-right
48      *to-bottom-right
49      *to-bottom-left
50      *to-top-right
51      *to-top-left
52      */
53     'border-width': 'XXX', //节点边框的大小
54     'border-style': 'XXX', //节点边框的样式，可以是solid, dotted, dashed 或 double
55     'border-color': 'XXX', //节点边框颜色
56     'border-opacity': 'XXX', //节点边框不透明度
57     'padding': 'XXX', //节点所有边周围的填充量。可以指定百分比或像素值。例如，50%和50px都是可接受的值。默认情况下，百分比填充按节点宽度的百分比计算。
58     'padding-relative-to': 'XXX', 
59     /**
60      *当且仅当使用百分比单位时确定如何计算填充，接受以下的值：
61      *width
62      *height
63      *average:高和宽的平均值
64      *min:高和宽的较大值
65      *max:高和宽的较小值
66      */
67     'compound-sizing-wrt-labels': 'XXX', //在调整复合节点的大小时是否包括子节点的标签；可以是include或exclude
68     'min-width': 'XXX', //指定复合父节点（例如400px）的节点主体的最小（内部）宽度。如果最小宽度的偏差加起来不到100%，则偏差将标准化为100%。
69     'min-width-bias-left': 'XXX', //当复合节点按其最小宽度放大时，该值指定放置在节点左侧的额外宽度的百分比（例如50%）。
70     'min-width-bias-right': 'XXX', //当复合节点按其最小宽度放大时，该值指定放置在节点右侧的额外宽度的百分比（例如50%）。
71     'min-height': 'XXX', //指定复合父节点（例如400px）的节点主体的最小（内部）高度。如果最小高度的偏差加起来不到100%，则偏差将标准化为100%
72     'min-height-bias-top': 'XXX', //当复合节点按其最小高度放大时，该值指定放置在节点顶部的额外宽度的百分比（例如50%）。
73     'min-height-bias-bottom': 'XXX', //当复合节点按其最小高度放大时，该值指定放置在节点底部的额外宽度的百分比（例如50%）。
74     'background-image': 'XXX', //指向应用作填充节点背景的图像的URL。PNG、JPG和SVG是受支持的格式。
75     'background-image-crossorigin': 'XXX', //所有图像都加载了一个crossorigin属性，该属性可以是anonymous，也可以是use-credentials。默认设置为anonymous。
76     'background-image-opacity': 'XXX', //背景图像的不透明度
77     'background-width': 'XXX', //指定图像的宽度
78     'background-height': 'XXX', //指定图像的高度
79     'background-fit': 'XXX', //背景图像如何适应节点；没有就是原始大小，contain是适应节点内部，cover是覆盖节点。
80     'background-repeat': 'XXX', //是否重复背景图像；可以是no repeat、repeat-x、repeat-y或repeat
81     'background-position-x': 'XXX', //背景图像的x位置，可以是百分比或像素值
82     'background-position-y': 'XXX', //背景图像的y位置，可以是百分比或像素值
83     'background-offset-x': 'XXX', //背景图像的x偏移量，可以是百分比或像素值
84     'background-offset-y': 'XXX', //背景图像的y偏移量，可以是百分比或像素值
85     'background-width-relative-to': 'XXX', //调整宽度是按照节点的宽度还是排除padding填充的宽度，可以是inner或include-padding,默认是include-padding
86     'background-height-relative-to': 'XXX', //调整高度是按照节点的高度还是排除padding填充的高度，可以是inner或include-padding,默认是include-padding
87     'background-clip': 'XXX', //如何处理背景图像剪辑；可以是剪辑到节点形状的节点，也可以是不剪辑的无节点。
88     'bounds-expansion': 'XXX', //指定在所有方向上展开节点的边界框的填充大小（例如20px）。这允许在background-clip为none时在节点的正常边界框外部绘制图像。这对于节点外部的小装饰非常有用。bounds扩展接受1个值（用于所有方向）、2个值（[topAndBottom，leftAndRight]）或4个值（[top，right，bottom，left]）。
89 }

 

 1 selector: 'edge',
 2 style: {
 3     'width': XXX, //边的宽度
 4     'curve-style': XXX, 
 5     /**
 6      *用于在两个节点之间分开显示两个或多个边的弯曲方法，可能的值有：
 7      *haystack（默认值）
 8      *straight
 9      *bezier
10      *unbundled-bezier
11      *segments
12      *taxi
13      */
14     'line-color': XXX, //边的颜色
15     'line-style': XXX, //边的样式，可以是solid, dotted 或 dashed
16     'line-cap': XXX, //边的封口样式，可以是butt (default), round 或 square
17     'line-fill': XXX, //边的填充样式，可以是solid (default), linear-gradient (source to target) 或 radial-gradient (midpoint outwards)
18     'line-dash-pattern': XXX, //指定线和间隙的交替长度的虚线图案，例如[6，3]
19     'line-dash-offset': XXX, //虚线偏移量
20     'line-gradient-stop-colors': XXX, //边的颜色渐变方式
21     'line-gradient-stop-positions': XXX, //边的颜色渐变的位置
22 }

 

posted @ 2020-04-08 20:43  TO_BE_HEALING  阅读(1854)  评论(0)    收藏  举报