草庐IT

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

coder 2024-12-30 原文

我希望在单击输入字段中包含新值的提交按钮后，我的网络 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/

javascriptRefreshing34functionltangularjsd3.jsmodel-view-controllerangularjs-directive

有关javascript - 结合 angularJS 和 d3.js : Refreshing a plot after submitting new input parameters的更多相关文章

  1. ruby-on-rails - 结合 meta_search 与 acts_as_taggable_on - 2

    我在开发的Rails3网站的一些搜索功能上遇到了一个小问题。我有一个简单的Post模型，如下所示:classPost我正在使用acts_as_taggable_on来更轻松地向我的帖子添加标签。当我有一个标记为“rails”的帖子并执行以下操作时，一切正常:@posts=Post.tagged_with("rails")问题是，我还想搜索帖子的标题。当我有一篇标题为“Helloworld”并标记为“rails”的帖子时，我希望能够通过搜索“hello”或“rails”来找到这篇帖子。因此，我希望标题列的LIKE语句与acts_as_taggable_on提供的tagged_with方法

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. ruby-on-rails - 将 Amazon Simple Notification service SNS 与 ruby​​ 结合使用 - 2

    很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visitthehelpcenter.关闭9年前。我需要从基于ruby​​的应用程序使用AmazonSimpleNotificationService，但不知道从哪里开始。您对从哪里开始有什么建议吗？

  4. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  5. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  6. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  7. ruby-on-rails - 获取 ActionController::RoutingError(当尝试使用 AngularJS 将数据发布到 Rails 服务器时，没有路由匹配 [OPTIONS] "/users" - 2

    尝试从我的AngularJS端将数据发布到Rails服务器时出现问题。服务器错误:ActionController::RoutingError(Noroutematches[OPTIONS]"/users"):actionpack(4.1.9)lib/action_dispatch/middleware/debug_exceptions.rb:21:in`call'actionpack(4.1.9)lib/action_dispatch/middleware/show_exceptions.rb:30:in`call'railties(4.1.9)lib/rails/rack/logg

  8. node.js - 如何在 Travis CI 上的一个项目中运行 Node.js 和 Ruby 测试 - 2

    我有一个包含多个组件的存储库，其中大部分是用JavaScript(Node.js)编写的，一个是用Ruby(RubyonRails)编写的。我想要一个.travis.yml文件来触发一个运行每个组件的所有测试的构建。根据thisTravisCIGoogleGroupthread，目前还没有官方支持。我的目录结构是这样的:.├──构建服务器├──核心├──扩展├──网络应用├──流浪文件├──package.json├──.travis.yml└──生成文件我希望能够运行特定版本的Ruby(2.2.2)和Node.js(0.12.2)。我已经有了一个make目标，所以maketest在每

  9. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  10. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

随机推荐