dc.js 条形图 y 轴乱序

Question

我正在使用 dc.js 库设置一系列链接的可视化。除了一件小事，一切都很顺利。我正在使用一个行图来可视化从 1（最差）到 10（最好）的一系列用户评分，但是如下图所示，沿行图 y 轴的排序不正确。

评分 10 直接显示在评分 1 的下方，而它应该显示在 y 轴评分 9 之后。

这是我为此图表编写的代码：

rowChart
    .width(450)
    .height(350)
    .dimension(ratingDim)
    .group(ratingGroup)
    .elasticX(true)
    .renderLabel(true)
    .xAxis().ticks(6)
    // The line below attempts to fix the scale issue, but when included
    // it breaks the visualizations, and nothing renders.
    .y(d3.scale.linear().domain([1, 10]));

当我包含 .y(d3.scale.linear().domain([1,10])) 代码时，控制台抛出以下错误：TypeError: rowChart.width(...).height(...) ... .y is not a function。不知道该怎么做的错误。感谢您的帮助 - 在此先感谢您的阅读。

Answer 1

错误是因为行图没有使用 y 刻度。是的，很奇怪。

至于错误的排序，看起来您得到的是字典顺序（字符串）排序而不是数字排序。您没有显示维度定义，但我猜您的 csv 或 json 解析器正在返回字符串，您需要将它们转换为数字。

简洁、惯用的方法是 +:

var ratingDim = ndx.dimension(function(d) { return +d.rating; });

dc.js 条形图 y 轴乱序

dc.js row chart y-axis is out of order

crossfilter

dc.js