个人中心
gpt4 book ai didi

javascript - 结合 angularJS 和 d3.js : Refreshing a plot after submitting new input parameters

转载 作者：数据小太阳 更新时间：2023-10-29 05:24:49 28 4
gpt4 key购买 nike

我希望在单击输入字段中包含新值的提交按钮后，我的网络 d3.js 绘图将根据生成的新图进行更新通过新输入值。在下面，您可以找到我的示例代码:

GenerateGraph.js 该文件包含一系列函数，可根据提交 输入值。然后需要在浏览器中刷新图形。 

function degree(node,list){
  var deg=new Array();
  for (var i=0; i<node.length; i++){
    var count=0;
    for (var j=0; j<list.length; j++){
        if (node[i]==list[j][0] || node[i]==list[j][1]){
          count++;
        }
    }
    deg.push(count);
  }
  return deg;
}
function randomGraph (n, m) { //creates a random graph on n nodes and m links
  var graph={};
  var nodes = d3.range(n).map(Object),
      list  = randomChoose(unorderedPairs(d3.range(n)), m),
      links = list.map(function (a) { return {source: a[0], target: a[1]} });
  graph={
  Node:nodes,
  ListEdges:list,
  Links:links
  }
  return graph;
}

function randomChoose (s, k) { // returns a random k element subset of s
  var a = [], i = -1, j;
  while (++i < k) {
    j = Math.floor(Math.random() * s.length);
    a.push(s.splice(j, 1)[0]);
  };
  return a;
}

function unorderedPairs (s) { // returns the list of all unordered pairs from s
  var i = -1, a = [], j;
  while (++i < s.length) {
    j = i;
    while (++j < s.length) a.push([s[i],s[j]])
  };
  return a;
}

network.html

!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">     
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
     <title>graph</title>

     <script src='http://d3js.org/d3.v3.min.js'></script>     
     <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body ng-app="myApp">
     <script src="GenerateGraph.js" type="text/javascript"></script>
     <script src="svgGraph.js" type="text/javascript"></script>
     <h1 class="title">Simulating a network</h1>
     <div id="outer" ng-controller="MainCtrl" class="col-md-6">
        <network-inputs inputs="networkInputs" submit="submit(inputs)"></network-inputs>
     </div> 
    <!--test -->
     <script type="text/javascript">

        //get the input parameters for plotting
         angular.module("myApp", [])

         .directive('networkInputs', function() {

         return {
                restrict: 'E',                
                scope: {
                   inputs: '<',
                   submit: '&'
                },
                link : link,               
                template: 
              '<h3 >Initialise new parameters to generate a network </h3>'+
                    '<form ng-submit="submit({inputs: inputs})" class="form-inline">'+
                      '<div class="form-group">'+
                         '<label>Number of nodes</label>'+
                         '<input type="number" min="10" class="form-control" ng-model="inputs.N" ng-required="true">'+
                      '</div>'+
                      '<div class="form-group">'+
                         '<label>Number of links</label>'+
                          '<input type="number" min="0.1" class="form-control" ng-model="inputs.m" ng-required="true">'+
                      '</div>'+
                      '<button style="color:black; margin: 1rem 4rem;" type="submit">Generate</button>' +
                   '</form>'};
         })
         .factory("initialiseNetwork",function(){
            var data = {
                            N: 20,
                            m: 50,

                       };

            return {
                networkInputs:data
            };      

         })

         .controller("MainCtrl",  ['$scope','initialiseNetwork' ,function($scope,initialiseNetwork) {

               $scope.networkInputs={};
               $scope.mySVG=function(){
                         var graph=randomGraph($scope.networkInputs.N, $scope.networkInputs.m);

                };

               function init(){
                  $scope.networkInputs=initialiseNetwork.networkInputs;
                   //Run the function which generates the graph and plot it 

               }
               init();

               $scope.submit = function(inputs) {

                   var dataObject = {
                       N: inputs.N,
                       m: inputs.m
                   };
                   //lets simply log them but you can plot or smth other 
                   console.log($scope.networkInputs); 

               }

         }]);

    </script>
