0

我正在使用示例 csv 生成网络图。我需要命名将一个组件连接到另一个组件的线。

在示例中,行由以下代码生成:

# connect: {"from": "user", "to": "name", "invert": true, "label": "", \
#          "style": "curved=1;endArrow=blockThin;endFill=1;fontSize=11;"}
# connect: {"from": "refs", "to": "id", "style": "curved=1;fontSize=11;"}

样本 csv 是:

##
## Example CSV import. Use ## for comments and # for configuration. Paste CSV below.
## The following names are reserved and should not be used (or ignored):
## id, tooltip, placeholder(s), link and label (see below)
##
#
## Node label with placeholders and HTML.
## Default is '%name_of_first_column%'.
#
# label: %name%<br>Hostname: <i style="color:gray;">%hostname%</i><br>IP: <i style="font-style: normal;color:gray;">%ip%</i><br>Zone: <i style="color:gray;">%zone%</i>
#
## Node style (placeholders are replaced once).
## Default is the current style for nodes.
#
# style: label;image=%image%;whiteSpace=wrap;html=1;rounded=1;fillColor=%fill%;strokeColor=%stroke%;
#
## Uses the given column name as the identity for cells (updates existing cells).
## Default is no identity (empty value or -).
#
# identity: -
#
## Connections between rows ("from": source colum, "to": target column).
## Label, style and invert are optional. Defaults are '', current style and false.
## In addition to label, an optional fromlabel and tolabel can be used to name the column
## that contains the text for the label in the edges source or target (invert ignored).
## The label is concatenated in the form fromlabel + label + tolabel if all are defined.
## The target column may contain a comma-separated list of values.
## Multiple connect entries are allowed.
#
# connect: {"from": "user", "to": "name", "invert": true, "label": "", \
#          "style": "curved=1;endArrow=blockThin;endFill=1;fontSize=11;"}
# connect: {"from": "refs", "to": "id", "style": "curved=1;fontSize=11;"}
#
## Node x-coordinate. Possible value is a column name. Default is empty. Layouts will
## override this value.
#
# left: 
#
## Node y-coordinate. Possible value is a column name. Default is empty. Layouts will
## override this value.
#
# top: 
#
## Node width. Possible value is a number (in px), auto or an @ sign followed by a column
## name that contains the value for the width. Default is auto.
#
# width: auto
#
## Node height. Possible value is a number (in px), auto or an @ sign followed by a column
## name that contains the value for the height. Default is auto.
#
# height: auto
#
## Padding for autosize. Default is 0.
#
# padding: -12
#
## Comma-separated list of ignored columns for metadata. (These can be
## used for connections and styles but will not be added as metadata.)
#
# ignore: id,image,fill,stroke
#
## Column to be renamed to link attribute (used as link).
#
# link: url
#
## Spacing between nodes. Default is 40.
#
# nodespacing: 40
#
## Spacing between parallel edges. Default is 40.
#
# edgespacing: 40
#
## Name of layout. Possible values are auto, none, verticaltree, horizontaltree,
## verticalflow, horizontalflow, organic, circle. Default is auto.
#
# layout: horizontalflow
#
## ---- CSV below this line. First line are column names. ----
name,hostname,id,zone,ip,user,email,fill,stroke,refs,url,image
A,Users1,a,zone0,10.1.1.1,,name@domain.com,#dae8fc,#6c8ebf,,https://users1.domain.com,https://cdn2.iconfinder.com/data/icons/office-icon-set-3/512/users.png
B,Users2,b,zone0,10.1.1.2,,name@domain.com,#dae8fc,#6c8ebf,,https://users2.domain.com,https://cdn2.iconfinder.com/data/icons/office-icon-set-3/512/users.png
C,Users3,c,zone2,10.1.1.3,,name@domain.com,#dae8fc,#6c8ebf,,https://users3.domain.com,https://cdn2.iconfinder.com/data/icons/office-icon-set-3/512/users.png
D,Login1,d,zone1,10.1.1.4,A,name@domain.com,#b3b3b3,#000000,,https://login1.domain.com,https://cdn0.iconfinder.com/data/icons/icocentre-free-icons/147/f-server_128-512.png

我不知道会自动为行命名的属性名称是什么。

我期待是否有一种方法可以对“# connect: {}”json 部分进行编码,以便可以命名这些行。

4

2 回答 2

0

要扩展@Noname 答案,使用“fromlabel”、“tolabel”和“label”,您可以构建一个列名,其值将用于边缘标签。使用“fromlabel”或“tolabel”通常就足够了,因为您很可能会将标签放在专用列中。

有一个特殊情况我已经解决了很长时间:如果您在 2 个节点之间有多个边并且您希望在每个边上都有一个专用标签怎么办?

您可以在“refs”列中放置多个引用,用逗号分隔,但不能在“fromlabel”引用的列中放置多个逗号分隔的标签。如果你这样做,会发生这种情况:

##
# label: %name%
# style: shape=rectangle;rounded=1;strokeColor=#00f;
# namespace: csvimport-
# connect: {"from":"nodeRef", "to":"nodeId", "fromlabel": "refLabel", \
            "style": "curved=1;fontSize=11;endArrow=blockThin;endFill=1"}
# ignore: nodeRef,refLabel
# layout: auto
# nodespacing: 100
## CSV data starts below this line
nodeId,name,nodeRef, refLabel
1,Status 1,"2,2,2","By context menu,By automated process,By API call"
2,Status 2,"3,3","By context menu,By automated process"
3,Status 3,"1,1","By API call,By manual modification"

使用专用标签尝试多个边缘

这显然不是我们想要的结果。

解决方案是对数据进行非规范化:

  1. 每个节点 1 行,与另一个节点有 1 个连接

  2. 非常重要:# identity: nodeId在配置中使用(输入你的'id'列名而不是nodeId),这将告诉DrawIO更新节点而不是创建一个新节点

    ##
    # label: %name%
    # style: shape=rectangle;rounded=1;strokeColor=#00f;
    # namespace: csvimport-
    # identity: nodeId
    # connect: {"from":"nodeRef", "to":"nodeId", "fromlabel": "refLabel", "style": "curved=1;fontSize=11;endArrow=blockThin;endFill=1"}
    # ignore: nodeRef,refLabel
    # layout: auto
    # nodespacing: 200
    # edgespacing: 100
    ## CSV data starts below this line
    nodeId,name,nodeRef, refLabel
    1,Status 1,2,By context menu
    1,Status 1,2,By automated process
    1,Status 1,2,By API call
    2,Status 2,3,By context menu
    1,Status 1,3,By automated process
    3,Status 3,1,By API call
    3,Status 3,1,By manual modification
    

每条边的唯一标签

于 2021-03-14T17:30:08.843 回答
0

使用 "fromlabel" 或 "tolabel" rethar "label" 之类的

# connect: {"from": "user", "to": "name", "invert": true, **"tolabel": "zone"**, \
#          "style": "curved=1;endArrow=blockThin;endFill=1;fontSize=11;"}
于 2020-04-13T08:41:21.243 回答