D3.js不使用所有的數據點

Question

我使用D3.js來製作Facebook組數據的簡單可視化。 爲了製作這個可視化文件，我使用了我保存爲JSON文件的facebook圖表api中的數據。

我使用d3.json()函數加載數據，並將其打印到控制檯。控制檯上的數據正確表示文件中的內容。但是，當我將它綁定到d3中的<g>元素時，我沒有得到前14個數據點顯示。實際上，它們在posts變量中表示爲空對象。

爲可視化的完整代碼可以看出：http://jsfiddle.net/shubhanshumishra/j8w7a6tL/ 我使用的可視化數據集可以看出：https://github.com/napsternxg/FacebookGroupVisual/blob/master/Demo/demo.response.json

如果打開JS小提琴頁面上的Chrome瀏覽器控制檯，改變你的框架到result.jsFiddle框架，然後運行代碼，您將看到我打印到控制檯的各種變量以及變量數據與變量帖子的區別。

很高興知道爲什麼會發生這種奇怪的行爲。

Answer 1

問題在於，在製作選擇時，您的SVG中已經有g元素。一些數據被綁定到這些元素，因此不會顯示在.enter()選擇中。在this tutorial的更多詳細信息。

我已經通過爲g元素here分配類來修復了您的代碼。