Question

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

Answer 1

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

    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();
      });
    });

Answer 2

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

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

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

使用jointjs

2 个答案: