D3.js（Wilkinson 类型）点图示例答案

【问题标题】：D3.js (Wilkinson type) Dot Plot ExampleD3.js（Wilkinson 类型）点图示例
【发布时间】：2014-11-14 15:21:32
【问题描述】：

我已经搜索过，但找不到 D3 中的点图示例。是否有人知道这种类型的绘图已经在任何基于 D3 构建的图表库中实现，或者在基础 D3 中的示例中实现？

为了清楚起见，点图类似于直方图，不同之处在于点是相互堆叠的，而不是直方图的条形图。在 R 中，这可以使用 ggplot 包创建。

qplot(x=rnorm(200),geom="dotplot")

编辑：

所以正如 Lars 所指出的，this question 的答案解决了当数据已经聚合成一个列中点数的数组时的问题。就我而言，我想显示关于每个点的交互式信息（例如，带有实际基础数据值的工具提示），所以我不能以这种方式聚合。这是我想绘制的一些示例数据。

data = [0.4897,0.7685,-0.7367,-0.7483,-0.5149,0.0448,-1.7294,1.8667,1.0116,0.3896,-0.4267,-0.1161,-1.4618,-1.3198,-1.999,1.2883,1.7123,-1.5902,-0.7937,1.0359,-0.485,-0.2391,0.4136,-0.2506,0.7333,1.1902,0.7132,-0.3096,0.4793,-0.7779,-0.19,-0.0855,1.4498,1.0196,0.537,0.5341,0.5363,0.2664,-0.8586,-0.5667,1.2263,1.508,-0.139,-0.3015,-0.3679,0.483,0.9381,-0.1298,-0.1024,1.3079,-0.9554,1.167,0.3245,1.0424,-0.3589,1.3943,2.2537,-1.3225,0.8814,-0.2723,0.3782,0.8982,0.4167,0.1614,0.5659,-0.4672,-0.7634,-0.8591,-1.0887,0.4374,0.3618,-0.7074,-0.9812,-0.6216,1.0774,0.9979,-0.799,1.186,0.5704,1.8626,1.4321,0.3179,1.6356,0.1646,2.1265,-0.2409,0.0043,1.1503,-1.615,-0.677,-0.5573,1.9954,0.8123,-0.8011,0.2088,0.5007,0.9113,-0.8742,-0.5857,0.409,-1.0702,-0.016,0.6822,1.0133,-1.2022,0.0561,0.8704,-1.5982,1.6676,-0.0344,-1.739,-2.0362,-1.1955,0.7838,0.5037,-0.2123,0.2951,1.0192,0.97,0.2384,-0.2223,-0.1448,0.9924,1.5586,1.4238,-2.4781,-0.2456,-1.8822,-0.4424,-0.5941,-0.9948,1.8733,-0.2242,-1.5359,-0.103,0.7378,0.7691,0.069,0.3952,-0.4267,-0.2077,-0.4327,-1.1705,0.0399,-0.6586,0.1043,2.9475,-0.4968,-0.5432,0.4924,1.2173,0.177,0.2861,-0.709,1.4922,-1.1633,-0.084,-1.2275,0.5193,0.2404,-1.4495,-0.3346,0.3153,-0.573,0.4139,-0.9114,1.4844,0.1166,0.8734,2.182,-0.3765,2.0888,1.1178,0.2684,-0.5803,0.893,0.2127,-0.107,0.0569,1.0699,0.2975,1.3017,0.4541,1.8337,0.7915,1.705,-0.2708,-0.9626,1.1994,-1.6666,1.2642,0.5244,-1.1757,0.9278,0.882,-0.8993,1.2435,0.3841,0.6815,-0.1459]

【问题讨论】：

喜欢this?
我不关注@LarsKotthoff。我想创建一个像上面的 R 图一样的 d3.js 图。这是一个相当标准的情节，所以我想象已经有一个实现在互联网上流动。
啊，对不起。你说的对。我想要一个类似的图，但使用分类数据，以便我可以添加交互式元素，允许用户获取有关每个特定数据点的信息。
它的工作方式完全相同，只是您不需要使用d3.range() 来获取每个点的数据。您需要做的就是进行一些预处理，将数据分类到 bin 中，然后您可以使用这些 bin 进行嵌套选择。

标签： javascript r d3.js plot

【解决方案1】：

点图与直方图或分箱无关。涉及 d3.histogram 的方法不会产生点图。请在https://www.cs.uic.edu/~wilkinson/Publications/dotplots.pdf阅读我的文章的转载。那里给出了正确的算法。

【讨论】：

【解决方案2】：

您可以使用d3.histogram 函数对数据进行分箱，然后使用嵌套结构来绘制圆圈。

请参阅this bl.ocks 获取代码和自我更新点图的现场演示，当您.mouseover 一个点时会显示交互式信息（工具提示）。

【讨论】：