D3 .. пытается добавить ярлыки на гистограмму, добавляет все значения к каждой метке

Question

Я относительно новичок в D3 и пытаюсь добавить ярлыки на гистограмму. Я продолжаю сталкиваться с проблемой маркировки, применяющей все значения на каждую метку. Предполагаемый этот код является нормальной нагрузкой данных и т. Д.

 // Controls Bar Layout and Offset (x(d.weekOf)+20) 

    var property = svg.selectAll(".property") 
     .data(data) 
     .enter().append("g") 
     .attr("class", "g") 
     .attr("transform", function(d) { return "translate(" + (x(d.weekOf)+20) + ",0)"; }); 

    // Theese are the bars, width is the width of the bars 

    property.selectAll("rect") 
     .data(function(d) { return d.emissions; }) 
     .enter().append("rect") 
     .attr("width", "80") 
     .attr("y", function(d) { return y(d.y1); }) 
     .attr("height", function(d) { return y(d.y0) - y(d.y1); }) 
     .attr("opacity", "0.7") 
     .style("fill", function(d) { return color(d.name); }); 

    // Add Capacity Labels 

    property.selectAll("text") 
     .data(data) 
     .enter() 
     .append("text") 
     .text(function(d, i) {return d.Internal; }) 
     .attr("x", 41) 
     .attr("y", 210) 
     .attr("text-anchor", "middle"); 

Очевидно, что я пропустил что-то простое ..?

Answer 1

Ваши метки представляют собой подсегмент выбора свойства, поэтому вместо того, чтобы использовать данные() для присоединения каждой метки свойств ко всему набору данных, как вы, вместо этого вы должны использовать данные для присоединения к соответствующей родительской данности, например:

property.selectAll("text") 
    .data(function(d) {return [d];}) 
    .enter() 
    .append("text") 
    .text(function(d, i) {return d.Internal; }) 
    .attr("x", 41) 
    .attr("y", 210) 
    .attr("text-anchor", "middle");