Question

我正在使用Jointjs来实现我的需要。

我需要知道的是，如何将来自json文件的数据放入组织结构图中。在example of Jointjs中，所有内容都是硬编码的，显然只适用于演示效果。

查看代码

// here I call the json
$.getJSON( "test.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    console.log(key, val)
  });
});

此json返回：

[
    {   "Employee_id" : "345345",
        "name" : "Helga Martinez",
        "Contact_Info" : {
            "skype" : "mySkype",
            "email" : "myemail@email.com"
        },
        "Position" : "PM",
        "LOB" : "my lob",
        "Location" : "onshore",
        "Profile_Picture" : "URL",
        "Read_More" : "optional section"
    },
    {   "Employee_id" : "786",
        "name" : "jordan loaiza",
        "Contact_Info" : {
            "skype" : "the Skype",
            "email" : "theemail@email.com"
        },
        "Position" : "Dev",
        "LOB" : "the lob",
        "Location" : "offshore",
        "Profile_Picture" : "url/URL",
        "Read_More" : "optional section"
    },
    {   "Employee_id" : "23425",
        "name" : "marvin solano",
        "Contact_Info" : {
            "skype" : "3 Skype",
            "email" : "3email@email.com"
        },
        "Position" : "Front-End",
        "LOB" : "3 LOB",
        "Location" : "offshore",
        "Profile_Picture" : "url/URL/3",
        "Read_More" : "optional section"
    },
    {   "Employee_id" : "7657",
        "name" : "leroy bernard",
        "Contact_Info" : {
            "skype" : "5 Skype",
            "email" : "5email@email.com"
        },
        "Position" : "Sr Software Engineer",
        "LOB" : "5 LOB",
        "Location" : "onshore",
        "Profile_Picture" : "url/URL/5",
        "Read_More" : "optional section"
    },
    {   "Employee_id" : "78987",
        "name" : "diego porras",
        "Contact_Info" : {
            "skype" : "6 Skype",
            "email" : "6email@email.com"
        },
        "Position" : "Sr Front-End",
        "LOB" : "6 LOB",
        "Location" : "onshore",
        "Profile_Picture" : "url/URL/6",
        "Read_More" : "tons of things to say about me . . ."
    }
];

现在，根据位置属性"Position" : "PM"，PM应位于组织结构图的头部，然后低于其他人。

以下是我尝试使用的组织结构图的源代码

var graph = new joint.dia.Graph();

var paper = new joint.dia.Paper({
    el: $('#paper'),
    width: 800,
    height: 600,
    gridSize: 1,
    model: graph,
    perpendicularLinks: true,
    restrictTranslate: true
});

var member = function(x, y, rank, name, image, background, textColor) {

    textColor = textColor || "#000";

    var cell = new joint.shapes.org.Member({
        position: { x: x, y: y },
        attrs: {
            '.card': { fill: background, stroke: 'none'},
              image: { 'xlink:href': '/images/demos/orgchart/'+ image, opacity: 0.7 },
            '.rank': { text: rank, fill: textColor, 'word-spacing': '-5px', 'letter-spacing': 0},
            '.name': { text: name, fill: textColor, 'font-size': 13, 'font-family': 'Arial', 'letter-spacing': 0 }
        }
    });
    graph.addCell(cell);
    return cell;
};

function link(source, target, breakpoints) {

    var cell = new joint.shapes.org.Arrow({
        source: { id: source.id },
        target: { id: target.id },
        vertices: breakpoints,
        attrs: {
            '.connection': {
                'fill': 'none',
                'stroke-linejoin': 'round',
                'stroke-width': '2',
                'stroke': '#4b4a67'
            }
        }

    });
    graph.addCell(cell);
    return cell;
}

var bart = member(300,70,'CEO', 'Bart Simpson', 'male.png', '#30d0c6');
var homer = member(90,200,'VP Marketing', 'Homer Simpson', 'male.png', '#7c68fd', '#f1f1f1');
var marge = member(300,200,'VP Sales', 'Marge Simpson', 'female.png', '#7c68fd', '#f1f1f1');
var lisa = member(500,200,'VP Production' , 'Lisa Simpson', 'female.png', '#7c68fd', '#f1f1f1');
var maggie = member(400,350,'Manager', 'Maggie Simpson', 'female.png', '#feb563');
var lenny = member(190,350,'Manager', 'Lenny Leonard', 'male.png', '#feb563');
var carl = member(190,500,'Manager', 'Carl Carlson', 'male.png', '#feb563');



