Question

我正在使用示例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

示例csv为：

{{1}}

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

我期望是否有一种方法可以对“＃connect：{}” json部分进行编码，以便可以命名行。

Answer 1

使用“ fromlabel”或“ tolabel”重新标记“ label”

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

Answer 2

要扩展@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 个连接

非常重要：在配置中使用 # 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

如何为CSV格式的draw.io图生成唯一的行名？

2 个答案: