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

Question

我可以使用 attr 方法来更改单元格的属性，例如设置 link:

的笔画

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

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

.connection {
    stroke: #999;
}

.connection.error {
    stroke: #F00;
}

有没有办法将这样的 class 添加到生成的 SVG 中？

我试过了

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

但这删除了 .connection class，这很重要。可以写

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

但显然这不会扩展到具有多个正交 classes（error、highlighted...）

Answer 1

在其中一个 official demos 中，我找到了这段代码：

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

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

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

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

How do I add a class to a JointJS cell?

svg

jointjs