Question

对不起，也许这是一个愚蠢的问题，但我还在学习。

我正在尝试使用angularJS中的D3.js创建一个简单的折线图。一切正常，我正在使用自定义指令使用D3绘制图表。我通过使用$ scope.initially在控制器中添加图表数据，它将绘制，但我将在一次按钮点击中更改数据，但图表不会自动更新，

在阅读angularjs文档之后，通过使用$ scope我们可以动态地更改UI内容。这里是否有可能或者angularJs中存在任何其他场景

我是AngularJS的初学者

  <div  data-ng-app="chartApp" data-ng-controller="SalesController">
  <h1>Today's Sales Chart</h1>
  <div linear-chart chart-data="salesData"></div>
  <button type="button" data-ng-click="Change()">Click Me!</button>
  </div>

我的JS代码

 var app = angular.module('chartApp', []);
    app.controller('SalesController', ['$scope', function($scope){
    $scope.salesData=[
    {hour: 1,sales: 54},
    {hour: 2,sales: 66},
    {hour: 3,sales: 77},
    {hour: 4,sales: 70},
    {hour: 5,sales: 60},
    {hour: 6,sales: 63},
    {hour: 7,sales: 55},
    {hour: 8,sales: 47},
    {hour: 9,sales: 55},
    {hour: 10,sales: 30}
];  
  $scope.Change = function () {
  //here i am changing the data so i need to replot the chart
  $scope.salesData=[
    {hour: 1,sales: 14},
    {hour: 2,sales: 16},
    {hour: 3,sales: 77},
    {hour: 4,sales: 10},
    {hour: 5,sales: 60},
    {hour: 6,sales: 63},
    {hour: 7,sales: 55},
    {hour: 8,sales: 47},
    {hour: 9,sales: 55},
    {hour: 10,sales: 30}
];
}  
}]);
//creating one custom directive to plot the chart
app.directive('linearChart', function($window){
  return{
  restrict:'EA',
  template:"<svg width='850' height='200'></svg>",
   link: function(scope, elem, attrs){
       var salesDataToPlot=scope[attrs.chartData];
       //if u gave like this u can remove attributr chart-data 
      // var salesDataToPlot=scope.salesData
       var padding = 20;
       var pathClass="path";
       var xScale, yScale, xAxisGen, yAxisGen, lineFun;

       var d3 = $window.d3;
       var rawSvg=elem.find('svg');
       var svg = d3.select(rawSvg[0]);

       function setChartParameters(){

           xScale = d3.scale.linear()
               .domain([salesDataToPlot[0].hour, salesDataToPlot[salesDataToPlot.length-1].hour])
               .range([padding + 5, rawSvg.attr("width") - padding]);

           yScale = d3.scale.linear()
               .domain([0, d3.max(salesDataToPlot, function (d) {
                   return d.sales;
               })])
               .range([rawSvg.attr("height") - padding, 0]);

           xAxisGen = d3.svg.axis()
               .scale(xScale)
               .orient("bottom")
               .ticks(salesDataToPlot.length - 1);

           yAxisGen = d3.svg.axis()
               .scale(yScale)
               .orient("left")
               .ticks(5);

           lineFun = d3.svg.line()
               .x(function (d) {
                   return xScale(d.hour);
               })
               .y(function (d) {
                   return yScale(d.sales);
               })
               .interpolate("basis");
       }

     function drawLineChart() {

           setChartParameters();

           svg.append("svg:g")
               .attr("class", "x axis")
               .attr("transform", "translate(0,180)")
               .call(xAxisGen);

           svg.append("svg:g")
               .attr("class", "y axis")
               .attr("transform", "translate(20,0)")
               .call(yAxisGen);

           svg.append("svg:path")
               .attr({
                   d: lineFun(salesDataToPlot),
                   "stroke": "blue",
                   "stroke-width": 2,
                   "fill": "none",
                   "class": pathClass
               });
       }
       drawLineChart();
   }
  };
  });

Fiddle

Answer 1

您可以在范围上使用$watch收听salesData数据更改，并在完成后重建图表。

//...
scope.$watch('salesData', function (newSalesData){
    // drawLineChart();
    // redraw logic
});
//...

Answer 2

这里你是一个实例： http://jsfiddle.net/7dc3efrc/1/

scope.$watch(attrs.chartData, function(newValue) {
    if (newValue) {
        svg.selectAll("*").remove();
        drawLineChart(newValue);
    }
}, true);

使用范围的$ watch方法触发模型更改的更新。此外，如果您不需要，请不要忘记清除上一个图表（svg.selectAll（“*”）。remove（））。

请参阅完整示例，因为我对salesDataToPlot变量进行了一些小修改（它现在是一个函数参数）。

动态更新指令数据

2 个答案: