javascript - 使用 JointJS 磁铁时获取无效路径值

Question

我有一个由数据构建的可编辑流程图。当我将其中一个子元素转换为磁铁以便用户可以形成新链接时，从该元素发出的所有现有链接都消失了，目标指针箭头重置到窗口的最左侧，并且我收到以下错误消息直到我释放鼠标按钮:

Uncaught TypeError: Cannot read property 'el' of undefined
joint.js:16929 Error: Invalid value for <path> attribute d="M NaN NaN C NaN NaN NaN NaN NaN NaN"
joint.js:16929 Error: Invalid value for <path> attribute d="M NaN NaN C NaN NaN NaN NaN NaN NaN"
joint.js:16929 Error: Invalid value for <path> attribute transform="translate(NaN,0) scale(1,1)"
joint.js:16929 Error: Invalid value for <path> attribute transform="translate(NaN,0) scale(1,1) rotate(NaN)"
joint.js:16929 Error: Invalid value for <path> attribute transform="translate(NaN,0) scale(1,1)"
joint.js:16929 Error: Invalid value for <path> attribute transform="translate(NaN,0) scale(1,1) rotate(NaN)"
joint.js:16929 Error: Invalid value for <g> attribute transform="translate(NaN,0) scale(0.5,0.5)"
joint.js:16929 Error: Invalid value for <g> attribute transform="translate(NaN,0) scale(0.5,0.5) rotate(NaN)"
joint.js:16929 Error: Invalid value for <g> attribute transform="translate(NaN,0) scale(0.5,0.5)"
joint.js:16929 Error: Invalid value for <g> attribute transform="translate(NaN,0) scale(0.5,0.5) rotate(NaN)"
joint.js:22209 Uncaught TypeError: Cannot read property 'x' of undefined

我使用的代码如下:

var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({
    el: $('#paper'),
    width: window.innerWidth,
    height: window.innerHeight,
    gridSize: 1,
    model: graph,
    validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
      // Prevent loop linking
      return (magnetS !== magnetT);
    }
});
function invertColor(hex) { //This is just for text
  var color = hex;
  color = color.substring(1);          
  color = parseInt(color, 16);         
  color = 0xFFFFFF ^ color;            
  color = color.toString(16);          
  color = ("000000" + color).slice(-6);
  color = "#" + color;                 
  return color;
}
var shapenodes = []; //Here I store all the nodes with data
var connections = {}; //Here I store the SourceID: [targetIDs] relationships
var links = []; //Here I store links generated from above

for (var i=0;i<nodes.length;i++){ //Loop through data from the DB
  var wraptext = joint.util.breakText(nodes[i].text, {width: nodes[i].width - 20}); //Process text so it doesn't overflow
  var newNode = new joint.shapes.basic.Rect({
    position: {x: nodes[i].x, y: nodes[i].y},
    size: {width: nodes[i].width, height: nodes[i].height},
    attrs: {
      rect: {
        fill: nodes[i].color,
        rx: 8,
        ry: 8,
        stroke: '',
        magnet: true //Convert the underlying the rectangle to magnet
      },
      text: { //This is used to drag the shape
        text: wraptext,
        fill: invertColor(nodes[i].color),
        'font-family': 'Arial',
        'font-size': 18,
        'font-weight': 'bold',
        'font-variant': 'small-caps'
      }
    },
    id: nodes[i].ID //Assign the same ID as in database (unique)
  });
  var sourceID = newNode.id;
  connections[sourceID] = []; //Store the targets
  Array.prototype.push.apply(connections[sourceID], nodes[i].targets);
  shapenodes.push(newNode);
}
for (var SID in connections){ //for all Source IDs in connections
  if(connections[SID].length>0) { //if there are targets
    _.each(connections[SID], function (target) {
      var link = new joint.dia.Link({ //make link for each target
        source: {id: SID},
        target: {id: ''+target+''},
        'smooth': true,
        attrs: {
          '.connection': {'stroke-width': 3},
          '.marker-source':{},
          '.marker-target':{d: 'M 10 0 L 0 5 L 10 10 z', stroke: 'black', fill: 'black'},
          'z-index': -1 //I am not sure if this has any effect anyway...
        }
      });
      links.push(link);
    });
  }
}
graph.addCells(shapenodes); //Add to graph
graph.addCell(links);

我使用的示例数据如下:

var nodes = [ //Sample data
  {
    ID: 1,
    Chart: 1,
    x: 50,
    y: 50,
    width: 100,
    height: 80,
    color: "#003253",
    text: "Try to code",
    label: "Start",
    targets: [2]
  },
  {
    ID: 2,
    Chart: 1,
    x: 500,
    y: 170,
    width: 100,
    height: 80,
    color: "#365C5A",
    text: "Fail",
    label: "End",
    targets: [3]
  },
  {
    ID: 3,
    Chart: 1,
    x: 270,
    y: 350,
    width: 150,
    height: 80,
    color: "#81271E",
    text: "Cry a lot",
    label: "Mid",
    targets: [1]
  }
];

我看了很多例子，看来我的应该可以工作。您知道为什么会发生这种情况吗？ JSfiddle

Answer 1

Cell id 必须是字符串。您已提供一个号码。

当您为单元格使用自定义 ID 时，只需确保它始终是字符串即可。

var rect = new joint.shapes.basic.Rect({ id: String(customId) });