Question

使用简单示例（line with view finder chart）处理nvd3.js。当我使用基本的单个html页面时，我可以使它工作，但是当我在自定义angularjs指令中使用它时，它将在call(chart)上失败，错误Uncaught TypeError: Cannot call method 'getPropertyValue' of null链接到d3.v3.js（第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));
  };

Answer 1

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

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

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

在通话（图表），如何调试“无法调用方法'getPropertyValue'的null”

1 个答案: