Как нарисовать линейную диаграмму d3.js, используя директивы angularjs

Question

Как использовать угловые директивы для загрузки графа d3.js, используя данные json области, вместо использования файла graph.html. Я ссылался на этот url url. Но не смог сделать это для линейной диаграммы.

Может кто-нибудь, пожалуйста, помогите мне по этому вопросу ...

Мой graph.html:

function getDate(d) { 
var dt = new Date(d.date); 
dt.setHours(0); 
dt.setMinutes(0); 
dt.setSeconds(0); 
dt.setMilliseconds(0); 
return dt; 
} 

function showData(obj, d) { 
var coord = d3.mouse(obj); 
var infobox = d3.select(".infobox"); 
// now we just position the infobox roughly where our mouse is 
infobox.style("left", (coord[0] + 100) + "px"); 
infobox.style("top", (coord[1] - 175) + "px"); 
$(".infobox").html(d); 
$(".infobox").show(); 
} 

function hideData() { 
$(".infobox").hide(); 
} 

var drawChart = function(data) { 
// define dimensions of graph 
var m = [10, 20, 10, 50]; // margins 
var w = 250 - m[1] - m[3]; // width 
var h = 100 - m[0] - m[2]; // height 

data.sort(function(a, b) { 
var d1 = getDate(a); 
var d2 = getDate(b); 
if (d1 == d2) return 0; 
if (d1 > d2) return 1; 
return -1; 
}); 


var minDate = getDate(data[0]), 
maxDate = getDate(data[data.length-1]); 

var x = d3.time.scale().domain([minDate, maxDate]).range([0, w]); 


var y = d3.scale.linear().domain([0, d3.max(data, function(d) { return d.trendingValue; })]).range([h, 0]); 


var line = d3.svg.line() 

.x(function(d, i) { 

return x(getDate(d)); //x(i); 
}) 
.y(function(d) { 

return y(d.trendingValue); 
}); 

function xx(e) { return x(getDate(e)); }; 
function yy(e) { return y(e.trendingValue); }; 



var graph = d3.select("#chart").append("svg:svg") 
.attr("width", w + m[1] + m[3]) 
.attr("height", h + m[0] + m[2]) 
.append("svg:g") 
.attr("transform", "translate(" + m[3] + "," + m[0] + ")"); 


var xAxis = d3.svg.axis().scale(x).ticks(d3.time.months, 1).tickSize(-h).tickSubdivide(true); 

var yAxisLeft = d3.svg.axis().scale(y).ticks(10).orient("left"); //.tickFormat(formalLabel); 

graph 
.selectAll("circle") 
.data(data) 
.enter().append("circle") 
.attr("fill", "steelblue") 
.attr("r", 5) 
.attr("cx", xx) 
.attr("cy", yy) 
.on("mouseover", function(d) { showData(this, d.trendingValue);}) 
.on("mouseout", function(){ hideData();}); 

graph.append("svg:path").attr("d", line(data)); 



$("#chart").append("<div class='infobox' style='display:none;'>Test</div>"); 
} 

Моя директива: (который я пытался, но не смог нарисовать график)

