title: control edge rendering of a network in vis.js
body: <p>I am working on a control flow graph visualizer using vis.js. it's like the example provided by the maintainesr <a href="https://github.com/ckane/vis/blob/b10f7d0fefdf3260586b00ed468a219cda68bfd9/examples/network/exampleApplications/disassemblerExample.html" rel="nofollow noreferrer">here</a>.</p>
  
  <p>the following image shows the result:
  <a href="https://i.stack.imgur.com/K5jRl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K5jRl.png" alt="control flow graph"></a></p>
  
  <p>I want control the way edges are drawn: out arrows start from the bottom and in arrows end at the top of the node. is there a way to have such behavior in vis.js? also can I prevent edges from crossing nodes?</p>
  
  <p>this is my options:</p>
  
  <pre><code>var opts = {
      autoResize: true,
      height: '100%',
      width: '100%',
      locale: 'en',
      edges: {
          arrows: { to: {enabled: true}},
          smooth: { enabled: true}
      },
      nodes: {
          font: {'face': 'monospace', 'align': 'left'}
      },
      layout: {
          improvedLayout:true,
          hierarchical: {
              enabled: true,
              sortMethod: "directed",
              direction: "UD",
              nodeSpacing: 200,
              levelSeparation: 200,
          }
      },
      physics:  {
          hierarchicalRepulsion: {
              nodeDistance: 300
          }
      }
  };
  
  var network = new vis.Network(this.domRoot.find(".graph-placeholder")[0], 
                                           this.defaultCfgOuput, opts);
  </code></pre>