Question

我可以使用attr方法更改单元格的属性，例如设置链接的笔划：

conn.attr({'.connection': { stroke: 'red' }});

但我宁愿在css文件中设置这样的属性，例如就像在这个

.connection {
    stroke: #999;
}

.connection.error {
    stroke: #F00;
}

有没有办法将这些类添加到生成的SVG中？

我试过

conn.attr({'.connection': { class: 'error' }});

但是删除了.connection类，这很重要。它可以写

conn.attr({'.connection': { class: 'connection error' }});

但显然不会扩展为具有多个正交类（error，highlighted ...）

Answer 1

在其中一个type class中，我找到了这段代码：

function toggleLive(model, signal) {
    // add 'live' class to the element if there is a positive signal
    V(paper.findViewByModel(model).el).toggleClass('live', signal > 0);
}

我必须说这看起来像是违反模型 - 视图分离给我直接与视图交互这种方式，但如果在官方代码中使用它，那么我得出结论，这是最惯用的方式。

Answer 2

任何想要在2018年回答2015年问题的人，也请尝试一下。

我遇到了类似的问题，并使用highlighters解决了该问题。

cellView.highlight(null, {
    highlighter: {
        name: 'addClass',
        options: {
            className: 'some-custom-class'
        }
    }
});

上面的代码将向单元格视图元素添加一个类some-custom-class。要删除类，请使用参数完全相同的cellView.unhighlight(...)方法。请注意，现在它将仅删除some-custom-class，其他类（如果存在）将保持原样。

参考：https://resources.jointjs.com/docs/jointjs/v2.1/joint.html#highlighters.addClass

如何将类添加到JointJS单元格？

2 个答案: