D3.js條形圖「ENTER」鍵似乎繪製新的酒吧在錯誤的位置

我一直在下面的D3.js幾個教程/文章，以創建鑽取型功能的柱狀圖。我有很多工作要做，但有一個我似乎無法解決的問題。D3.js條形圖「ENTER」鍵似乎繪製新的酒吧在錯誤的位置

我有我在這裏工作的一個例子（這是減少從主一個我工作的版本，只是爲了顯示這個問題）：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)"; } 
    });

我已經把利潤率爲「X」和「矩形」的「Y」的部分，但屬性找到一條出路當進一步深入數據時，這會導致進一步的類似問題。我確定有一些明顯的缺失，或者可能完全不瞭解D3。任何幫助表示讚賞。

編輯：我還要補充的是，D3「更新」部分看起來做工精細，用同樣的尺度爲「進入」部分 - 這是令人困惑！正如你將在jsfiddle鏈接上看到的那樣，當你鑽通時第一個排列正確，而另外兩個排列不正確。

來源

2015-11-25 Matt F

如果你看一下生成的標記時，最後兩個欄位於'g'組元素之外。如果您修改DOM以使它們位於'g'內，則它們可以正確渲染。 –

謝謝你，我不應該錯過了，但我想我已經在它一直盯着太久:) –

看來條未插入正確位置，在chart_drilldown功能嘗試更換：

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

與

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

Modified JSFiddle

來源

2015-11-25 15:39:45

很高興見到你的老朋友。 –

很高興見到你的老朋友，也 –

輝煌，這是它到底。感謝您的幫助 –

D3.js條形圖「ENTER」鍵似乎繪製新的酒吧在錯誤的位置

回答

相關問題