为什么我不能在这个 D3 上画一条线.js使用角度代码

Why can't I draw a line on this D3.js using angular code?

本文关键字：js 代码 一条 不能 D3 为什么      更新时间：2023-09-26

我正在尝试在我的网页上使用 D3.js 的 Javascript 图形库绘制图形。我可以使用 HTML 在 SVG 上画一条线。但是当我尝试使用javascript画一条线时，我得到：ReferenceError: d3 is not defined

即使我已经包含了 D3.js 文件，我也得到了这个。

请告诉我如何解决这个问题。

这是Plunker：https://plnkr.co/edit/pdDCfYmCQxX56sBfjfzW?p=preview

以下是我的文件供您参考。

Javascript： 

myApp = angular.module('myApp', ['ui.router'] );
myApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider.state('myState', {url: '/myState', params: {slug: {value: null, squash: true} }, templateUrl: 'my-state-page1.html', controller: 'MyStateCtrl'} );
  } 
);
myApp.controller('MyStateCtrl', function($scope, $http) {
      var self = this;
      $scope.$watch(function() {return self.myDataFromAPI}, function (objVal) {
          console.log('objVal = ', objVal);
          x = objVal.origin.split('.');
          console.log("X = ", x)
          var svgContainer = d3.select("body") .append("svg") .attr("width", 1000) .attr("height", 1000); 
          var line = svgContainer.append("line") .attr("x1", x[0]) .attr("y1", x[1]) .attr("x2", x[2]) .attr("y2", x[3]) .attr("stroke-width", 2) .attr("stroke", "black");
        },
        true
      );

      self.httpFailure = function(response) {
        console.log('Failure');
        self.myDataFromAPI = null;
      }
      self.httpSuccess = function(response) {
        console.log(''n'n'nGot the data from the API!');
        self.myDataFromAPI = response.data;
        console.log(''n'n'self.myDataFromAPI =', self.myDataFromAPI);
      }
      $http.get(
        'https://httpbin.org/get'
      ).then(self.httpSuccess, self.httpFailure);
    }
);

myApp.directive('mypMyDirective',function(){
    return {
      restrict:'E',
      scope: {
        myDataFromAPI: '='
      },
      controller: 'MyStateCtrl',
      controllerAs: 'myStateCtrl',
      bindToController: true,
      templateUrl: 'myD3Diagram.html'
    };
  }
);

索引.html：

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    HELLO!
    <div ng-controller="MyStateCtrl as myStateCtrl">
      <myp-my-directive mydatafromapi="myStateCtrl.myDataFromAPI"></myp-my-directive>
    </div>
  </body>
</html>

myD3图.html：

<svg id="my_svg_widget" width="500" height="500">
  <line x1="5" y1="5" x2="40" y2="40" stroke="gray" stroke-width="5"  />
</svg>

问题是您正在访问非https库。

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

它应该是

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>

在这里工作

相关文章：