Блог

Я пытаюсь построить диаграмму организации из платформы balkangraph (https://balkan.app/). В этом у нас есть ссылки на узлы и переходы. Я пытаюсь переключаться между узловыми ссылками и скользящими.

У меня есть 3 разных шаблона для слинков, как показано ниже myorange, yellow, arrows

   OrgChart.slinkTemplates.myorange = Object.assign({}, OrgChart.slinkTemplates.orange);
    OrgChart.slinkTemplates.myorange.defs = '';
    OrgChart.slinkTemplates.myorange.link = '<path stroke-dasharray="4, 2" stroke="grey" stroke-width="1" fill="none" d="{d}" />';
    
    OrgChart.slinkTemplates.arrows = Object.assign({}, OrgChart.slinkTemplates.orange);
    OrgChart.slinkTemplates.arrows.defs = 
        '<marker id="arrowStartSlinkOrange" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse"><path fill="#F57C00" d="M 0 0 L 10 5 L 0 10 z" /></marker>'
    
      '<marker id="arrowEndSlinkOrange" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse"> <path fill="#F57C00" d="M 0 0 L 10 5 L 0 10 z" /></marker>';
    
    OrgChart.slinkTemplates.arrows.link = '<path stroke-dasharray="4, 2" marker-start="url(#arrowEndSlinkOrange)" marker-end="url(#arrowStartSlinkOrange)" stroke-linejoin="round" stroke="#F57C00" stroke-width="2" fill="none" d="{d}" />';
 

У меня есть кнопка переключения, на которой я скрываю шаблоны ссылок и ссылки.

Проблема здесь в том, что если у меня есть один шаблон, я могу переключаться. Но с 3 различными шаблонами слинков я не могу этого сделать.

Если кто-нибудь работал над balkanGraph OrgChart JS, пожалуйста, подскажите, как переключаться

Ниже приведен код переключения

 document.querySelector('#btn').addEventListener('click', function(){

    if (chart.config.template == "ana") {
      chart.config.template = "hiddenLinks";
      for (i = 0; i < chart.config.slinks.length; i  ){
        chart.config.slinks[i].template = "orange";
      }
      chart.draw();
    }
    else {
      chart.config.template = "ana";
      for (i = 0; i < chart.config.slinks.length; i  ){
        chart.config.slinks[i].template = "hiddenSlinks";
      }
      chart.draw();
    }
  });
 

Весь код выглядит так. При этом при переключении все три слинка становятся оранжевыми. Поэтому я хочу , чтобы при переключении я мог поддерживать шаблоны

 OrgChart.templates.hiddenLinks = Object.assign({}, OrgChart.templates.ana);
  OrgChart.templates.hiddenLinks.link = '';

  OrgChart.slinkTemplates.hiddenSlinks = Object.assign({}, OrgChart.slinkTemplates.orange);
  OrgChart.slinkTemplates.hiddenSlinks.link = '';
  
  //centering the slinks:
  
  OrgChart.templates.hiddenLinks.expandCollapseSize = 0;
  OrgChart.templates.hiddenLinks.plus = '<circle cx="0" cy="0" r="15" fill="#ffffff" stroke="#aeaeae" stroke-width="1"></circle>'
      '<line x1="-11" y1="0" x2="11" y2="0" stroke-width="1" stroke="#aeaeae"></line>'
      '<line x1="" y1="-11" x2="" y2="11" stroke-width="1" stroke="#aeaeae"></line>';
  OrgChart.templates.hiddenLinks.minus = '<circle cx="0" cy="0" r="15" fill="#ffffff" stroke="#aeaeae" stroke-width="1"></circle>'
      '<line x1="-11" y1="0" x2="11" y2="0" stroke-width="1" stroke="#aeaeae"></line>';
    
    
  OrgChart.slinkTemplates.myorange = Object.assign({}, OrgChart.slinkTemplates.orange);
    OrgChart.slinkTemplates.myorange.defs = '';
    OrgChart.slinkTemplates.myorange.link = '<path stroke-dasharray="4, 2" stroke="grey" stroke-width="1" fill="none" d="{d}" />';
    
    OrgChart.slinkTemplates.arrows = Object.assign({}, OrgChart.slinkTemplates.orange);
    OrgChart.slinkTemplates.arrows.defs = 
        '<marker id="arrowStartSlinkOrange" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse"><path fill="#F57C00" d="M 0 0 L 10 5 L 0 10 z" /></marker>'
    
      '<marker id="arrowEndSlinkOrange" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse"> <path fill="#F57C00" d="M 0 0 L 10 5 L 0 10 z" /></marker>';
    
    OrgChart.slinkTemplates.arrows.link = '<path stroke-dasharray="4, 2" marker-start="url(#arrowEndSlinkOrange)" marker-end="url(#arrowStartSlinkOrange)" stroke-linejoin="round" stroke="#F57C00" stroke-width="2" fill="none" d="{d}" />';

  var chart = new OrgChart(document.getElementById("tree"), { 
      nodeBinding: {
          field_0: "id",
          field_1: "pid"
      },
      slinks: [
          {from: 7, to: 1, template: "myorange" }, 
          {from: 5, to: 0, template: "arrows"  },
          {from: 2, to: 6, template: "yellow"  },
      ]
  });

  chart.load([
      { id: 0},
      { id: 1, pid: 0 },
      { id: 2, pid: 0 },
      { id: 3, pid: 1 },
      { id: 4, pid: 2 },
      { id: 5, pid: 1 },
      { id: 6, pid: 2 },
      { id: 7, pid: 5 }
  ]);

  document.querySelector('#btn').addEventListener('click', function(){

    if (chart.config.template == "ana") {
      chart.config.template = "hiddenLinks";
      for (i = 0; i < chart.config.slinks.length; i  ){
        chart.config.slinks[i].template = "orange";
      }
      chart.draw();
    }
    else {
      chart.config.template = "ana";
      for (i = 0; i < chart.config.slinks.length; i  ){
        chart.config.slinks[i].template = "hiddenSlinks";
      }
      chart.draw();
    }
  });