• 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 }
  • 相关阅读:
    opencv mat转IplImage*
    运行程序时命令窗口一闪而过
    python version 2.7 required,which was not found in the registry
    《深入浅出wpf》 控件
    opengl glut vs2013配置
    《深入浅出wpf》第六章 深入浅出话binding
    《深入浅出wpf》第五章 控件与布局
    十大暴利行业
    java安装与配置
    ArcGIS For Flex学习之Mapping---Select and zoom
  • 原文地址:https://www.cnblogs.com/Neptunejiang/p/12662497.html
Copyright © 2020-2023  润新知