个人中心
gpt4 book ai didi

javascript - 如何从嵌入式 D3 脚本中访问 Angular Controller 范围

转载 作者：行者123 更新时间：2023-11-28 01:16:40 27 4
gpt4 key购买 nike

我有一个 SVG map ，它是通过嵌入 HTML 文档中的 D3 进行渲染的。我知道这不是这样做的方法。无论如何，我希望当单击 map 中的国家/地区时，我的 Angular Controller 会收到警报。我可以访问这些数据，并且可以在单击时控制台记录与给定国家/地区相关的所有信息，但我还没有弄清楚如何从 D3 脚本中访问 Controller 范围。有什么想法吗？

HTML 文件，如果有帮助的话:

<html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="../styles/style.css">
  <script src="js/d3.min.js"></script>
  <script src="js/topojson.v1.min.js"></script>
</head>
<body ng-app='myApp'>

  <div class="main" ng-controller="mainController">

    <div countryClick="selectCountry()" id="container" ng-controller="mainController">  

    <script type='text/javascript'>


    var dom_el = document.querySelector('[ng-controller="mainController"]');
    var ng_el = angular.element(dom_el);
    var ng_el_scope = ng_el.scope();
    var things = ng_el_scope.things;

    // d3.select(window).on("resize", throttle);

    var zoom = d3.behavior.zoom()
        .scaleExtent([1, 9]);
        // .on("zoom", move); // Disables user move and zoom without breaking everything


    var width = document.getElementById('container').offsetWidth;
    var height = width / 2.5; //Originally 2

    var topo,projection,path,svg,g;

    var graticule = d3.geo.graticule();

    var tooltip = d3.select("#container").append("div").attr("class", "tooltip hidden");

    setup(width,height);
    // debugger;

    function setup(width,height){
      // debugger;
      projection = d3.geo.mercator()
        .translate([(width/2), (height/2)])
        .scale( width / 2 / Math.PI);

      path = d3.geo.path().projection(projection);

      svg = d3.select("#container").append("svg")
          .attr("width", width)
          .attr("height", height)
          .call(zoom)
          .on("click", click)
          .append("g");

      g = svg.append("g");

    }

    d3.json("data/world-topo-min.json", function(error, world) {

      var countries = topojson.feature(world, world.objects.countries).features;

      topo = countries;
      draw(topo);

    });

    function draw(topo) {

      // Draws equator
      g.append("path")
       .datum({type: "LineString", coordinates: [[-180, 0], [-90, 0], [0, 0], [90, 0], [180, 0]]})
       .attr("class", "equator")
       .attr("d", path);


      var country = g.selectAll(".country").data(topo);

      country.enter().insert("path")
          .attr("class", "country")
          .attr("d", path)
          .attr("id", function(d,i) { return d.id; })
          .attr("title", function(d,i) { return d.properties.name; })
          .style("fill", "#F8F8F8")
          .style("stroke", "gray")

      //offsets for tooltips
      var offsetL = document.getElementById('container').offsetLeft+20;
      var offsetT = document.getElementById('container').offsetTop+10;

      //tooltips
      country
        .on("mousemove", function(d,i) {
          console.log('mousemove',d);

          var mouse = d3.mouse(svg.node()).map( function(d) { return parseInt(d); } );

          tooltip.classed("hidden", false)
                 .attr("style", "left:"+(mouse[0]+offsetL)+"px;top:"+(mouse[1]+offsetT)+"px")
                 .html(d.properties.name);

          })
          .on("mouseout",  function(d,i) {
            tooltip.classed("hidden", true);
          })

        .on("click", function (d,i) {

        //THIS IS WHERE I WANT TO REGISTER THE CLICK WITH MY ANGULAR CONTROLLER
        console.log(d.properties.name);  //Logs country name  

        });  

    }


    function redraw() {
      width = document.getElementById('container').offsetWidth;
      height = width / 2;
      d3.select('svg').remove();
      setup(width,height);
      draw(topo);
    }


    function move() {

      var t = d3.event.translate;
      var s = d3.event.scale; 
      zscale = s;
      var h = height/4;

      console.log('moving with t: ' + t + ' ,s: ,' + s + ' and h: ' + h);

      t[0] = Math.min(
        (width/height)  * (s - 1), 
        Math.max( width * (1 - s), t[0] )
      );

      t[1] = Math.min(
        h * (s - 1) + h * s, 
        Math.max(height  * (1 - s) - h * s, t[1])
      );

      zoom.translate(t);
      g.attr("transform", "translate(" + t + ")scale(" + s + ")");


      //Removed this because it screws things up when there is an initial stroke set on countries:
      //adjust the country hover stroke width based on zoom level
      // d3.selectAll(".country").style("stroke-width", 1.5 / s);

    }



    var throttleTimer;
    function throttle() {
      window.clearTimeout(throttleTimer);
        throttleTimer = window.setTimeout(function() {
          redraw();
        }, 200);
    }


    //geo translation on mouse click in map
    function click() {
      var latlon = projection.invert(d3.mouse(this));
      console.log(latlon);
    }


    //function to add points and text to the map (used in plotting capitals)
    function addpoint(lat,lon,text) {

      var gpoint = g.append("g").attr("class", "gpoint");
      var x = projection([lat,lon])[0];
      var y = projection([lat,lon])[1];

      gpoint.append("svg:circle")
            .attr("cx", x)
            .attr("cy", y)
            .attr("class","point")
            .attr("r", 1.5);

      //conditional in case a point has no associated text
      if(text.length>0){

        gpoint.append("text")
              .attr("x", x+2)
              .attr("y", y+2)
              .attr("class","text")
              .text(text);
      }

    }

  </script>
  </div>
</div>

  <script src='../../bower_components/angular/angular.js'></script>
  <script src='../../bower_components/angular-ui-router/release/angular-ui-router.js'></script>
  <script src='../js/app.js'></script>

</body>

</html>

最佳答案

我按照本教程将我的 d3 代码集成到 Angular Directive(指令)中:http://www.ng-newsletter.com/posts/d3-on-angular.html

大约需要 15 分钟，从长远来看，这将使您的 d3/Angular 集成变得更加容易。

如果您没有 15 分钟时间，可以尝试以下操作:AngularJS. How to call controller function from outside of controller component

关于javascript - 如何从嵌入式 D3 脚本中访问 Angular Controller 范围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23753742/

27 4 0
文章推荐： javascript - 使用 Jquery 将保存的变量数据添加到编辑表单
文章推荐： javascript - 用于从 Google Chrome 中提取的页面加载
文章推荐： javascript - ubuntu 14.04 上使用 ember.js 的 ruby​​ on Rails 应用程序
文章推荐： c++ - 创建一个循环，将输出所有大于零且小于 60(不包括 60)的 5 的倍数
行者123
个人简介

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

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