剣道の図形を中心にして

Question

私はTelerikのウェブサイトの基本使用法の例に従っていますが、モデル、子供階層の使用は例外です。私はちょうどテキストボックスで図形をリストし、それらを接続し、後で接続を得ることができるようにしたい。これまでのところ、図形やテキストボックスをリストすることはできましたが、何らかの理由ですべての図形が図の原点に集中してしまいました。私はいくつかの順序で、接続なしで図形をリストすることができるようにしたい、後でそれらをダイアグラムに接続します。ここで私が持っているコードは、これまでのところです：

var data = [{ 
      firstName: "Antonio", 
      lastName: "Moreno", 
      title: "Team Lead", 
      colorScheme: "#1696d3" 
     }, 
     { 
      firstName: "Alfredo", 
      lastName: "Morales", 
      title: "Team Lead", 
      colorScheme: "#1696d3" 

     }]; 

     function visualTemplate(options) { 
      var dataviz = kendo.dataviz; 
      var g = new dataviz.diagram.Group(); 
      var dataItem = options.dataItem; 

      g.append(new dataviz.diagram.Rectangle({ 
       width: 210, 
       height: 75, 
       stroke: { 
        width: 0 
       }, 
       fill: { 
        gradient: { 
         type: "linear", 
         stops: [{ 
          color: dataItem.colorScheme, 
          offset: 0, 
          opacity: 0.5 
         }, { 
          color: dataItem.colorScheme, 
          offset: 1, 
          opacity: 1 
         }] 
        } 
       } 
      })); 

      g.append(new dataviz.diagram.TextBlock({ 
       text: dataItem.firstName + " " + dataItem.lastName, 
       x: 85, 
       y: 20, 
       fill: "#fff" 
      })); 

      g.append(new dataviz.diagram.TextBlock({ 
       text: dataItem.title, 
       x: 85, 
       y: 40, 
       fill: "#fff" 
      })); 

      return g; 
     } 

     function createDiagram() { 
      $("#diagram").kendoDiagram({ 
       dataSource: new kendo.data.HierarchicalDataSource({ 
        data: data, 
       }), 
       shapeDefaults: { 
        visual: visualTemplate 
       }, 
      }); 

      var diagram = $("#diagram").getKendoDiagram(); 
      diagram.bringIntoView(diagram.shapes); 
     } 

     $(document).ready(createDiagram); 

Answer 1

私はいくつかのサンプル作りました：http://dojo.telerik.com/UbECE別の長方形1は、次のことができます。

私はAPIドキュメントからhttp://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram#configuration-shapeDefaults.visual

をこの例を以下の午前彼らは、使用している：

$("#diagram").getKendoDiagram().layout(); 

動作します。

あなたの機能の意志になった：

function createDiagram() { 
     $("#diagram").kendoDiagram({ 
      dataSource : data, 
      shapeDefaults: { 
       visual: visualTemplate 
      }, 
     }); 

     $("#diagram").getKendoDiagram().layout(); 
    }