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

我发现了一个JS提琴，可以使用jointJS创建一个表，但我无法向其中添加文本

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)
]);

有没有其他方法可以在jointJS中创建一个表

---

显示一些统计信息？

实际上还有另一种方法可以使用jointjs创建表。 您可以尝试此处定义的

joint.shapes.basic.Table

：

---

目前我正在使用jointJS v1.0.3版。我想我必须将它更新到v2.0.1在v1.0.3中，我得到一个错误

joint.dia.Element.define不是一个函数

。是的，

define

自v2.0.0版以来就在jointjs中。IMHO升级是正确的选择，但是演示可能会在v1.0.3中运行，因为

定义

只是一个助手-它是主干

扩展

的包装器。

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