1

使用一个简单的示例（带取景器图表的行）处理 nvd3.js。当我使用基本的单个 html 页面时，我可以让它工作，但是当我在自定义 angularjs 指令中使用它时，它会因为链接到 d3.v3.jscall(chart)的错误Uncaught TypeError: Cannot call method 'getPropertyValue' of null（第 759 行）而失败。

我无法发现代码或变量值的差异。你能看出我在哪里做错了吗？我应该怎么做才能进一步调查？

非常感谢。

工作 html: (这是对 d3.json 的调用中的复制/粘贴)

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <script src="novus-nvd3-e2dd47b/lib/d3.v3.js"></script>
<script src="novus-nvd3-e2dd47b/nv.d3.js" type="text/javascript">
<script src="novus-nvd3-e2dd47b/src/nv.d3.css" type="text/css">    
 <link href="novus-nvd3-e2dd47b/src/nv.d3.css" rel="stylesheet" type="text/css">    
    <script src="novus-nvd3-e2dd47b/src/nv.d3.js"></script>    
  </head>

<style>

body {
  overflow-y:scroll;
}    
text {
  font: 12px sans-serif;
} 
#chart svg {
  height: 500px;
  margin: 10px;
  min-width: 100px;
  min-height: 100px;

}
</style>
<body>

  <div id="chart">
    <svg> </svg>
  </div>  

<script src="novus-nvd3-e2dd47b/lib/d3.v3.js"></script>
<script src="novus-nvd3-e2dd47b/nv.d3.js"></script>
<script src="novus-nvd3-e2dd47b/src/utils.js"></script>
<script src="novus-nvd3-e2dd47b/src/tooltip.js"></script>
<script src="novus-nvd3-e2dd47b/src/models/legend.js"></script>
<script src="novus-nvd3-e2dd47b/src/models/axis.js"></script>
<script src="novus-nvd3-e2dd47b/src/models/scatter.js"></script>
<script src="novus-nvd3-e2dd47b/src/models/line.js"></script>
<script src="novus-nvd3-e2dd47b/src/models/historicalBar.js"></script>
<script src="novus-nvd3-e2dd47b/src/models/linePlusBarWithFocusChart.js"></script>
<script>
var testdata = d3.json("myjson.json", function(error, myjson) {
       nv.addGraph(function() {
         var chart = nv.models.lineWithFocusChart();

         chart.xAxis
             .tickFormat(d3.format('f'));

         chart.yAxis
             .tickFormat(d3.format(',.2f'));

         chart.y2Axis
             .tickFormat(d3.format(',.2f'));
         console.log('select:', d3.select('#chart svg'));
         d3.select('#chart svg')
             .datum(myjson)
           .transition().duration(500)
             .call(chart);

         nv.utils.windowResize(chart.update);

         return chart;
       });


});//end callback

</script>

这是我的自定义角度指令。代码在调用（图表）时失败。

angular.module('app').directive 'lineChart',
['$log', ($log) ->
    restrict: 'AE'
    replace: true
    scope: { data: '=data' }
    link: (scope, element, attrs) ->
        testdata = d3.json(scope.data, (error, json_data) ->
            nv.addGraph( () ->
                chart = nv.models.lineWithFocusChart()
                chart.xAxis
                    .tickFormat(d3.format('f'))

                chart.yAxis
                    .tickFormat(d3.format(',.2f'))

                chart.y2Axis
                    .tickFormat(d3.format(',.2f'))

                d3.select(element)
                    .datum(json_data)
                    .transition().duration(500)
                    .call(chart)

                nv.utils.windowResize(chart.update)
                return chart
                )
            )    

]

svg我从模板中的 html 元素调用我的指令，如下所示：

 div(ng-controller='metricsController')
     svg(line-chart, data='json_file')

一些值：d3.select(element) 和 element 如下所示：

select: 
[Array[1], select: function, selectAll: function, attr: function, classed: function, style: function…]
 lineChart.js:21
element: 
[svg.[object SVGAnimatedString], context: svg.[object SVGAnimatedString], jquery: "2.0.2", constructor: function, init: function, selector: ""…]

在 d3.v3.js 的这个函数中引发了异常：

  d3_selectionPrototype.style = function(name, value, priority) {
    var n = arguments.length;
    if (n < 3) {
      if (typeof name !== "string") {
        if (n < 2) value = "";
        for (priority in name) this.each(d3_selection_style(priority, name[priority], value));
        return this;
      }
      if (n < 2) return d3_window.getComputedStyle(this.node(), null).getPropertyValue(name);
Uncaught TypeError: Cannot call method 'getPropertyValue' of null
      priority = "";
    }
    return this.each(d3_selection_style(name, value, priority));
  };
4

1 回答 1

1

我终于明白了。问题是由于使用了element内部角度指令。正如我的角度书中所解释的：

“element传递给指令link函数的是对本机 DOM 元素的包装引用。[…]_这些是您已经习惯使用的 JQuery 元素。如果您需要直接访问原始 DOM 元素，您可以通过访问对象的第一个元素带有element[0]."

所以我不得不使用element[0].

于 2013-06-25T13:38:49.543 回答