如何在d3中繪製一個軸頻率分佈圖？

Question

如何在d3中繪製單軸頻率分佈圖？該圖應採用類似[3 34 234 32 33 23]的數組，並在一維軸上的每個出現元素上畫一個標記。該圖應該是這樣的：

有一些方法可以繪製直方圖這樣，在d：

// Generate a histogram using twenty uniformly-spaced bins. 
var data = d3.layout.histogram() 
    .bins(x.ticks(20)) 
    (values); 

但我怎麼能產生這些一級維的版本？

Answer 1

這裏有兩種可能的方法，這取決於你想要什麼：

解決方案A

只需繪製每個數據點半透明的矩形。例如：http://bl.ocks.org/anonymous/be1b4d11d420bcfc76a6a2005d0b2fe5

溶液B

var data = d3.layout.histogram().bins(x.ticks(20))(values);剛剛生成數據，而不是圖。您可以使用該數據製作一維圖表。

例如，如果您指的是Mike Bostock的示例直方圖：http://bl.ocks.org/mbostock/3048450，則可以將頻率映射移除到條高，然後將其映射到不透明度。首先，你要添加映射頻率不透明度規模：

var opacity = d3.scale.linear() 
    .domain([0, d3.max(data, function(d) { return d.y; })]) 
    .range([0, 1]); 

，並改變這行：

.attr("height", function(d) { return height - y(d.y); }); 

喜歡的東西：

.attr("height", 50) 
    .style("opacity", function(d) { return opacity(d.y); }); 

您也想會重新格式化條的高度和間距。您可以在這裏看到一個示例：http://bl.ocks.org/anonymous/d460f85cc770a7c63221d390d733c1f5

或者，您可能希望將頻率映射到顏色而不是不透明，在這種情況下，您的比例尺將是一個色階，並且您將使用「填充」而不是「不透明度」 。