link(bart, marge, [{x: 385, y: 180}]);
link(bart, homer, [{x: 385, y: 180}, {x: 175, y: 180}]);
link(bart, lisa, [{x: 385, y: 180}, {x: 585, y: 180}]);
link(homer, lenny, [{x:175 , y: 380}]);
link(homer, carl, [{x:175 , y: 530}]);
link(marge, maggie, [{x:385 , y: 380}]);

返回此视图

如您所见，该组织结构图的数据是硬编码的，我需要相同但我使用的是从JSON接收的数据。

有什么建议吗？

Answer 1

此代码根据您的json数据和plugin的限制提供自定义答案：

var graph = new joint.dia.Graph();

  var paper = new joint.dia.Paper({
      el: $('#paper'),
      width: 800,
      height: 600,
      gridSize: 1,
      model: graph,
      perpendicularLinks: true,
      restrictTranslate: true
  });

  var member = function(x, y, rank, name, image, background, textColor) {

      textColor = textColor || "#000";

      var cell = new joint.shapes.org.Member({
          position: { x: x, y: y },
          attrs: {
              '.card': { fill: background, stroke: 'none'},
                image: { 'xlink:href': '/images/demos/orgchart/'+ image, opacity: 0.7 },
              '.rank': { text: rank, fill: textColor, 'word-spacing': '-5px', 'letter-spacing': 0},
              '.name': { text: name, fill: textColor, 'font-size': 13, 'font-family': 'Arial', 'letter-spacing': 0 }
          }
      });
      graph.addCell(cell);
      return cell;
  };

  function link(source, target, breakpoints) {

      var cell = new joint.shapes.org.Arrow({
          source: { id: source.id },
          target: { id: target.id },
          vertices: breakpoints,
          attrs: {
              '.connection': {
                  'fill': 'none',
                  'stroke-linejoin': 'round',
                  'stroke-width': '2',
                  'stroke': '#4b4a67'
              }
          }

      });
      graph.addCell(cell);
      return cell;
  }


  var testJson = [
      {   "Employee_id" : "345345",
          "name" : "Helga Martinez",
          "Contact_Info" : {
              "skype" : "mySkype",
              "email" : "myemail@email.com"
          },
          "Position" : "PM",
          "LOB" : "my lob",
          "Location" : "onshore",
          "Profile_Picture" : "URL",
          "Read_More" : "optional section"
      },
      {   "Employee_id" : "786",
          "name" : "jordan loaiza",
          "Contact_Info" : {
              "skype" : "the Skype",
              "email" : "theemail@email.com"
          },
          "Position" : "Dev",
          "LOB" : "the lob",
          "Location" : "offshore",
          "Profile_Picture" : "url/URL",
          "Read_More" : "optional section"
      },
      {   "Employee_id" : "23425",
          "name" : "marvin solano",
          "Contact_Info" : {
              "skype" : "3 Skype",
              "email" : "3email@email.com"
          },
          "Position" : "Front-End",
          "LOB" : "3 LOB",
          "Location" : "offshore",
          "Profile_Picture" : "url/URL/3",
          "Read_More" : "optional section"
      },
      {   "Employee_id" : "7657",
          "name" : "leroy bernard",
          "Contact_Info" : {
              "skype" : "5 Skype",
              "email" : "5email@email.com"
          },
          "Position" : "Sr Software Engineer",
          "LOB" : "5 LOB",
          "Location" : "onshore",
          "Profile_Picture" : "url/URL/5",
          "Read_More" : "optional section"
      },
      {   "Employee_id" : "78987",
          "name" : "diego porras",
          "Contact_Info" : {
              "skype" : "6 Skype",
              "email" : "6email@email.com"
          },
          "Position" : "Sr Front-End",
          "LOB" : "6 LOB",
          "Location" : "onshore",
          "Profile_Picture" : "url/URL/6",
          "Read_More" : "tons of things to say about me . . ."
      }
  ];



  var levels = ['#30d0c6','#7c68fd','#feb563']
  var head = member(300,70,testJson[0].Position,testJson[0].name,testJson[0].Profile_Picture,levels[0]);
  var objUsers = {};
  var x = -200;
  var y = 200;
  $.each(testJson,function(i,item){
    if(i !== 0){
      x = x +200;
      objUsers[item.name] = member(x,y,item.Position,item.name,item.Profile_Picture,levels[1]);
      link(head,objUsers[item.name],[{x: 385, y: 180}, {x: x + 100, y: 180}]);
    }   
  });

如何使用Jointjs从外部json文件中使用动态数据

1 个答案:

工作小提琴：https://jsfiddle.net/robertrozas/gfaL9ype/