javascript - D3.js not using all of the data points

Question

I am using D3.js for making a simple visualization of facebook group data. In order to make this visualization I am using the data from the facebook graph api which I am saving as a JSON file.

I load the data using d3.json() function and I print it to the console. The data on the console is correct representation of what is in the file. However, when I bind it to the <g> elements in d3 then I don't get the top 14 data points shows. In fact they are represented in as null objects in the posts variable.

The full code for the visualization can be seen at: http://jsfiddle.net/shubhanshumishra/j8w7a6tL/ The dataset I am using for the visualization can be seen at: https://github.com/napsternxg/FacebookGroupVisual/blob/master/Demo/demo.response.json

If you open the Chrome console on the JS fiddle page and change your frame to the result.jsFiddle frame and then run the code you will see the various variables I am printing to the console and how the variable data differs from the variable posts.

It would be great to know why this strange behavior is happening.

Answer 1

The problem is that you have g elements in your SVG already when making the selection. Some of the data gets bound to those elements and therefore doesn't show up in the .enter() selection. More details in this tutorial.

I've fixed your code by assigning a class to the g elements here.