具有序数数据的直方图

Question

我有颜色的数据集，我想显示当前数据集中有多少种每种颜色的条目。

格式化数据集后，它是一个字符串数组：

const colors = [
    'red',
    'green',
    'blue',
    'red',
    'red',
    'green'
]

我想制作一个可以放入直方图布局的比例尺。比例尺应有助于布局以创建多个箱。将数据输入直方图生成器后，我希望得到一个包含5个条目的数组。数组中的每个对象都应具有x0和x1属性。

这是我阅读文档后的期望。顺便说一句，这就是我期望的最终结果：

这是我的代码的样子：

const width = container.node().getBoundingClientRect().width
const xScale = d3.scaleOrdinal().domain(colors).range([0, width])
const histogramGenerator = d3.histogram()

histogramGenerator
  .domain(xScale.domain())
  .tresholds(xScale.domain().length)

const histogramData = histogramGenerator(colors)

实际结果如下：

[Array(0)]
  0: [x0: "red", x1: "blue"]
  length: 1
  __proto__: Array(0)

我不想使用条形图，此实验的全部目的是学习如何将d3直方图与有序数据（如此颜色数据集）一起使用。

Answer 1

很遗憾，根据定义，“具有序数数据的直方图” 是不可能的。您需要的是条形图。引用Wikipedia article关于直方图，

  

直方图是数字数据分布的准确表示。它是对连续变量的概率分布的一种估计，最早是由Karl Pearson引入的。

对连续变量的重视是我的。

如果您查看caption source code（现已重命名为d3.histogram），则会看到它需要数值：

d3.bin

具体看看// Assign data to bins by value, ignoring any outside the domain. for (i = 0; i < n; ++i) { x = values[i]; if (x0 <= x && x <= x1) { bins[bisect(tz, x, 0, m)].push(data[i]); } } 。

我可以看到您写了“我不想使用条形图，该实验的全部目的是学习如何使用d3直方图” 。在这种情况下，请选择正确数据，即选择具有连续变量的数据集。

条形图的解决方案：

所有这些，放弃直方图生成器并创建一个好的旧条形图。为此，您所需要做的就是操纵游览数据。例如，让我们使用Array.prototype.reduce和x0 <= x && x <= x1和colour创建对象数组。

假设此数据数组：

count

我们可以这样操作：

const colors = ['red', 'green', 'blue', 'red', 'red', 'green', 'yellow', 'pink', 'red', 'green', 'yellow', 'pink', 'pink', 'green', 'blue', 'green', 'blue', 'green', 'green', 'green', 'green'];

现在，您可以使用此数据数组创建条形图，将const colors = [ 'red', 'green', 'blue', 'red', 'red', 'green', 'yellow', 'pink', 'red', 'green', 'yellow', 'pink', 'pink', 'green', 'blue', 'green', 'blue', 'green', 'green', 'green', 'green' ]; const data = colors.reduce((acc, curr) => { const foundObject = acc.find(e => e.colour === curr); if (foundObject) ++foundObject.count; else acc.push({ colour: curr, count: 1 }); return acc; }, []); console.log(data)作为colours轴上的分类变量，并将x作为{{1 }}轴。