1

我正在尝试从 balkangraph 框架（https://balkan.app/）构建一个 OrgChart。在这个我们有nodelinks和slinks。我正在尝试在 nodelinks 和 slinks 之间切换。

我有 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}" />';

我有一个切换按钮，我在其上隐藏了 slinks 模板和链接。

这里的问题是，如果我只有一个模板，我可以切换。但是使用 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();
    }
  });

整个代码看起来像这样。在此同时切换所有三个 slink 都变成橙色。所以我想在切换时，我可以维护模板

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();
    }
  });
4

0 回答 0