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数据管理方法并不完全兼容。选择的想法依赖于数据项是独立的，而在您的情况下，您希望明确地比较它们。

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

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

1 个答案: