致電（圖表），如何調試「無法調用方法'getPropertyValue'爲null」

使用簡單示例（line with view finder chart）處理nvd3.js。當我使用基本的單個html頁面時，我可以使其工作，但是當我在自定義的angularjs指令中使用它時，它會在call(chart)上失敗，錯誤Uncaught TypeError: Cannot call method 'getPropertyValue' of null鏈接到d3.v3.js（第759行）。致電（圖表），如何調試「無法調用方法'getPropertyValue'爲null」

我無法發現代碼或變量值的差異。你能看到我在做什麼錯嗎？我該怎麼做才能進一步調查？

非常感謝。

工作的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（元素）和元素看起來像這樣：

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)); 
    };

來源

2013-06-25 Ehvince

它看起來像你試圖將圖表添加到'SVGAnimatedString'對象。你需要一個組元素或類似的東西。 –

嗯......我會研究它，但是從html中選擇'd3.select（'＃chart svg'）'也是'SVGAnimatedString'。 – Ehvince

其實，'select'結構略有不同。在指令中使用的那個裏面有一個JQuery對象。這讓我得到了解決方案，我將在第二個解釋。 – Ehvince

我終於明白了。這個問題是由於在角度指令中使用了element。正如在我的角度書中解釋：

「傳遞給該指令的link功能element是包裹參照本地DOM元素[...] _these是你已經在曾經工作JQuery的元素如果需要直接。訪問原始DOM元素，您可以通過element[0]訪問該對象的第一個元素來獲取它。「因此我不得不使用element[0]。

來源

2013-06-25 13:38:49 Ehvince

致電（圖表），如何調試「無法調用方法'getPropertyValue'爲null」

回答

相關問題