angular.module('chart').directive('crD3Bars', [ 
    function() { 
    return { 
     restrict: 'E', 
     scope: { 
     data: '=' 
     }, 
     link: function (scope, element) { 
     function getDate(d) { 
var dt = new Date(d.date); 
dt.setHours(0); 
dt.setMinutes(0); 
dt.setSeconds(0); 
dt.setMilliseconds(0); 
return dt; 
} 

function showData(obj, d) { 
var coord = d3.mouse(obj); 
var infobox = d3.select(".infobox"); 
// now we just position the infobox roughly where our mouse is 
infobox.style("left", (coord[0] + 100) + "px"); 
infobox.style("top", (coord[1] - 175) + "px"); 
$(".infobox").html(d); 
$(".infobox").show(); 
} 

function hideData() { 
$(".infobox").hide(); 
} 

var drawChart = function(data) { 
// define dimensions of graph 
var m = [10, 20, 10, 50]; // margins 
var w = 250 - m[1] - m[3]; // width 
var h = 100 - m[0] - m[2]; // height 

data.sort(function(a, b) { 
var d1 = getDate(a); 
var d2 = getDate(b); 
if (d1 == d2) return 0; 
if (d1 > d2) return 1; 
return -1; 
}); 


var minDate = getDate(data[0]), 
maxDate = getDate(data[data.length-1]); 

var x = d3.time.scale().domain([minDate, maxDate]).range([0, w]); 


var y = d3.scale.linear().domain([0, d3.max(data, function(d) { return d.trendingValue; })]).range([h, 0]); 


var line = d3.svg.line() 

.x(function(d, i) { 

return x(getDate(d)); //x(i); 
}) 
.y(function(d) { 

return y(d.trendingValue); 
}); 

function xx(e) { return x(getDate(e)); }; 
function yy(e) { return y(e.trendingValue); }; 



var graph = d3.select("#chart").append("svg:svg") 
.attr("width", w + m[1] + m[3]) 
.attr("height", h + m[0] + m[2]) 
.append("svg:g") 
.attr("transform", "translate(" + m[3] + "," + m[0] + ")"); 


var xAxis = d3.svg.axis().scale(x).ticks(d3.time.months, 1).tickSize(-h).tickSubdivide(true); 

var yAxisLeft = d3.svg.axis().scale(y).ticks(10).orient("left"); //.tickFormat(formalLabel); 

graph 
.selectAll("circle") 
.data(data) 
.enter().append("circle") 
.attr("fill", "steelblue") 
.attr("r", 5) 
.attr("cx", xx) 
.attr("cy", yy) 
.on("mouseover", function(d) { showData(this, d.trendingValue);}) 
.on("mouseout", function(){ hideData();}); 

graph.append("svg:path").attr("d", line(data)); 



$("#graphDiv3").append("<div class='infobox' style='display:none;'>Test</div>"); 
} 
drawchart(data); 
     } 
    }; 
    } 
]); 

Answer 1

Вместо того, чтобы смять два блока кода и надеяться, что это сработает, я рекомендую вам следовать простым простым angular tutorials, чтобы лучше понять основы. Кроме того, некоторая простая отладка прошла долгий путь здесь.

1. Вы не объявляете свой модуль.
2. Вы, кажется, не передаете свои данные нигде (как в контроллере, который также не существует).
3. Функция drawChart, вы звоните drawchart
4. В вашей директиве, вы выбираете DIV с идентификатором графика, это не существует. Поскольку это директива, и они действуют на элементы используют d3.select(element[0])

Все, что сказал, как только вы работать через эти относительно простые ошибки, вы получаете некоторый рабочий код:

