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

Question

我找到了一个 JS fiddle，用于使用 jointJS 创建 table，但我无法向其中添加文本。

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

Link 为 jsfiddle http://jsfiddle.net/kumilingus/h6125gu7/

我想实现类似下面的东西，其中可能有多个 table 元素，每个元素都有不同的文本。

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 中创建一个 table 显示一些统计数据 ?

Answer 1

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

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

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

How to create table element in jointJS and add dynamic text to it

javascript

jointjs