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

Not able to render a series chart using data outside the dimension object

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

{
    "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();

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

在dc.js和crossfilter中,X轴通常是分组数据的"keys",Y轴是计数(或其他聚合)。

如果您的每个密钥都是唯一的并且您做到了

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

然后它会把一个值加起来return给你。所以你的键 (X) 将是 place1,place2 而你的值将是 foo.

然后您可以使用 seriesAccessorkeyAccessor 将键分开,如您链接的示例所示。

工具提示称为 "titles" in dc.js, after the HTML/SVG element which implements them. You can format your text however you want in the accessor, including line breaks. The annotated stock example shows this in action

警告

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

学习另一个图表库可能会更容易,因为您没有使用任何使 dc.js 变得特别的功能。