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

【问题标题】：Graph search for element by element's name in jointJS在jointJS中按元素名称图形搜索元素
【发布时间】：2016-09-21 14:47:37
【问题描述】：

我在 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 文本）“活动”的基本形状。

这是“活动”的 Stencil 描述：

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 类型，我有两个项目：Activity 和 Workitem。

搜索名称为“Activity”的图形元素有那么难吗？

提前谢谢你

【问题讨论】：

你的名字是什么意思？您是否将其指定为模型的属性属性？
是的@SajithDilshan 我有“文本”属性。你能帮我访问活动吗？这是“活动”的模板描述： new joint.shapes.basic.Rect({ size: { width: 5, height: 3 }, attrs: { rect: { rx: 2, ry: 2, width: 50,高度：30，填充：'#0000FF'}，文本：{ 文本：'Activity'，填充：'#ffffff'，'font-size'：10，描边：'#000000'，'描边宽度'：0 } } }),

标签： search graph jointjs rappid

【解决方案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 数组将包含您需要的所有元素。

【讨论】：

【解决方案2】：

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

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


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

            });

【讨论】：

JSON.stringify() 和 JSON.parse() 行是多余的。 “元素”变量已经是一个 Javascript 对象。
谢谢@SajithDilshan 但是 if(element.attrs["text"]["text"] == "Activity"){ //alert("YEAHHHHHH"); } 在我的情况下不起作用。你知道怎么做吗？
应该是 if(element.attributes.attrs["text"]["text"] == "Activity")。此外，您可以通过执行 console.log(element) 检查元素对象的完整结构，这会将对象打印到浏览器控制台中。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：