Question

注意：我只是大大简化了程序并将其留给了最基本的东西......

所以我想在sigma.js图表中添加图表。首先，让我发布javascript（sigmaAngualr.js）...

app = angular.module('sigmaAngular', []);

app.controller('NetworkDataCtrl', function($scope){

    var i, s; 

    $scope.newName = null;
    $scope.s = null;
    $scope.N = 3; 

    $scope.newNode = function (id, label){
        return {id: id,
                label: label,
                x: Math.random(),
                y: Math.random(),
                size: Math.random()+0.2,
                color:'#333'}
    };

    $scope.addNodeGraph = function(id, label){
        $scope.s.graph.addNode($scope.newNode(id, label));
        console.log(id+'-'+label);
    };

    $scope.tempNodes = [];
    for( i=0; i<$scope.N; i++ ) 
        $scope.tempNodes.push($scope.newNode('id'+i, 'Node'+i));

    $scope.s = new sigma({graph:{nodes:$scope.tempNodes, edges:[]}})

});

app.directive('showGraph', function(){

    // Create a link function
    function linkFunction(scope, element, attrs){
        scope.s.addRenderer({container: element[0]})
    };

    return {
        scope: false,
        link: linkFunction
    }
});

这是HTML ...

<!DOCTYPE html>
<html>
<head>
    <title>Using AngularJS</title>
    <script type="text/javascript" src='lib/sigma/sigma.min.js'></script>
    <script type="text/javascript" src='lib/angular/angular.min.js'></script>
    <script type="text/javascript" src='lib/sigmaAngular.js'></script>
    <link rel="stylesheet" type="text/css" href="main.css">

</head>
<body ng-app='sigmaAngular'>

    <div>
        <div ng-controller='NetworkDataCtrl'>
            <input type='text' ng-model='newName' />
            <button ng-click='addNodeGraph(newName,newName)'> Add Node </button>
            <hr>
            <div show-graph id='graph-container' s='s' tempNodes='tempNodes'>
            </div>
            <hr>
        </div>
    </div>

</body>
</html>

当然，我无法在图表中添加节点。

在添加节点时，我还尝试了另一种创建整个图形的选项。这也不起作用。（这不再是真的）

让我试着解释一下。现在，

当我刷新浏览器时，我没有看到图表。
当我调整浏览器窗口大小时图形突然出现。
当我输入随机名称并点击Add Node按钮时，图表不会改变。
当我调整浏览器窗口大小时，图形会更改以显示新节点。

总而言之，我必须调整浏览器窗口的大小以查看图表中的任何更改。

只是旁注：css如下：

#graph-container {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid indianred;
}

我觉得我现在非常接近解决这个问题。离某个地方只有一点......

任何帮助将不胜感激!!!

在angularjs

0 个答案: