如何在d3中绘制单轴频率分布图？

Question

如何在 d3 中绘制单轴频率分布图？该图应采用类似 [3 34 234 32 33 23] 的数组，并在一维轴上的每个出现的元素上绘制一个标记。该图应如下所示：

有一些方法可以在 d3 中绘制这样的直方图：

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

但是我怎样才能生成这些的一维版本呢？

Answer 1

根据您的需要，这里有两种可能的方法：

方案一

只需为每个数据点绘制一个半透明矩形。示例：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

或者，您可能希望将频率映射到颜色，而不是不透明度，在这种情况下，您的比例将是颜色比例，并且您将使用“填充”而不是“不透明度”。