Javascript 如何在Angular中的自定义指令内设置d3图表？_Javascript_Angularjs_D3.js

Javascript 如何在Angular中的自定义指令内设置d3图表？

javascript angularjs d3.js

Javascript 如何在Angular中的自定义指令内设置d3图表？,javascript,angularjs,d3.js,Javascript,Angularjs,D3.js,我一直在关注一些关于如何在角度应用程序中实现d3图表的演练。基本上，我试图在我的自定义角度指令（“workHistory”）中实现以下内容。出于这个问题的目的，我遵循一个简单的条形图，我将其设置为： index.html <!doctype html> <html lang="en" ng-app="webApp"> <head> <meta charset="utf-8"> <title&g

我一直在关注一些关于如何在角度应用程序中实现d3图表的演练。基本上，我试图在我的自定义角度指令（“workHistory”）中实现以下内容。出于这个问题的目的，我遵循一个简单的条形图，我将其设置为：

index.html

<!doctype html>
    <html lang="en" ng-app="webApp">
    <head>
        <meta charset="utf-8">

        <title>My Portfolio</title>

        <!--Stylesheets -->
        <link rel="stylesheet" href="styles/main.css"/>
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
        <!--Libraries -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
        <script src="bower_components/jquery/dist/jquery.min.js"></script>
        <script src="bower_components/angular-route/angular-route.min.js"></script>
        <script src="bower_components/angular-loader/angular-loader.min.js"></script>
        <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="bower_components/d3/d3.min.js"></script>
        <!--Module -->
        <script src="scripts/modules/module.js"></script>
        <script src="scripts/modules/d3.module.js"></script>
        <!--Controllers -->
        <script src="scripts/controllers/mainHeroController.js"></script>
        <script src="scripts/controllers/workHistoryController.js"></script>
        <!--Directives-->
        <script src="scripts/directives/mainHero.directive.js"></script>
        <script src="scripts/directives/mainNavbar.directive.js"></script>
        <script src="scripts/directives/workHistory.directive.js"></script>
    </head>

     <!--Main Landing Page-->    
    <body ng-app="webApp">
        <div id="container1"> 
            <work-history chart-data="myData"></work-history>
        </div>
        <div id="container2">
            Container 2
        </div>
    </body>
    </html>

问题： 使用此代码时，不会显示任何内容。我得到以下错误：

angular.js:13920TypeError: chart.append（…）.attr（…）.selectAll（…）.data（…）.enter不是作用

有人能帮我理解如何正确设置这个吗？（另外，如果有人能解释我如何将可折叠树d3图表配置为自定义指令，则会有好处

谢谢。

您的代码中有几个错误：

你的模板不好：你制作了一个svg，但是你在里面插入了标准的html标记。它不可能工作。在这种情况下，你应该制作一个带有div标记作为根节点的模板

如果您想像这样提供初始模板，那么应该通过将指令的replace属性设置为true，使其成为根节点

然后，如果希望d3中添加的div可见，则应通过设置背景或带有“.style（'background'，'blue'）的边框使其可见

我不明白您可以在控制器“WorkHistoryController”中做什么。根据我的说法，在这样的指令中，您应该避免同时提供链接和控制器

最后，如果您希望整个think始终工作，那么应该将D3代码放入$watch中，这样您就可以确保一旦在作用域上设置了数据，就会触发生成

作为补充，现在您总是在观察数组，如果数组比以前小，它应该处理删除不必要的元素：“.exit（）.remove（）；”

指令应如下所示：

angular
    .module('app', [])
    .directive('workHistory', workHistory);

function workHistory()
{
    var directive = 
        {
          restrict: 'EA',
          scope: {data: '=chartData'},
          replace:true,
          template: "<div style='width:100%'></div>",
          link: workHistoryLink,
        };

    return directive;
}

function workHistoryLink(scope, element)
{
  scope.$watch('data', function(){
    var chart = d3.select(element[0]);
    chart.append("div").attr("class", "chart")
      .selectAll('div')
      .data(scope.data).enter().append("div")
      .style('background', 'blue')
      .transition().ease("elastic")
      .style("width", function(d) { return d + "%"; })
      .text(function(d) { return d + "%"; })
      .exit().remove();
  }, true);
}

angular
.module（'应用程序'，[]）
.指令（“工作历史”，工作历史）；
函数workHistory（）
{
var指令=
{
限制：“EA”，
作用域：{data:'=chartData'}，
替换：正确，
模板：“”，
链接：workHistoryLink，
};
返回指令；
}
函数workHistoryLink（范围、元素）
{
作用域：$watch（'data'，function（）{
var图表=d3.选择（元素[0]）；
图表。附加（“div”）.attr（“类”、“图表”）
.selectAll（'div'））
.data（scope.data）.enter（）.append（“div”）
.style（'背景'，'蓝色'）
.transition（）.ease（“弹性”）
.style（“宽度”，函数（d）{返回d+“%”；}）
.text（函数（d）{返回d+“%”；}）
.exit（）.remove（）；
}，对）；
}

下面是一个jsbin来说明我的观点：

希望这对您有所帮助

这里是使用nvd3指令使用D3js的另一种方法

在控制器中设置选项和数据

访问此网站，您可以找到示例

应该已经工作了，你能提供一把工作小提琴吗..在你的指令中创建了一个带有可折叠树的plunker（），也许它能帮上忙

.axis path,
.axis line{
  fill: none;
  stroke:black;
  shape-rendering:crispEdge;
}

.axis text{
  font-family: sans-serif;
  font-size: 10px;
}

h1{
  font-family: sans-serif;
  font-weight: bold;
  font-size: 16px;
}
.tick
{
  stroke-dasharray: 1, 2;
}

angular
    .module('app', [])
    .directive('workHistory', workHistory);

function workHistory()
{
    var directive = 
        {
          restrict: 'EA',
          scope: {data: '=chartData'},
          replace:true,
          template: "<div style='width:100%'></div>",
          link: workHistoryLink,
        };

    return directive;
}

function workHistoryLink(scope, element)
{
  scope.$watch('data', function(){
    var chart = d3.select(element[0]);
    chart.append("div").attr("class", "chart")
      .selectAll('div')
      .data(scope.data).enter().append("div")
      .style('background', 'blue')
      .transition().ease("elastic")
      .style("width", function(d) { return d + "%"; })
      .text(function(d) { return d + "%"; })
      .exit().remove();
  }, true);
}

<nvd3 options="options" data="data"></nvd3>