var myAppModule = angular.module('chart', []); 
 

 
angular.module('chart').controller('chartCtrl', function ($scope) { 
 
    
 
    $scope.myData = [{ 
 
     "date": "2015-10-01", 
 
     "trendingValue": "244" 
 
    }, 
 
    { 
 
     "date": "2015-07-01", 
 
     "trendingValue": "0" 
 
    }, 
 
    { 
 
     "date": "2015-06-01", 
 
     "trendingValue": "117" 
 
    }, 
 
    { 
 
     "date": "2015-05-01", 
 
     "trendingValue": "5353" 
 
    }, 
 
    { 
 
     "date": "2015-04-01", 
 
     "trendingValue": "11159" 
 
    }, 
 
    { 
 
     "date": "2015-03-01", 
 
     "trendingValue": "7511" 
 
    }, 
 
    { 
 
     "date": "2015-02-01", 
 
     "trendingValue": "6906" 
 
    }, 
 
    { 
 
     "date": "2015-01-01", 
 
     "trendingValue": "10816" 
 
    }, 
 
    { 
 
     "date": "2014-12-01", 
 
     "trendingValue": "3481" 
 
    }, 
 
    { 
 
     "date": "2014-11-01", 
 
     "trendingValue": "1619" 
 
    }, 
 
    { 
 
     "date": "2014-10-01", 
 
     "trendingValue": "4084" 
 
    }, 
 
    { 
 
     "date": "2014-09-01", 
 
     "trendingValue": "1114" 
 
    }]; 
 
}); 
 

 
angular.module('chart').directive('crD3Bars', [ 
 
    function() { 
 
    return { 
 
     restrict: 'E', 
 
     scope: { 
 
     data: '=' 
 
     }, 
 
     link: function(scope, element) { 
 
     
 
     function getDate(d) { 
 
      var dt = new Date(d.date); 
 
      dt.setHours(0); 
 
      dt.setMinutes(0); 
 
      dt.setSeconds(0); 
 
      dt.setMilliseconds(0); 
 
      return dt; 
 
     } 
 

 
     function showData(obj, d) { 
 
      var coord = d3.mouse(obj); 
 
      var infobox = d3.select(".infobox"); 
 
      // now we just position the infobox roughly where our mouse is 
 
      infobox.style("left", (coord[0] + 100) + "px"); 
 
      infobox.style("top", (coord[1] - 175) + "px"); 
 
      $(".infobox").html(d); 
 
      $(".infobox").show(); 
 
     } 
 

 
     function hideData() { 
 
      $(".infobox").hide(); 
 
     } 
 

 
     var drawChart = function(data) { 
 
      
 
      // define dimensions of graph 
 
      var m = [10, 20, 10, 50]; // margins 
 
      var w = 250 - m[1] - m[3]; // width 
 
      var h = 100 - m[0] - m[2]; // height 
 

 
      data.sort(function(a, b) { 
 
      var d1 = getDate(a); 
 
      var d2 = getDate(b); 
 
      if (d1 == d2) return 0; 
 
      if (d1 > d2) return 1; 
 
      return -1; 
 
      }); 
 

 

 
      var minDate = getDate(data[0]), 
 
      maxDate = getDate(data[data.length - 1]); 
 

 
      var x = d3.time.scale().domain([minDate, maxDate]).range([0, w]); 
 

 

 
      var y = d3.scale.linear().domain([0, d3.max(data, function(d) { 
 
      return d.trendingValue; 
 
      })]).range([h, 0]); 
 

 

 
      var line = d3.svg.line() 
 

 
      .x(function(d, i) { 
 

 
       return x(getDate(d)); //x(i); 
 
      }) 
 
      .y(function(d) { 
 

 
       return y(d.trendingValue); 
 
      }); 
 

 
      function xx(e) { 
 
      return x(getDate(e)); 
 
      } 
 

 
      function yy(e) { 
 
      return y(e.trendingValue); 
 
      } 
 

 
      var graph = d3.select(element[0]).append("svg:svg") 
 
      .attr("width", w + m[1] + m[3]) 
 
      .attr("height", h + m[0] + m[2]) 
 
      .append("svg:g") 
 
      .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); 
 

 

 
      var xAxis = d3.svg.axis().scale(x).ticks(d3.time.months, 1).tickSize(-h).tickSubdivide(true); 
 

 
      var yAxisLeft = d3.svg.axis().scale(y).ticks(10).orient("left"); //.tickFormat(formalLabel); 
 

 
      graph 
 
      .selectAll("circle") 
 
      .data(data) 
 
      .enter().append("circle") 
 
      .attr("fill", "steelblue") 
 
      .attr("r", 5) 
 
      .attr("cx", xx) 
 
      .attr("cy", yy) 
 
      .on("mouseover", function(d) { 
 
       showData(this, d.trendingValue); 
 
      }) 
 
      .on("mouseout", function() { 
 
       hideData(); 
 
      }); 
 

 
      graph.append("svg:path").attr("d", line(data)); 
 

 
      $("#graphDiv3").append("<div class='infobox' style='display:none;'>Test</div>"); 
 
     }; 
 

 
     drawChart(scope.data); 
 
     } 
 
    }; 
 
    } 
 
]);

<!DOCTYPE html> 
 
<html ng-app="chart"> 
 

 
    <head> 
 
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script> 
 
    <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
    <script data-require="jquery@2.1.4" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <div id="graphDiv3" ng-controller="chartCtrl"> 
 
     <cr-d3-bars data="myData"></cr-d3-bars> 
 
    </div> 
 
    </body> 
 

 
</html>