D3.js（Wilkinson类型）点图示例 [英] D3.js (Wilkinson type) Dot Plot Example

问题描述

我已搜索，但无法在D3中找到点图的示例。是否有人知道这种类型的图已经在D3上构建的任何图表库或基本D3中的示例中实现？

I've searched, but been unable to find an example of a dot plot in D3. Is anyone aware of this type of plot having been implemented in any of the charting libraries built on D3, or an example in base D3?

为了清楚起见，曲线类似于直方图，除了点彼此堆叠以代替直方图的条。在R中，可以使用ggplot包创建。

Just to be clear, a dot plot is similar to a histogram except that points are stacked on top of one another in place of a histogram's bars. In R this can be created using the ggplot package.

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

编辑：

正如Lars指出的， 此问题解决了将数据聚合到数组中的问题点在一列。在我的情况下，我想显示关于每个点的互动信息（例如，一个工具提示与实际底层数据值），所以我不能这样聚合。下面是一些我想绘制的示例数据。

So as Lars pointed out, the answer to this question solves the problem when the data has been aggregated into an array with the number of points in a column. In my case, I want to display interactive information about each of the points (e.g. a tool tip with the actual underlying data value), so I can't aggregate in this way. Here is some example data that I'd like to plot.

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] 

推荐答案

您可以使用 d3.histogram 函数，用于收集您的数据，然后使用嵌套结构绘制您的圈子。

You could use the d3.histogram function to bin your data and then use a nested structure to draw your circles.

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

See this bl.ocks for the code and a live demo of a self updating dot plot, with interactive information displayed (tooltip) when you .mouseover a dot.

这篇关于D3.js（Wilkinson类型）点图示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！