如何使用angularjs指令绘制d3.js折线图

时间：2016-02-06 10:46:47

标签： angularjs d3.js

如何使用angular指令使用范围json数据加载d3.js图，而不是使用graph.html文件。我已经引用了此网址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);
        }
    };
  }
]);

1 个答案:

答案 0 :(得分：2)

我建议您按照一些简单的angular tutorials来更好地掌握基础知识，而不是混合两段代码并希望它能够正常运行。此外，一些简单的调试将在这里走得很远。

  1. 您没有声明您的模块。
  2. 您似乎没有在任何地方传递您的数据（例如在一个也不存在的控制器中）。
  3. 该功能为drawChart，您正在调用drawchart
  4. 在您的指令中，您选择id为chart的div，这不存在。由于它是一个指令，他们使用d3.select(element[0])
    5. 对元素采取行动

    所有这一切都表明，一旦你解决了这些相对简单的错误，就会得到一些有用的代码：

    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>

相关问题
最新问题