D3.js未使用所有数据点 [英] D3.js not using all of the data points
问题描述
我正在使用D3.js对Facebook组数据进行简单的可视化. 为了实现这种可视化，我正在使用来自Facebook图形api的数据，并将其另存为JSON文件.
我使用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框架，然后运行代码，您将看到我要打印到控制台的各种变量以及变量数据与变量之间的差异帖子.
很高兴知道为什么会发生这种奇怪的行为.
问题是，进行选择时，您的SVG中已经有g个元素.一些数据绑定到那些元素，因此不会出现在.enter()选择中. 本教程中的更多详细信息.
我已经通过为g元素分配一个类来固定您的代码，此处./p>
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.
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.
这篇关于D3.js未使用所有数据点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
