2

我正在开发一个社交网络可视化组件。我正在使用 Vivagraph 库，但是当我添加未连接到另一个节点的节点时，图形会超出容器。这是我的实现。请帮忙，这对我很重要。

这是我的 javascript 文件。

 var max_radius = 20;
 var min_radius = 5;
 var max_fitness=10;
 var min_fitness=2;
 var contenedor;
 jQuery(document).ready(function(){
  contenedor=document.getElementById('graph-container');
  onLoad();}
  );

function onLoad() {
  var graph = constructGraph();

  var graphics = Viva.Graph.View.svgGraphics();

  var defs = Viva.Graph.svg('defs');
  graphics.getSvgRoot().append(defs);

  graphics.node(createNodeWithImage)
    .placeNode(placeNodeWithTransform)
    .link(createCustomLink)
    .placeLink(function(linkUI, fromPos, toPos) {
                // linkUI - is the object returend from link() callback above.
                var data = 'M' + fromPos.x + ',' + fromPos.y +
                           'L' + toPos.x + ',' + toPos.y;

                linkUI.attr("d", data);
            });

  var layout = Viva.Graph.Layout.forceDirected(graph, {
                   springLength : 10,
                   springCoeff : 0.0001,
                   dragCoeff : 0.02,
                   gravity : -30
                });
  
  var renderer = Viva.Graph.View.renderer(graph, {
    layout: layout,
    graphics: graphics,
    container: contenedor
    ,prerender:100
  });

  renderer.run();
  setTimeout(function(){ 
    //renderer.reset();
    renderer.pause();
  }, 2000);
  function createNodeWithImage(node) {    
    var radius=parseInt(max_radius*node.data.weight,10)+min_radius;
    // First, we create a fill pattern and add it to SVG's defs:
    var pattern = Viva.Graph.svg('pattern')
      .attr('id', "imageFor_" + node.id)
      .attr('patternUnits', "userSpaceOnUse")
      .attr('width', 200)
      .attr('height', 200)
    var image = Viva.Graph.svg('image')
      .attr('x', '0')
      .attr('y', '0')
      .attr('height', radius*2)
      .attr('width', radius*2)
      .link(node.data.url);
    pattern.append(image);
    defs.append(pattern);

    // now create actual node and reference created fill pattern:
    var stroke_width=parseInt(radius*0.09375,10)+1;
    var ui = Viva.Graph.svg('g');
    var circle = Viva.Graph.svg('circle')
      .attr('cx', radius)
      .attr('cy', radius)
      .attr('fill', 'url(#imageFor_' + node.id + ')')
      .attr('r', radius)
      .attr('stroke',node.data.typeColor)
      .attr('stroke-width',stroke_width);

    ui.append(circle);

    
    jQuery(ui).hover(function() { // mouse over
                    
                }, function() { // mouse out
                    
                });

    return ui;
  }

  function placeNodeWithTransform(nodeUI, pos) {
    // Shift image to let links go to the center:
    var offset=parseInt(nodeUI.node.data.weight*max_radius+min_radius,10);
    nodeUI.attr('transform', 'translate(' + (pos.x - offset) + ',' + (pos.y - offset) + ')');
  }
}

function createCustomLink(link){  
  var ui =Viva.Graph.svg('path')
                           .attr('stroke', '#333')
                           .attr('stroke-width', link.data.weight*max_fitness+min_fitness);
  jQuery(ui).hover(function() { // mouse over
                    
                }, function() { // mouse out
                    
                });
  return ui;  
}

function constructGraph() {
  var graph = Viva.Graph.graph();

  graph.addNode('anvaka', {
    url: 'foto.jpg',
    weight: 0.1,
    typeColor:'green'
  });
  graph.addNode('manunt', {
    url: 'foto.jpg',
    weight: 0.1,
    typeColor:'green'
  });
  graph.addNode('thlorenz', {
    url: 'foto.jpg',
    weight: 0.1,
    typeColor:'yellow'
  });
  graph.addNode('bling', {
    url: 'foto.jpg',
    weight: 1.0,
    typeColor:'yellow'
  });
  graph.addNode('diyan', {
    url: 'foto.jpg',
    weight: 0.4,
    typeColor:'blue'
  });
  graph.addNode('pocheptsov', {
    url: 'foto.jpg',
    weight: 0.9,
    typeColor:'green'
  });
  graph.addNode('dimapasko', {
    url: 'foto.jpg',
    weight: 0.2,
    typeColor:'blue'
  });
  graph.addNode('me', {
    url: 'foto.jpg',
    weight: 0.2,
    typeColor:'blue'
  });
  graph.addLink('anvaka', 'manunt',{ weight: 0.0001 });
  graph.addLink('anvaka', 'thlorenz',{ weight: 1 });
  graph.addLink('anvaka', 'bling',{ weight: 0.2 });
  graph.addLink('anvaka', 'diyan',{ weight: 0.3 });  
  graph.addLink('diyan', 'pocheptsov',{ weight: 0.6 });  
  graph.addLink('diyan', 'dimapasko',{ weight: 0.6 });
  graph.addLink('anvaka', 'pocheptsov',{ weight: 0.6 });
  graph.addLink('anvaka', 'dimapasko',{ weight: 0.6 });  
  graph.addLink('manunt', 'pocheptsov',{ weight: 0.6 });  
  graph.addLink('manunt', 'dimapasko',{ weight: 0.6 });
  graph.addLink('manunt', 'pocheptsov',{ weight: 0.6 });
  graph.addLink('pocheptsov', 'dimapasko',{ weight: 0.6 });  
  graph.addLink('pocheptsov', 'bling',{ weight: 0.2 });
  graph.addLink('pocheptsov', 'diyan',{ weight: 0.3 });  
  graph.addLink('pocheptsov', 'pocheptsov',{ weight: 0.6 });  
  graph.addLink('pocheptsov', 'dimapasko',{ weight: 0.6 });
  graph.addLink('bling', 'pocheptsov',{ weight: 0.6 });
  graph.addLink('bling', 'dimapasko',{ weight: 0.6 });  
  graph.addLink('manunt', 'bling',{ weight: 0.2 });
  graph.addLink('bling', 'diyan',{ weight: 0.3 });  
  graph.addLink('bling', 'pocheptsov',{ weight: 0.9 });  
  graph.addLink('bling', 'dimapasko',{ weight: 0.6 });
  return graph;
}
这是我的 HTML 文件 
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>VivaGraphs SVG circle images</title>
  <script src="../../../dist/vivagraph.js"></script>
  
  <script src="../../../dist/jquery.min.js"></script>
  <script src="index.js"></script>
  <style type='text/css'>
    svg,
    #graph-container {
      width:500px; height:400px;
      border:1px solid green;
      background-color: #CCC;
      position: absolute;
      overflow: hidden;
    }
  </style>
</head>

<body >
  <span id="par">nodo</span>
  <span id="arista">arista</span>
  <div id="graph-container"></div>
</body>

</html>

4

1 回答 1

0

你不能。我建议您通过增加阻力系数来自定义阻力系数，它会在容器内找到平衡。否则，您可以通过使其更接近零（从不低于零）来自定义弹簧系数。我建议你两者都做。祝你好运！

于 2019-10-15T07:02:39.703 回答