Vis.js Per Group Physics

时间：2017-11-14 22:31:28

标签： vis.js vis.js-network

enter image description here

我首先要描述一下我想要实现的目标。附图是我得到的最接近的图像。

  1. 3个蓝色六边形应全部接触。
  2. 粉红色的Hexes应该全部水平运行。
  3. 白色（和一个红色）应该像从绿色到粉红色一样大致流动。所有这些链接的长度应该是统一的。
  4. 从橙色开始，黄色应该是相同的。

    5. 只要没有附加其他六边形，我就能够达到＃1。我想我能得到我正在寻找的东西，如果我能让4组不受彼此物理影响那么多。白色和粉红色以及黄色和粉红色之间的连接可以比白色和橙色之间的连接更长，以使其“适合”。

    有4个physics: false个节点连接到绿色，左边是粉红色，橙色和所有三个蓝色。 fixed属性似乎更合适，但当以这种方式定位时，节点似乎忽略了x和y值。这些用于将图形拉成形状。我也愿意接受其他方式。

    还有另一种方法可以实现我正在寻找的东西吗？至少有一种方法可以强制粉红色节点更喜欢水平运行吗？

    我尝试了各种物理解算器。默认的barnesHut是我目前正在使用的。

    var hex_style = 'cursor: pointer; stroke: #000; stroke-width: 1;';
var hextext_style = 'text-align: center; height: 56%; width: 80%; padding: 22% 10%;';
var present_style = 'fill: #55F; font-size: 35px; cursor: pointer; fill-opacity: 1; stroke: #000; stroke-width: 1; transform: rotate(90deg); transform-origin: 50% 50%;';
var past_style = 'fill: #F99; font-size: 35px; cursor: pointer; fill-opacity: 1; stroke: #000; stroke-width: 1; transform: rotate(90deg); transform-origin: 50% 50%;';
var nirvana_style = 'fill: #5F5; font-size: 35px; cursor: pointer; fill-opacity: 1; stroke: #000; stroke-width: 1; transform: rotate(90deg); transform-origin: 50% 50%;';
var future_nirvana_style = 'fill: #FFF; font-size: 35px; cursor: pointer; fill-opacity: 1; stroke: #000; stroke-width: 1; transform: rotate(90deg); transform-origin: 50% 50%;';
var hell_style = 'fill: #FA0; font-size: 35px; cursor: pointer; fill-opacity: 1; stroke: #000; stroke-width: 1; transform: rotate(90deg); transform-origin: 50% 50%;';
var future_hell_style = 'fill: #EE9; font-size: 35px; cursor: pointer; fill-opacity: 1; stroke: #000; stroke-width: 1; transform: rotate(90deg); transform-origin: 50% 50%;';
var wild_card_style = 'fill: #F66; font-size: 35px; cursor: pointer; fill-opacity: 1; stroke: #000; stroke-width: 1; transform: rotate(90deg); transform-origin: 50% 50%;';
var description_white_style = 'color:white; font-size: 35px';
var description_black_style = 'color:black; font-size: 35px';


var hexsvg = function(svg_class, poly_class, div_class, message_class, message) {
  var svg = '<svg style="' + svg_class + '" xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" xmlns:xlink="http://www.w3.org/1999/xlink">' +
    '<polygon style="' + poly_class + '" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>' +
    '<foreignObject x="0" y="0" width="100%" height="100%">' +
    '<div style="' + div_class + '" xmlns="http://www.w3.org/1999/xhtml">' +
    '<span style="' + message_class + '">' + message + '</span>' +
    '</div>' +
    '</foreignObject>' +
    '</svg>';

  return svg;
};

var svgurl = function(svg) {
  return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
};

var network;

