javascript - 无法使用维度对象外部的数据呈现系列图表

Question

我有一个具有以下架构的数据集:

{
    "time": Date,
    "foo": Number,
    "bar": Number,
    "change": Number
    "place1": String,
    "description": String,
    "place2": String
}

我想绘制一个系列图表，将 place1 和 place2 分组在一起，将时间显示为 x 数据，将 foo 显示为 y 数据以及工具提示中的其他字段。
看看这个example我做的第一件事是创建一个维度并使用 place1 和 place2 对数据集进行分组。

const placeDimension = ndx.dimension((d) => [d.place1, d.place2]);

之后我创建了一个组，因为我想显示没有聚合的数据，所以我只使用了组函数:

const placeGroup = placeDimension.group();

从这一点开始，我对如何使用之前创建的两个对象来绘制系列图表感到困惑。
如何选择要在 X 轴和 Y 轴上绘制的属性？ (在这种情况下，X 的时间和 Y 的 foo？)。 如何在工具提示中显示其他属性？ (我知道如何使用工具提示，但我不知道如何使用不在维度内的数据)。

Answer 1

在 dc.js 和 crossfilter 中，X 轴通常是分组数据的“键”，Y 轴是计数(或其他聚合)。

如果您的每个 key 都是唯一的并且您这样做了

const placeGroup = placeDimension.group().reduceSum(d => d.foo)

然后它会总结一个值并返回给你。所以你的键 (X) 将是 place1,place2 而你的值将是 foo。

然后你可以使用seriesAccessor和 keyAccessor 将键分开，如您链接的示例所示。

工具提示称为 "titles"在 dc.js 中，在实现它们的 HTML/SVG 元素之后。您可以根据需要在访问器中设置文本格式，包括换行符。带注释的股票示例 shows this in action .

警告

综上所述，将 dc.js 用于未聚合数据的理由并不多。该库仅在通过过滤图表进行交互时才会发光，并且只有在使用交叉过滤器聚合数据时过滤才会起作用。

学习另一个图表库可能会更容易，因为您没有使用任何使 dc.js 与众不同的功能。