D3 차트 문제, 데이터 바인딩이 작동하지 않습니다.

Question

D3 차트에서 작업하고 범위의 데이터 변경 내용을 기반으로 차트 값을 변경하려고합니다.

지금까지 모든 로그가 정상적으로 처리되었으므로 $ $ scope.watch 호출이 작동하고 함수를 호출합니다. 새로운 업데이트 된 데이터가 로그에 나타나지만 차트는 변경되지 않습니다.

디버깅하는 방법에 대한 의견이 있으십니까?

.directive('barsChart', function($parse) { 
    var directiveDefinitionObject = { 
     restrict: 'E', 
     scope: {data: '=chartData'}, 
     link: function (scope, element, attrs) { 
     scope.$watch('data', function(newVals, oldVals) { 
      triggerRelink(); 
     }, true); 

     var triggerRelink = function() { 

     console.log("this is the scope", scope.data); 
     var margin = { 
      top: 25, 
      right: 75, 
      bottom: 85, 
      left: 85 
      }, 
      w = 600 - margin.left - margin.right, 
      h = 350 - margin.top - margin.bottom; 
     var padding = 10; 

     var colors = [ 
      ["Local", "#2ba8de"], 
      ["Global", "#318db4"] 
      ]; 

     var dataset = [{ 
      "keyword": "Current Home", 
      "global": 0, 
      "local": scope.data[0] 
      }, { 
      "keyword": "Extra Bathroom", 
      "global": 0, 
      "local": scope.data[1] 
     } 
     ]; 
     console.log("the dataset", dataset); 
     var xScale = d3.scale.ordinal() 
      .domain(d3.range(dataset.length)) 
      .rangeRoundBands([0, w], 0.05); 
     // ternary operator to determine if global or local has a larger scale 
     var yScale = d3.scale.linear() 
      .domain([0, d3.max(dataset, function (d) { 
      return (d.local > d.global) ? d.local : d.global; 
     })]) 
      .range([h, 0]); 
     var xAxis = d3.svg.axis() 
      .scale(xScale) 
      .tickFormat(function (d) { 
      return dataset[d].keyword; 
     }) 
      .orient("bottom"); 
     var yAxis = d3.svg.axis() 
      .scale(yScale) 
      .orient("left") 
      .ticks(5); 

      var commaFormat = d3.format(','); 

     // existing 
      var svg = d3.select(element[0]) 
      .append("svg") 
      .attr("width", w + margin.left + margin.right) 
      .attr("height", h + margin.top + margin.bottom) 
      .append("g") 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

      // Graph Bars 
      var sets = svg.selectAll(".set") 
       .data(dataset) 
       .enter() 
       .append("g") 
       .attr("class", "set") 
       .attr("transform", function (d, i) { 
       return "translate(" + xScale(i) + ",0)"; 
      }); 
      sets.append("rect") 
       .attr("class", "local") 
       .attr("width", xScale.rangeBand()/2) 
       .attr("y", function (d) { 
       return yScale(d.local); 
      }) 
       .attr("x", xScale.rangeBand()/2) 
       .attr("height", function (d) { 
       return h - yScale(d.local); 
      }) 
       .attr("fill", colors[0][1]); 

       sets.append("rect") 
        .attr("class", "global") 
        .attr("width", xScale.rangeBand()/2) 
        .attr("y", function (d) { 
        return yScale(d.global); 
       }) 
        .attr("height", function (d) { 
        return h - yScale(d.global); 
       }) 
        .attr("fill", colors[1][1]); 
       // xAxis 
       svg.append("g") // Add the X Axis 
       .attr("class", "x axis") 
        .attr("transform", "translate(0," + (h) + ")") 
        .call(xAxis) 
        .selectAll("text") 
        .style("text-anchor", "end") 
        .attr("dx", "-.8em") 
        .attr("dy", ".15em") 
        .attr("transform", function (d) { 
        return "rotate(-25)"; 
       }); 
       // yAxis 
       svg.append("g") 
        .attr("class", "y axis") 
        .attr("transform", "translate(0 ,0)") 
        .call(yAxis); 
       // xAxis label 
       svg.append("text") 
        .attr("transform", "translate(" + (w/2) + " ," + (h + margin.bottom - 5) + ")") 
        .style("text-anchor", "middle"); 
        // .text("Renovation Type"); 
       //yAxis label 
       svg.append("text") 
        .attr("transform", "rotate(-90)") 
        .attr("y", 0 - margin.left) 
        .attr("x", 0 - (h/2)) 
        .attr("dy", "1em") 
        .style("text-anchor", "middle") 
        .text("Home Value"); 
     }; 
     triggerRelink(); 
     } 
    }; 
    return directiveDefinitionObject; 
}) 

Answer 1

당신은 아래 그림과 같이 시계 기능 무언가에 호출되는 triggerRelink()에서 이전 SVG를 제거해야합니다

var svg = d3.select(element[0]).select("svg").remove(); 
//append the new svg 
var svg = d3.select(element[0]) 
     .append("svg") 
     .attr("width", w + margin.left + margin.right) 
     .attr("height", h + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");