使用jointjs

时间:2017-12-01 10:18:51

标签: javascript jointjs

我正在实现相对于绘制图表的任务。它要求当用户在图表的单元格上悬停时,它将突出显示该单元格和链接的所有前后。我发现如何通过单击突出显示一个元素。我不确定能否突出显示链接。有可能吗?

2 个答案:

答案 0 :(得分:0)

我已经用这种方式解决了它:

    this.listenTo(this.options.paper, 'cell:mouseover', function (cellView) {
      const links = this.options.paper.model.getConnectedLinks(cellView.model, {deep: true});
      const neighbours = this.options.paper.model.getNeighbors(cellView.model);

      cellView.highlight();

      neighbours.forEach((element) => {
        const viewElement = this.options.paper.findViewByModel(element);
        viewElement.highlight();
      });

      links.forEach((link) => {
        const viewLink = this.options.paper.findViewByModel(link);
        viewLink.highlight();
      });
    });

答案 1 :(得分:0)

链接和元素从单元格继承。细胞是具有相关细胞视图的骨架模型。 cellView是一个骨干视图,高亮显示方法所在的位置。 LinkView是链接的特定视图,它继承自CellView。 CellView默认'突出显示'方法适用于矩形单元格,但对于链接而言,它不是很好,因为高亮显示是围绕整个链接的直角矩形边界框。

突出显示方法有两个参数,第二个参数允许您指定突出显示的类型。记录在案here。其中一种类型'允许在哪里可以指定css类。您可以定义一个类,并在此处指定它。

如果这还不够,另一个选择是扩展linkView,并实现自己的“突出显示”'方法就此而言。然后将这个新的linkView作为模板提供给纸张构造函数。