javascript - 如何在jointJS中创建表格元素并向其中添加动态文本

我已经找到了一个使用jointJS创建表的JS小提琴，但是无法向其中添加文本。

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
  el: $('#paper'),
  width: 600,
  height: 600,
  gridSize: 20,
  model: graph,
  linkPinning: false,
  defaultLink: new joint.dia.Link({
    z: 2
  }),
  validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
    var connectedView = end === 'target' ? cellViewT : cellViewS;
    if (connectedView instanceof joint.dia.LinkView) return false;
    if (cellViewT === cellViewS || magnetS === magnetT) return false;
    return true;
  }
});

joint.shapes.basic.Table = joint.shapes.basic.Generic.extend({

  markup: [
    '<g class="rotatable"><g class="scalable"><rect class="body"/></g>',
    '<g class="ports">',
    '<rect class="port11" port="11"/><rect class="port12" port="12"/><rect class="port13" port="13"/>',
    '<rect class="port21" port="21"/><rect class="port22" port="22"/><rect class="port23" port="23"/>',
    '<rect class="port31" port="31"/><rect class="port32" port="32"/><rect class="port33" port="33"/>',
    '</g>',
    '</g>'
  ].join(''),


  defaults: joint.util.deepSupplement({

    type: 'basic.Table',
    z: 2,
    attrs: {
      '.body': {
        width: 100,
        height: 100,
        stroke: 'blue',
        fill: 'lightblue'
      },
      '.ports > rect': {
        'ref-width': '33%',
        'ref-height': '33%',
        stroke: 'lightgray'
      },
      '.port11': {
        'ref-x': 0,
        'ref-y': 0,
        magnet: 'passive'
      },
      '.port12': {
        'ref-x': 0.33,
        'ref-y': 0,
        magnet: 'passive'

      },
      '.port13': {
        'ref-x': 0.66,
        'ref-y': 0,
        magnet: 'passive'
      },
      '.port21': {
        'ref-x': 0,
        'ref-y': 0.33,
        magnet: 'passive'

      },
      '.port22': {
        'ref-x': 0.33,
        'ref-y': 0.33,
        magnet: 'passive'

      },
      '.port23': {
        'ref-x': 0.66,
        'ref-y': 0.33,
        magnet: 'passive'

      },
      '.port31': {
        'ref-x': 0,
        'ref-y': 0.66,
        magnet: 'passive'

      },
      '.port32': {
        'ref-x': 0.33,
        'ref-y': 0.66,
        magnet: 'passive'
      },
      '.port33': {
        'ref-x': 0.66,
        'ref-y': 0.66,
        magnet: 'passive'

      }
    }

  }, joint.shapes.devs.Model.prototype.defaults)
});

var model = new joint.shapes.basic.Table({
  size: {
    width: 100,
    height: 100
  }
});

graph.addCell([
  model.clone().position(100, 100).attr('.port31/magnet', true).attr('.port23/magnet', true),
  model.clone().position(300, 200).attr('.port33/magnet', true).attr('.port11/magnet', true)
]);

jsfiddle http://jsfiddle.net/kumilingus/h6125gu7/的链接

我想实现以下类似的方法，其中可能有多个表元素，每个元素都有不同的文本。

var model = new joint.shapes.basic.Table({
  size: {
    width: 100,
    height: 100
  }
});
graph.addCell([
  model.clone().position(100, 100).attr('.port31/text', 'some text1').attr('.port23/text', 'some text2')
]);

还有其他方法可以在jointJS中创建表吗？
显示一些统计信息？

最佳答案

实际上，还有另一种方法可以使用jointjs创建表。
您可以尝试在此处定义的joint.shapes.basic.Table：

https://codepen.io/vladimirtalas/pen/MrymjB

关于javascript - 如何在jointJS中创建表格元素并向其中添加动态文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48417343/