javascript - D3.js 条形图 'enter' 似乎在错误的位置绘制了新条形

Question

我一直在关注 D3.js 上的几篇教程/文章来创建具有钻取类型功能的条形图。我让它按照我想要的方式工作，但有一个我似乎无法弄清楚的问题。

我在这里正在处理一个示例(这是我正在处理的主要示例的删减版本，只是为了显示问题):http://jsfiddle.net/MattFrewin/bobec00k/1/

您可以看到初始条形图显示“Team 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)"; }
    });

我找到了一种解决方法，将边距放入“矩形”属性的“x”和“y”部分，但这在进一步深入数据时会导致更多类似的问题。我确信我遗漏了一些明显的东西，或者可能只是还不太完全理解 D3!如有任何帮助，我们将不胜感激。

编辑:我还应该补充一点，D3 的“更新”部分似乎工作正常，使用与“输入”部分相同的比例 - 这令人困惑!正如您将在 jsfiddle 链接上看到的，当您深入查看时，第一个条形图已正确排列，但其他两个条形图却没有正确排列。

Answer 1

看来条形图没有插入到正确的位置，在chart_drilldown函数中尝试替换:

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

与

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

Modified JSFiddle