D3 update bar chart - Невозможно связать новые данные

Question

Здравствуйте, я новичок в d3, и я не смог обновить данные на моей гистограмме. Я создаю бары, используя следующий код.

g.selectAll(".bar") 
.data(data) 
.enter().append("rect") 
.attr("class", "bar") 
.attr("x", function(d) { return x(d.letter) + 1; }) 
.attr("y", function(d) { return y(d.frequency); }) 
.attr("width", x.bandwidth() - 1) 
.attr("height", function(d) { return height - y(d.frequency); }) 

Я был в состоянии изменить данные, используя жестко закодированные значения:

var bar = svg.selectAll(".bar"); 

bar.transition().duration(750).data(data).enter() 
    .attr("y", function(d) { return 0; }) 
    .attr("height", function(d) { return Math.random()*100; }); 

Как я правильно связать новые данные?

Answer 1

См. Ниже приведенный ниже фрагмент для примера обновления гистограммы с новыми данными программным способом и отображения анимации перехода в процессе.

var data = [{x:10, y:10, w:50, h:25}, 
 
      {x:10, y:40, w:150, h:25}, 
 
      {x:10, y:70, w:70, h:25}]; 
 

 
var g = d3.select("g"); 
 

 
// Bind initial data to empty selection, then use enter() 
 
// to access the virtual selection from the data-join 
 
// and subsequently append a rect for each virtual selection 
 
g.selectAll(".bar") 
 
    .data(data) 
 
    .enter().append("rect") 
 
    .attr("class", "bar") 
 
    .attr("x", function(d) { return d.x; }) 
 
    .attr("y", function(d) { return d.y; }) 
 
    .attr("width", function(d) {return d.w; }) 
 
    .attr("height", function(d) { return d.h; }); 
 

 
var new_data = [{x:10, y:10, w:150, h:25}, 
 
       {x:10, y:40, w:50, h:25}, 
 
       {x:10, y:70, w:100, h:25}]; 
 

 
// Bind the new data to the rect objects. Since new_data 
 
// is of the same size as number of rects, enter() and exit() 
 
// selections from data-join will be empty and the rects 
 
// with updated bound data are now available in the default 
 
// update selection. 
 
g.selectAll(".bar") 
 
    .data(new_data) // grab the update selection by default 
 
     .transition().duration(3000) 
 
     .attr("width", function(d) { return d.w; }); // Update the attribute

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 
<svg width="400" height="400"> 
 
    <g> 
 
    </g> 
 
</svg>