При вызове (диаграмма), как отлаживать Невозможно вызвать метод getPropertyValue со значением null

Работа с 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. Код не работает по вызову (диаграмма).

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

javascript angularjs d3.js angularjs-directive nvd3.js
person Ehvince    schedule 25.06.2013    source источник
comment
Похоже, вы пытаетесь добавить диаграмму к объекту SVGAnimatedString. Вам нужен групповой элемент или что-то в этом роде.   -  person Lars Kotthoff    schedule 25.06.2013
comment
Ммм ... Я изучу это, но выбор d3.select('#chart svg') из html тоже SVGAnimatedString.   -  person Ehvince    schedule 25.06.2013
comment
На самом деле структуры select немного отличаются. Тот, который использовался внутри директивы, имел внутри объект JQuery. Это привело меня к решению, которое я объясню через секунду.   -  person Ehvince    schedule 25.06.2013

Ответы (1)


arrow_upward
1
arrow_downward

Наконец-то я понял. Проблема возникла из-за использования element внутри директивы angular. Как объясняется в моей книге angular:

"element, переданный в link функции директивы, является обернутой ссылкой на собственный элемент DOM. […] _это элементы JQuery, с которыми вы уже работали. Если вам нужен прямой доступ к необработанному элементу DOM, вы можете получить его, доступ к первому элементу объекта с element[0]. "

Так что пришлось использовать element[0].

person Ehvince    schedule 25.06.2013