var draw = function() {

  if (network) {
    network.destroy();
  }

  var nodes = [];
  var edges = [];

  // Add the nodes
  nodes.push({
    id: 'present_1',
    group: 'present',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, present_style, hextext_style, description_white_style, ''))
  });
  nodes.push({
    id: 'present_2',
    group: 'present',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, present_style, hextext_style, description_white_style, ''))
  });
  nodes.push({
    id: 'present_3',
    group: 'present',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, present_style, hextext_style, description_white_style, ''))
  });
  nodes.push({
    id: 4,
    group: 'past',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, past_style, hextext_style, description_black_style, ''))
  });
  nodes.push({
    id: 5,
    group: 'past',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, past_style, hextext_style, description_black_style, ''))
  });
  nodes.push({
    id: 6,
    group: 'past',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, past_style, hextext_style, description_black_style, ''))
  });
  nodes.push({
    id: 7,
    group: 'past',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, past_style, hextext_style, description_black_style, ''))
  });
  nodes.push({
    id: 8,
    group: 'past',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, past_style, hextext_style, description_black_style, ''))
  });
  nodes.push({
    id: 9,
    group: 'past',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, past_style, hextext_style, description_black_style, ''))
  });
  nodes.push({
    id: 10,
    group: 'past',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, past_style, hextext_style, description_black_style, ''))
  });
  nodes.push({
    id: 'nirvana_1',
    group: 'nirvana',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, nirvana_style, hextext_style, description_white_style, ''))
  });
  nodes.push({
    id: 11,
    group: 'future_nirvana',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, future_nirvana_style, hextext_style, description_black_style, ''))
  });
  nodes.push({
    id: 12,
    group: 'future_nirvana',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, future_nirvana_style, hextext_style, description_black_style, ''))
  });
  nodes.push({
    id: 13,
    group: 'future_nirvana',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, future_nirvana_style, hextext_style, description_black_style, ''))
  });
  nodes.push({
    id: 14,
    group: 'future_nirvana',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, future_nirvana_style, hextext_style, description_black_style, ''))
  });
  nodes.push({
    id: 15,
    group: 'future_nirvana',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, future_nirvana_style, hextext_style, description_black_style, ''))
  });
  nodes.push({
    id: 'wild_card',
    group: 'future_nirvana',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, wild_card_style, hextext_style, description_black_style, ''))
  });
  nodes.push({
    id: 16,
    group: 'future_nirvana',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, future_nirvana_style, hextext_style, description_black_style, ''))
  });
  nodes.push({
    id: 17,
    group: 'future_nirvana',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, future_nirvana_style, hextext_style, description_black_style, ''))
  });
  nodes.push({
    id: 18,
    group: 'future_nirvana',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, future_nirvana_style, hextext_style, description_black_style, ''))
  });
  nodes.push({
    id: 19,
    group: 'future_nirvana',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, future_nirvana_style, hextext_style, description_black_style, ''))
  });
  nodes.push({
    id: 20,
    group: 'future_nirvana',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, future_nirvana_style, hextext_style, description_black_style, ''))
  });
  nodes.push({
    id: 21,
    group: 'future_nirvana',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, future_nirvana_style, hextext_style, description_black_style, ''))
  });
  nodes.push({
    id: 22,
    group: 'future_nirvana',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, future_nirvana_style, hextext_style, description_black_style, ''))
  });
  nodes.push({
    id: "hell_1",
    group: 'hell',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, hell_style, hextext_style, description_white_style, ''))
  });
  nodes.push({
    id: 24,
    group: 'future_hell',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, future_hell_style, hextext_style, description_black_style, ''))
  });
  nodes.push({
    id: 25,
    group: 'future_hell',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, future_hell_style, hextext_style, description_black_style, ''))
  });
  nodes.push({
    id: 26,
    group: 'future_hell',
    shape: 'image',
    image: svgurl(hexsvg(hex_style, future_hell_style, hextext_style, description_black_style, ''))
  });


  // Central present node
  nodes.push({
    id: 'present_fixed',
    x: 2500,
    y: 500,
    physics: false,
    color: 'rgba(0,255,0,0)',
    level: 2
  });
  edges.push({
    from: 'present_1',
    to: 'present_fixed',
    smooth: {
      type: 'discrete',
      roundness: 0
    },
    color: {
      color: 'white',
      opacity: 0
    }
  });
  edges.push({
    from: 'present_2',
    to: 'present_fixed',
    smooth: {
      type: 'discrete',
      roundness: 0
    },
    color: {
      color: 'white',
      opacity: 0
    }
  });
  edges.push({
    from: 'present_3',
    to: 'present_fixed',
    smooth: {
      type: 'discrete',
      roundness: 0
    },
    color: {
      color: 'white',
      opacity: 0
    }
  });

  // Present
  edges.push({
    from: 'present_1',
    to: 'present_2',
    smooth: {
      type: 'discrete',
      roundness: 0
    }
  });
  edges.push({
    from: 'present_2',
    to: 'present_3',
    smooth: {
      type: 'discrete',
      roundness: 0
    }
  });
  edges.push({
    from: 'present_3',
    to: 'present_1',
    smooth: {
      type: 'discrete',
      roundness: 0
    }
  });


  // Past edges: {
  edges.push({
    from: 4,
    to: 'present_1'
  });
  edges.push({
    from: 5,
    to: 4
  });
  edges.push({
    from: 6,
    to: 5
  });
  edges.push({
    from: 7,
    to: 6
  });
  edges.push({
    from: 8,
    to: 7
  });
  edges.push({
    from: 9,
    to: 8
  });
  edges.push({
    from: 10,
    to: 9
  });

  // Fixed Past node
  nodes.push({
    id: 'past_fixed',
    x: 0,
    y: 500,
    physics: false,
    color: 'rgba(0,0,0,0)',
    level: 2
  });
  edges.push({
    from: 'past_fixed',
    to: 10,
    smooth: {
      type: 'discrete',
      roundness: 0
    },
    color: {
      color: 'white',
      opacity: 0
    }
  });

  // Central Hell node
  nodes.push({
    id: 'hell_fixed',
    x: 3250,
    y: 1000,
    physics: false,
    color: 'rgba(0,0,0,0)',
    level: 3
  });
  edges.push({
    from: 'hell_1',
    to: 'hell_fixed',
    smooth: {
      type: 'discrete',
      roundness: 0
    },
    color: {
      color: 'white',
      opacity: 0
    }
  });

  // Hell Path
  edges.push({
    from: 24,
    to: 'hell_1'
  });
  edges.push({
    from: 25,
    to: 24
  });
  edges.push({
    from: 26,
    to: 25
  });
  edges.push({
    from: 4,
    to: 26,
    length: 400,
    smooth: {
      type: 'vertical'
    }
  });

  // Central Nirvana node
  nodes.push({
    id: 'nirvana_fixed',
    x: 4000,
    y: 0,
    physics: false,
    color: 'rgba(0,0,0,0)',
    level: 1
  });
  edges.push({
    from: 'nirvana_1',
    to: 'nirvana_fixed',
    smooth: {
      type: 'discrete',
      roundness: 0
    },
    color: {
      color: 'white',
      opacity: 0
    }
  });

  // Nirvana Path
  edges.push({
    from: 11,
    to: 'nirvana_1'
  });
  edges.push({
    from: 12,
    to: 11
  });
  edges.push({
    from: 13,
    to: 12
  });
  edges.push({
    from: 14,
    to: 13
  });
  edges.push({
    from: 15,
    to: 14
  });
  edges.push({
    from: 'wild_card',
    to: 15
  });
  edges.push({
    from: 16,
    to: 'wild_card'
  });
  edges.push({
    from: 17,
    to: 16
  });
  edges.push({
    from: 18,
    to: 17
  });
  edges.push({
    from: 19,
    to: 18
  });
  edges.push({
    from: 20,
    to: 19
  });
  edges.push({
    from: 21,
    to: 20
  });
  edges.push({
    from: 22,
    to: 21
  });
  edges.push({
    from: 10,
    to: 22,
    length: 500,
    smooth: {
      type: 'vertical'
    }
  });

  // DOM element where the Network will be attached
  var container = document.getElementById('hexchart');

  var data = {
    nodes: nodes,
    edges: edges
  };

  // Configuration for the Network
  var options = {
    nodes: {
      size: 125
    },
    edges: {
      smooth: {
        type: 'horizontal'
      }
    },
    groups: {
      present: {
        background: 'blue',
        mass: 50
      },
      past: {
        background: 'pink'
      },
      nirvana: {
        background: 'green'
      },
      hell: {
        background: 'orange'
      },
      future_nirvana: {
        background: 'white'
      },
      future_hell: {
        background: 'yellow'
      }
    },
    physics: {
      solver: 'barnesHut',
      /*forceAtlas2Based: {
      	gravitationalConstant: -600,
      	centralGravity: 0.0,
      	springConstant: 0.2,
      	springLength: 0,
      	damping: 0.06,
      	avoidOverlap: 1
      },*/
      barnesHut: {
        gravitationalConstant: -7000,
        centralGravity: 0.1,
        springLength: 155,
        springConstant: 1.0,
        damping: 0.8,
        avoidOverlap: 0.75
      }
    }
    /*,
    				configure: {
    					filter: 'physics',
    					container: document.getElementById('optionsContainer'),
    					showButton: false
    				}*/
  };

  // Create a Network
  network = new vis.Network(container, data, options);
};

document.onload(draw());
    #hexchart {
  width: 100%;
  height: 800px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>

<div id="optionsContainer" style="float:right"></div>
<div id="hexchart"></div>

    vis.js 4.21.0 在chrome中渲染

0 个答案:

没有答案
相关问题
最新问题