Question

想要更改单元格的attr我点击...例如，如果我点击一个单元格，它应该更改其属性...就像颜色变为红色。

下面的代码工作正常...但是当我点击另一个单元格时，红色填充应该只应用于那个，并且所有剩余单元格的红色填充应该像以前一样恢复到默认值。 / p>

var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({
    el: $('#myholder'),
    width: 600,
    height: 200,
    model: graph,
    gridSize: 1
});
 var rect = new joint.shapes.basic.Rect({
        position: { x: 100, y: 100 },
        size: { width: 100, height: 30 },
        attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
    });

 var rect2 = new joint.shapes.basic.Rect({
    position: { x: 20, y: 30 },
    size: { width: 150, height: 30 },
    attrs: { rect: { fill: 'white' }, text: { text: 'my box2', fill: 'blue' } }
});

rect2.translate(300,30);

var link = new joint.dia.Link({
    source: { id: rect.id },
    target: { id: rect2.id }
});

graph.addCells([rect, rect2, link]);

 paper.on('cell:pointerdown', function (cellView) {

              cellView.model.attr({rect: { fill: 'red' }});

                });

//正在寻找将剩余单元格的所有属性重置为默认值（就像之前一样）的一些事情，当我点击另一个节点时...当前它将每个节点的颜色变为红色，我点击。 / p>

Answer 1

从图表中获取所有元素
更改回原始颜色

将cellview更改为红色

paper.on('cell:pointerdown', function (cellView) {
     _.each(graph.getElements(), function(element) {
         element.attr({
                  rect: { fill: 'white' }
         });   
      });
     cellView.model.attr({rect: { fill: 'red' }});

}）;

记得我在_.each循环中使用了underscore.js。

在JointJS中仅选择特定单元格

1 个答案: