在 jointJS 中按元素名称图形搜索元素

Question

我在 Rappid/jointJS

中遇到问题

我有 stencil.js 4 个形状（2 basic.Circle 和 2 basic.Rect），名称为 START(basic.Circle)、END(basic.Circle)， Activity(basic.Rect) 和 Workitem( basic.Rect) 和 我希望 在我的 main.js 我的所有图表中获得带有名称的基本形状（我的意思是带有 attrs 文本）"Activity".

这是 "Activity" 的模具描述：

new joint.shapes.basic.Rect({ size: { width: 5, height: 3 },
attrs: {
    rect: {
         rx: 2, ry: 2, width: 50, height: 30,
         fill: '#0000FF'
       },
       text: { text: 'Activity', fill: '#ffffff', 'font-size': 10, 
       stroke: '#000000', 'stroke-width': 0 }
     }
}),

我将如何获得它？到目前为止，我可以在图表中搜索的唯一方法是单元格是否具有类型 basic.Circle（使用 get('type') === 'basic.Circle')）。但是对于 Circle 类型，我有两个 items:Activity 和 Workitem。

搜索名称为"Activity"的图形元素这么难吗？

提前致谢

Answer 1

您可以通过以下方法获取所有元素（链接除外）

var allElement = graph.getElements()

接下来如果要获取带有'Activity'的元素则如下

var activityElements = [];

allElement.forEach(elem => {
    var textVal = elem.attributes.attrs.text.text;
    if(textVal !== undefined && textVal === 'Activity') {
        activityElements.push(elem);
    }
});

现在 activityElements 数组将包含您需要的所有元素。

Answer 2

我通过采用 JSON 格式的元素数据解决了我的问题：

 _.each(this.graph.getElements(), function(element) {


             if(element.attributes.attrs["text"]["text"] == "Activity"){
             //alert("YEAHHHHHH");
             }

            });

Answer 3

您也可以在元素上使用 api，element.attr('text') returns 来自形状的 text 对象：{ text: 'Activity', fill: '#ffffff', 'font-size': 10, stroke: '#000000', 'stroke-width': 0 }

Answer 4

您还可以为您的形状设置一个 "id" 属性并使用 graph.getCell('id_name_goes_here'); 如果您不介意为每个形状添加一个 id 字段，这会简单得多。

在 jointJS 中按元素名称图形搜索元素

Graph search for element by element's name in jointJS

search

graph

jointjs

rappid