如何给jointjs生成得节点使用我们自己得id

附上文档连接   https://resources.jointjs.com/tutorial/custom-attributes

代码在最后  

element.attr('body/strokeWidth', 2);
element.prop('id', "自己得id");

/**
 * 改写 jointjs.shapes.uml
 */
import * as joint from 'jointjs';
// import { dia, shapes, util } from 'jointjs';

const flowModel = (config) => {
  let baseOption = {
    size: {
      width: 230,
      height: 100
    },
    name: [],
    attributes: [],
    image: '',

    attrs: {
      rect: { width: 240 },
      '.': {
        magnet: false
      },
      '.uml-class-name-img': {
        ref: '.uml-class-name-rect',
        'ref-y': 0.5,
        'ref-x': 10,
        'y-alignment': 'middle',
        width: 20,
        height: 20
      },
      /** ***禁用模型配色 默认***** */
      '.uml-class-name-rect': { stroke: '#d1d1d1', 'stroke-width': 1, fill: '#f1f1f1' },
      '.uml-class-attrs-rect': { stroke: '#d1d1d1', 'stroke-width': 1, fill: '#fff' },

      /** ***当前高亮模型配色***** */
      // '.uml-class-name-rect': { 'stroke': '#916FA1', 'stroke-width': 1, 'fill': '#E1D5E6' },
      // '.uml-class-attrs-rect': { 'stroke': '#916FA1', 'stroke-width': 1, 'fill': '#fff' },

      /** 配色 */
      // '.uml-class-name-rect': { 'stroke': '#96ADCE', 'stroke-width': 1, 'fill': '#DAE8FB' },
      // '.uml-class-attrs-rect': { 'stroke': '#96ADCE', 'stroke-width': 1, 'fill': '#fff' },

      /** 配色 */
      // '.uml-class-name-rect': { 'stroke': '#E7C078', 'stroke-width': 1, 'fill': '#FFF1CE' },
      // '.uml-class-attrs-rect': { 'stroke': '#E7C078', 'stroke-width': 1, 'fill': '#fff' },

      /** 配色 */
      // '.uml-class-name-rect': { 'stroke': '#F7CECD', 'stroke-width': 1, 'fill': '#FEE6CD' },
      // '.uml-class-attrs-rect': { 'stroke': '#F7CECD', 'stroke-width': 1, 'fill': '#fff' },

      /** 配色 */
      // '.uml-class-name-rect': { 'stroke': '#9FC38C', 'stroke-width': 1, 'fill': '#D5E8D5' },
      // '.uml-class-attrs-rect': { 'stroke': '#9FC38C', 'stroke-width': 1, 'fill': '#fff' },

      '.uml-class-name-text': {
        ref: '.uml-class-name-rect',
        'ref-y': 0.5,
        'ref-x': 0.5,
        'text-anchor': 'middle',
        'y-alignment': 'middle',
        'font-weight': 'bold',
        fill: '#000'
      },
      '.uml-class-attrs-text': {
        ref: '.uml-class-attrs-rect',
        'ref-y': 0.5,
        'ref-x': 10,
        fill: '#000',
        'y-alignment': 'middle'
      }
    },
    ports: {
      groups: {
        in: {
          position: {
            name: 'left'
          },
          attrs: {
            // '.port-label': {
            //     fill: '#000'
            // },
            '.port-body': {
              fill: '#999',
              stroke: '#fff',
              'stroke-width': 2,
              'ref-x': -20,
              'ref-y': -8,
              magnet: true
            }
            // text: {
            //     text: ''
            // }
          }
          // label: {
          //     position: {
          //         name: 'left',
          //         args: {
          //             y: 10
          //         }
          //     }
          // }
        },
        out: {
          position: {
            name: 'right'
          },
          attrs: {
            // '.port-label': {
            //     fill: '#000'
            // },
            '.port-body': {
              fill: '#999',
              stroke: '#fff',
              'stroke-width': 2,
              'ref-y': -8,
              magnet: true
            }
            // text: {
            //     text: ''
            // }
          }
          // label: {
          //     position: {
          //         name: 'right',
          //         args: {
          //             y: 10
          //         }
          //     }
          // }
        }
      }
    }
  };
  let option = Object.assign(baseOption, config);
  const result = joint.shapes.basic.Generic.extend({
    markup: [
      '<g class="rotatable">',
      '<g class="scalable">',
      '<rect class="uml-class-name-rect"/><rect class="uml-class-attrs-rect"/>',
      '</g>',
      '<text class="uml-class-name-text"/><text class="uml-class-attrs-text"/>',
      '<image class="uml-class-name-img" />',
      '</g>'
    ].join(''),
    portMarkup: `<g class="port-body">
                        <rect width="20" height="16" stroke="none"></rect>
                        <path d="M8 4 L12 8 L8 12" fill="none"></path>
                    </g>`,
    defaults: joint.util.defaultsDeep(option, joint.shapes.basic.Rect.prototype.defaults),
    initialize: function() {
      this.on(
        'change:name change:attributes',
        function() {
          this.updateRectangles();
          this.trigger('uml-update');
        },
        this
      );

      this.updateRectangles();
      joint.shapes.basic.Generic.prototype.initialize.apply(this, arguments);
      this.on('change:inPorts change:outPorts', this.updatePortItems, this);
      this.updatePortItems();
    },
    getClassName() {
      return this.get('name');
    },

    updateRectangles() {
      const attrs = this.get('attrs');

      const rects = [{ type: 'name', text: this.getClassName() }, { type: 'attrs', text: this.get('attributes') }];
      const image = { type: 'image', 'xlink:href': this.get('image') };

      let offsetY = 0;
      rects.forEach((rect) => {
        const lines = Array.isArray(rect.text) ? rect.text : [rect.text];
        const rectHeight = lines.length * 40 + 20;
        attrs[`.uml-class-${rect.type}-text`].text = lines.join('\n\n');
        attrs[`.uml-class-${rect.type}-rect`].height = rectHeight;
        attrs[`.uml-class-${rect.type}-rect`].transform = `translate(0,${offsetY})`;
        offsetY += rectHeight;
      });

      attrs['.uml-class-name-img']['xlink:href'] = image['xlink:href'];
    },

    updatePortItems(model, changed, opt) {
      // Make sure all ports are unique.
      const inPorts = joint.util.uniq(this.get('inPorts'));
      const outPorts = joint.util.difference(joint.util.uniq(this.get('outPorts')), inPorts);

      const inPortItems = this.createPortItems('in', inPorts);
      const outPortItems = this.createPortItems('out', outPorts);

      this.prop('ports/items', inPortItems.concat(outPortItems), joint.util.assign({ rewrite: true }, opt));
    },

    createPortItem(group, port) {
      return {
        id: port,
        group,
        attrs: {
          '.port-label': {
            text: port
          }
        }
      };
    },

    createPortItems(group, ports) {
      return joint.util.toArray(ports).map(this.createPortItem.bind(this, group));
    },

    _addGroupPort(port, group, opt) {
      const ports = this.get(group);
      return this.set(group, Array.isArray(ports) ? ports.concat(port) : [port], opt);
    },

    addOutPort(port, opt) {
      return this._addGroupPort(port, 'outPorts', opt);
    },

    addInPort(port, opt) {
      return this._addGroupPort(port, 'inPorts', opt);
    },

    _removeGroupPort(port, group, opt) {
      return this.set(group, joint.util.without(this.get(group), port), opt);
    },

    removeOutPort(port, opt) {
      return this._removeGroupPort(port, 'outPorts', opt);
    },

    removeInPort(port, opt) {
      return this._removeGroupPort(port, 'inPorts', opt);
    },

    _changeGroup(group, properties, opt) {
      return this.prop(`ports/groups/${group}`, joint.util.isObject(properties) ? properties : {}, opt);
    },

    changeInGroup(properties, opt) {
      return this._changeGroup('in', properties, opt);
    },

    changeOutGroup(properties, opt) {
      return this._changeGroup('out', properties, opt);
    }
  });
  return new result();
};
export const createNode = (config) => {
  return flowModel(config);
};

export const ClassView = joint.dia.ElementView.extend({
  initialize() {
    joint.dia.ElementView.prototype.initialize.apply(this, arguments);
    this.listenTo(this.model, 'uml-update', function() {
      this.update();
      this.resize();
    });
  }
});

const cell = createNode(config);

cell.prop('id', 4);