D3.js 條形圖“輸入”似乎在錯誤的位置繪制新條形

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

似乎 bar 沒有插入正確的位置，在chart_drilldown函數中嘗試替換：

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

和

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

修改后的JSFiddle