javascript - 如何在d3，js中的另一个svg之上添加svg

Question

我正在使用 d3.js 构建堆叠条形图。我指的是这张图http://bl.ocks.org/mbostock/3886208

我想在具有相同值的条上添加一个不同颜色的小方块。例如，在此图中 - 如果25 到 44 岁和45 到 64 岁的人口相等，那么我想在与 CA 相关的两个条形上显示一个 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 数据管理方法并不真正兼容。选择的想法依赖于数据项是独立的，而在您的情况下，您希望明确地比较它们。

我将采取的方法是创建一个包含这些比较结果的新数据结构。也就是说，对于每个人口组，它会告诉您它等于哪些其他组。然后，您可以使用这些新数据来创建适当的矩形。