D3js PieChart не будет выполнять раздел UPDATE

Question

Возможно, это самый простой график, который можно создать с помощью d3js. И все же я боюсь.

График выполняет все заданные ему в enter() и exit(). Но все в ENTER + UPDATE полностью игнорируется. ЗАЧЕМ?

// Setup dimensions 
var width = 200, 
    height = 200, 
    radius = Math.min(width, height)/2, 

// Setup a color function with 20 colors to use in the graph 
    color = d3.scale.category20(), 

// Configure pie container 
    arc = d3.svg.arc().outerRadius(radius - 10).innerRadius(0), // Define the arc element 
    svg = d3.select(".pie").append("svg:svg") 
     .attr("width", width) 
     .attr("height", height) 
     .append("g") 
     .attr("transform", "translate(" + width/2 + "," + height/2 + ")"), 

// This is the layout manager for the pieGraph 
    pie = d3.layout.pie() 
     .sort(null) 
     .value(function (d) { 
      return d.answers; 
     }), 

// Allow two groups in the container. One overlapping the other, just to make sure that 
// text labels never get hidden below pie arcs. 
    graphGroup = svg.append("svg:g").attr("class", "graphGroup"), 
    textGroup = svg.append("svg:g").attr("class", "labelGroup"); 

// Data is loaded upon user interaction. On angular $scope update, refresh graph... 
$scope.$watch('answers', function (data) { 
    // === DATA ENTER =================== 
    var g = graphGroup.selectAll("path.arc").data(pie(data)), 
     gEnter = g.enter() 
      .append("path") 
      .attr("d", arc) 
      .attr("class", "arc"), 

     t = textGroup.selectAll("text.label").data(data), 
     tEnter = t.enter() 
      .append("text") 
      .attr("class", "label") 
      .attr("dy", ".35em") 
      .style("text-anchor", "middle"); 

    // === ENTER + UPDATE ================ 
    g.select("path.arc") 
     .attr("id", function (d) { 
      return d.data.id + "_" + d.data.selection; 
     }) 
     .attr("fill", function (d, i) { 
      return color(i); 
     }) 
     .transition().duration(750).attrTween("d", function (d) { 
      var i = d3.interpolate(this._current, d); 
      this._current = i(0); 
      return function (t) { 
       return arc(i(t)); 
      }; 
     }); 
    t.select("text.label") 
     .attr("transform", function (d) { 
      return "translate(" + arc.centroid(d) + ")"; 
     }) 
     .text(function (d) { 
      return d.data.opt; 
     }); 

    // === EXIT ========================== 
    g.exit().remove(); 
    t.exit().remove(); 
}); 

Это один пример структуры JSon данной функции обновления в качестве «данных»:

[{"selection":"0","opt":"1-2 timer","answers":"7"}, 
{"selection":"1","opt":"3-4 timer","answers":"13"}, 
{"selection":"2","opt":"5-6 timer","answers":"5"}, 
{"selection":"3","opt":"7-8 timer","answers":"8"}, 
{"selection":"4","opt":"9-10 timer","answers":"7"}, 
{"selection":"5","opt":"11 timer eller mer","answers":"11"}, 
{"selection":"255","opt":"Blank","answers":"8"}] 

Answer 1

Вам не нужно дополнительное .select() для доступа выбора обновления. Это фактически возвращает пустые выборы в вашем случае, а это значит, что ничего не происходит. Для того, чтобы заставить его работать, просто избавиться от дополнительных .select() и сделать

g.attr("id", function (d) { 
     return d.data.id + "_" + d.data.selection; 
    }) 
// etc 

t.attr("transform", function (d) { 
     return "translate(" + arc.centroid(d) + ")"; 
    }) 
// etc