</body>

</html>

svgGraph.js

function link(scope,element, attrs){
    //SVG size
    var width = 1800,
    height = 1100;

    // We only need to specify the dimensions for this container.

    var vis = d3.select(element[0]).append('svg')
              .attr('width', width)
              .attr('height', height);
    var force = d3.layout.force()
                      .gravity(.05)
                      .distance(100)
                      .charge(-100)
                      .size([width, height]);
        // Extract the nodes and links from the data.
     scope.$watch('val',function(newVal,oldVal){
                   vis.selectAll('*').remove();
                   if (!newVal){
                       return;
                   }

        var Glinks = newVal.links;
        var W=degree(newVal.nodes,newVal.list);

        var Gnodes = [];
        var obj=newVal.nodes;
        Object.keys(obj).forEach(function(key) {
           Gnodes.push({"name":key, "count":W[key]});
        });

        //Creates the graph data structure 
        force.nodes(Gnodes)
             .links(Glinks)
             .linkDistance(function(d) { 
              return(0.1*Glinks.length); 
             })//link length
             .start();
         //Create all the line svgs but without locations yet
        var link = vis.selectAll(".link")
           .data(Glinks)
           .enter().append("line")
           .attr("class", "link")
           .style("stroke-width","0.3px");

        //Do the same with the circles for the nodes - no 
        var node = vis.selectAll(".node")
            .data(Gnodes)
            .enter().append("g")
            .attr("class", "node")
            .call(force.drag);
        node.append("circle")
             .attr("r", function(d){
              return d.count*0.5;   
            })
            .style("opacity", .3)
            .style("fill", "red");
        //add degree of node as text 
        node.append("text")
            .attr("text-anchor", "middle")
            .text(function(d) { return d.count })
            .attr("font-family",'Raleway',"Tangerine");
        //Now we are giving the SVGs co-ordinates - the force layout is generating the co-ordinates which this code is using to update the attributes of the SVG elements
        force.on("tick", function () {
             link.attr("x1", function (d) {
                 return d.source.x;
                 })
                 .attr("y1", function (d) {
                 return d.source.y;
                 })
                 .attr("x2", function (d) {
                 return d.target.x;
                 })
                 .attr("y2", function (d) {
                 return d.target.y;
                 });

              node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
        });      
    });
}

plunker 中的链接是 here .

最佳答案

1 - 在指令中，您观察 val，它在 Controller 中是 $scope.data，所以我想您需要为每个提交的表单使用它？然后只需将数据分配给 $scope.data 每次提交:

$scope.submit = function(inputs) {
    var dataObject = {
      N: inputs.N,
      m: inputs.m
    };
    $scope.data = randomGraph(dataObject.N, dataObject.m);
}

2 - 然后，在 sgvGraph.js 中，在 scope.watch 中，您使用 var newVal.nodes 和 newVal.list anf newVal.link 它们都是未定义的，因为您使用 {Node:.., Links: ..., ListEdges:...

3 - 应该在表单中添加 novalidate 并手动管理错误，因为我不能用 min="0.1"提交 chrome

这是工作插件:http://embed.plnkr.co/PbynuNCPM4Jv4lPmK8eW/

关于javascript - 结合 angularJS 和 d3.js : Refreshing a plot after submitting new input parameters，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44828689/

28 4 0
文章推荐： javascript - 如何使用 Firebase Cloud Functions 在 DataSnapshot 中查找特定值
文章推荐： swift - 关于 RxSwift 中 flatMapLatest 的困惑
文章推荐： swift - Xcode 8 (Swift) 控制台中没有打印输出
文章推荐： javascript - create-react-app with node express 获取 %PUBLIC_URL%
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com