1

簡単な例で nvd3.js に取り組んでいます (ビュー ファインダー チャートのある行)。基本的な単一の html ページを使用する場合は機能させることができますが、カスタム angularjs ディレクティブ内で使用すると、 d3.v3.js へcall(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 ディレクティブです。コードは call(chart) で失敗します。

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