2014-09-20 109 views
3

我已經搜索過,但無法找到D3中點圖的例子。任何人都知道這種類型的情節已經在任何建立在D3上的圖表庫或基於D3的例子中實現過嗎?D3.js(威爾金森型)點圖例

要明確一點,點圖與直方圖類似,除了點堆疊在另一個頂點而不是直方圖的條形。在R中可以使用ggplot包創建。

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

enter image description here

編輯:

因此,作爲拉斯指出,當數據聚合成與點的列數的陣列答案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] 
+0

贊[this](http://stackoverflow.com/questions/25186636/dot-plot-in-d3-js)? – 2014-09-20 10:13:48

+0

我不遵循@LarsKotthoff。我想創建一個像上面的R圖一樣的d3.js圖。這是一個相當標準的情節,所以我想到已經有一個實現在互聯網上流動。 – 2014-09-20 22:26:09

+0

啊,對不起。你是對的。我想要一個類似的情節,但使用分解數據,以便我可以添加交互式元素,允許用戶獲得有關每個特定數據點的信息。 – 2014-09-20 22:58:24

回答

0

您可以使用d3.histogram功能斌數據,然後使用嵌套的結構,繪製自己的圈子。

請參閱this bl.ocks瞭解自我更新點圖的代碼和現場演示,當您點.mouseover時,顯示交互式信息(工具提示)。