0

D3チャートで作業していて、データの変更(範囲内に保持)に基づいてチャートの値を変更したい。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; 
}) 

enter image description here

答えて

2

あなたは、以下に示すように、時計機能、何かに呼ばれ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 + ")"); 
+0

恐ろしい - 今しようとして、本当にありがとうございました! – realsimonburns

+0

修正されていないようです...何も@cyrilを変更しません。 – realsimonburns

+0

はうまくいっているはず... thats sad!あなたは私が与えた解決策を貼り付けたスニペットから試してみてください。 – Cyril

関連する問題