Javascript D3.js条形图'；输入'；似乎在错误的位置绘制新条

我一直在学习D3.js上的一些教程/文章，以创建具有钻取类型功能的条形图。我的工作方式和我想要的差不多，但有一个问题我似乎无法解决

我这里有一个我正在研究的例子（这是我正在研究的主要版本的精简版本，只是为了说明问题）：

您可以看到，初始条形图显示了“团队A”的1个条形图，您可以单击该条形图钻取到下一组数据，其中显示了3个条形图。问题是新的酒吧都有点不合适。你会注意到，我在图表轴上使用了一个边距，它偏移了条形图，从我所能看出的是，在新条形图上没有考虑到这一点。以下是我认为问题所在的代码：

//Create bars
chartBarData.enter()
  .append("rect")
    .attr({
        "x": function (d) { return xScale(d.key); },
        "y": height,
        "width": xScale.rangeBand(),
        "height": 0,
        "fill": function (d) { return "rgb(0, 130, 0)"; }
    })
    .transition().delay(animDur).duration(animDur)
    .attr({
        "x": function (d) { return xScale(d.key); },
        "y": function (d) { return yScale(d.values.count); },
        "width": xScale.rangeBand(),
        "height": function (d) { return height - yScale(d.values.count); },
        "fill": function (d) { return "rgb(0, 130, 0)"; }
    });

我已经找到了一种解决方法，将边距放在“rect”属性的“x”和“y”部分，但这会导致进一步深入数据时出现类似问题。我肯定有一些明显的东西我错过了，或者可能只是不完全理解D3！感谢您的帮助

---

编辑：我还应该补充一点，D3“更新”部分似乎工作正常，使用与“输入”部分相同的比例-这令人困惑！正如您将在JSFIDLE链接上看到的，当您钻取时，第一个条正确对齐，但其他两个条没有正确对齐。

在

图表\u向下钻取功能中，似乎没有将条插入正确的位置，请尝试替换：

var chartBarData = theChart.selectAll("rect")
        .data(groupedData);

与

如果查看生成的标记，最后两个栏位于
g
group元素之外。如果您修改DOM，使它们位于
g
中，它们将正确渲染。谢谢，我不应该错过这一点，但我想我已经盯着它看了太久：）很高兴见到你老朋友。很高兴见到你老朋友，就是这样。谢谢你的帮助
var chartBarData = theChart.select("g").selectAll("rect")
        .data(groupedData);