如何格式化值数组以形成谷歌图表直方图的分布？

Question

我有 1000 个值，没有特定的顺序，但我想将它们格式化为正态分布，以便使用 google-charts 在直方图上绘制。

我已经尝试使用 d3.js，并且仅根据一些示例就可以使用它，但是它看起来非常丑陋，而且我没有足够的时间来学习 d3 以获得我想要的结果。谷歌图表视觉格式很棒。

问题是 google-charts 需要一种格式的数据，其中每个值都有一个名称和标题。所以当我把它整理成这样：

'dsSample1': [
    ['price', 'number'],
    ['price', 11386.057139142767],
    ['price', 27659.397260273952],
    ['price', 44159.39726027395],
    ...

来自

'dsSample2': [
    11386.057139142767,
    27659.397260273952,
    44159.39726027395,
    28026.04112639835,
    ...

谷歌图表有效，但我得到以下信息：

这与我在 d3:https://jsfiddle.net/0jtrq17x/1/ 中的工作非常接近。它有效，但非常丑陋。

我已经设法使用一些 d3 代码将数组数据排列到 bin 中，但它与 google-charts 不兼容，我不知道如何使其兼容，也不知道如何格式化数据所以它与谷歌图表直方图配合得很好

这段代码

var values = this.hypo.dsSample2.map(x => {
    return x + 128608.42487322348
})
var max = d3.max(values)
var min = d3.min(values)
var x = d3.scale.linear()
    .domain([min, max])
    .range([0, 800]);
var histGenerator = d3.layout.histogram()
    .bins(x.ticks(100))
    (values)
this.data1 = histGenerator

返回此数组转换

我的问题是我不知道如何处理我的数据数组，所以我可以在 google-charts 中得到类似的东西：

Answer 1

谷歌图表版本有两个data formats。
带有名称的单一系列格式，
或多系列格式，仅包含数字。
可以对单个系列使用多系列格式。

因此，不需要指定名称。
但是您必须将每个值转换为自己的数组。

'dsSample1': [
    [11386.057139142767],
    [27659.397260273952],
    [44159.39726027395],
    ...

来自

'dsSample2': [
    11386.057139142767,
    27659.397260273952,
    44159.39726027395,
    ...  

您可以使用map 方法来格式化数据。

dsSample.map(function (value) {
  return [value];
});

请看下面的小提琴...

https://jsfiddle.net/x684f1vs/

Answer 2

我知道你已经决定反对 D3，但由于你的问题仍然用 d3.js 标记，我无论如何都会使用 D3 发布答案:)

我制作了一个更新的 JSFiddle，并改编了您的代码： https://jsfiddle.net/w7r80cfo/1/

简而言之，要操作此直方图，请查看以下几行：

• 1038 和 1039 更改可视化的尺寸（分别为宽度和高度）。给出的值以像素为单位。
• 1049 更改直方图的桶数。目前设置为 100。
• 1083 更改各个条的宽度。目前，我已将其设置为为每个条计算的空间的0.25。如果你例如将 0.25 更改为 1 条形将非常宽，它们将被绘制在彼此旁边。
• 1085 更改条的颜色。目前，它们代表的值越多，它们的红色阴影就越深。如果你想要例如只是蓝色，将行更改为.attr("fill", "steelblue")

玩弄这些值，看看你是否能得到一个接近你想要的图表。

为了详细说明我所做的更改，它们主要包括以下内容：

第 1038 行：将 width 降低到 600。

第 1073 行：已更新以正确定位可视化：

.attr('transform', `translate(${margin.left},${margin.top})`);

第 1083 行：将条的宽度降低了 0.25：

.attr("width", (x(data[0].dx) - x(0)) * 0.25)

除此之外，我还删除了以下代码以删除文本标签，因为它们确实使图表看起来很乱：

bar.append("text")
  .attr("dy", ".75em")
  .attr("y", -12)
  .attr("x", (x(data[0].dx) - x(0)) / 2)
  .attr("text-anchor", "middle")
  .text(function(d) { return "$" + d3.format(",.2f")(d.x); });

除此之外，我还添加了一个 y 轴并更改了轴的绘制方式，以使它们看起来更好一些。我可以详细介绍这些更改，但我认为它们对您的目标不太感兴趣。

希望这会有所帮助！