javascript - 您如何影响层次结构的 Kendo UI 图中连接器的位置

Question

我正在使用 Kendo UI's diagramming component 构建组织结构图

我不希望用户能够编辑图表，因为它是他们之前输入的位置的只读表示，但我确实希望以特定方式显示图表。

我使用的布局类型是tree，子类型是down。我使用 HeirarchicalDataSource 作为 dataSource

图表的默认绘制方式如下所示:

但是，我的老板需要它看起来像这样:

所以父节点的所有子节点都来自底部连接器。

我认为没有办法以编程方式影响它。请帮忙。

Answer 1

关闭编辑很简单，只需传递给您的选项 editable: false。要使布局与您发布的布局相似，请使用两个变量:horizo​​ntalSeparation、verticalSeparation under layout

http://dojo.telerik.com/uNOVa/2

  function createDiagram() {
    $("#diagram").kendoDiagram({
      editable: false,
      dataSource: {
        data: diagramNodes(),
        schema: {
          model: {
            children: "items"
          }
        }
      },
      layout: {
        type: "tree",
        subtype: "down",
        horizontalSeparation: 60,
        verticalSeparation: 40
      },
      shapeDefaults: {
        width: 40,
        height: 40
      }
    });
  }

  function diagramNodes() {
    var root = { name: "0", items: [] };
    addNodes(root, [3, 2, 2]);
    return [root];
  }

  function addNodes(root, levels) {
    if (levels.length > 0) {
      for (var i = 0; i < levels[0]; i++) {
        var node = { name: "0", items: [] };
        root.items.push(node);

        addNodes(node, levels.slice(1));
      }
    }
  }

  $(document).ready(function() {
    $("#subtype").change(function() {
      $("#diagram").getKendoDiagram().layout({
        subtype: $(this).val(),
        type: "tree",
        horizontalSeparation: 30,
        verticalSeparation: 20
      });
    });
  });

  $(document).ready(createDiagram);
  $(document).bind("kendo:skinChange", createDiagram);

还有另一种类型的渲染连接:

  connectionDefaults: {
    type: "polyline"
  }

您可以在这里查看:http://dojo.telerik.com/uNOVa/3

您还可以修复与数组的连接: connections一个例子在这里: example