Как добавить svg поверх другого svg в d3, js

Question

Я использую d3.js для построения столбчатой ​​гистограммы. Я имею в виду этот график http://bl.ocks.org/mbostock/3886208

Я хочу добавить небольшой квадрат разного цвета на барах, имеющих равное значение. К примеру, в этом случае graph- население 25 до 44 лет и 45 до 64 лет равно, то я хочу показать квадрат 10,10 (ширина, высота) на обоих барах, связанных с СА , Это то, что я делал, но не показывал его на баре:

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

equalBar.selectAll("rect") 
.data(function(d) { return d.ages;}) 
.enter().append("rect") 
.attr("width", 10) 
.attr("y", function(d){ 
    return y(d.y1); 
}) 
.attr("height", function(d) 
     { return 10; }) 
.style("fill", "green"); 

Большое спасибо за помощь.

Answer 1

То, что вы пытаетесь сделать, на самом деле не совместимо с подходом D3 к управлению данными. Идея выбора основана на том, что элементы данных являются независимыми, тогда как в вашем случае вы хотите явно их сравнить.

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