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

Question

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

我在这里有一个例子(这是我正在做的主要例子的缩减版本，只是为了说明问题):http://jsfiddle.net/MattFrewin/bobec00k/1/

您可以看到初始条形图为“团队 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“更新”部分似乎工作正常，使用与“输入”部分相同的比例 - 这令人困惑!正如您将在 jsfiddle 链接上看到的那样，当您钻取时，第一个栏正确排列，但其他两个不是。

Answer 1

似乎柱没有插入到正确的位置，在 chart_drilldown 函数中尝试替换:

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

与

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

Modified JSFiddle