对条形图中的 x 轴使用序数刻度 ('d3.scale.ordinal')

Posted 2023-02-22

【中文标题】对条形图中的 x 轴使用序数刻度 (\'d3.scale.ordinal\')

【英文标题】：Using an ordinal scale ('d3.scale.ordinal') for the x-axis in a bar chart对条形图中的 x 轴使用序数刻度 ('d3.scale.ordinal')

【发布时间】：2013-09-15 13:11:18

【问题描述】：

我有一个这样的数据数组：

var data = ["Alphabet_Type":"a", "Alphabet_Type":"b", "Alphabet_Type":"a"];

我正在使用：

dc.js crossfilter.js d3.js

我想创建一个条形图：

具有字母名称的 x 轴，以及 y 轴的字母出现次数。

问题：如何在 x 轴上绘制具有序数刻度的条形图？

我的代码：

var data = ["Alphabet_Type":"a", "Alphabet_Type":"b", "Alphabet_Type":"a"];

var Filter = crossfilter(data);
var Dimension = Filter.dimension(function (d)  return d.Alphabet_Type; );
var Group = Dimension.group();

dc.barChart("#bar-chart")
    .width(800) 
    .height(275) 
    .transitionDuration(0) 
    .margins( top: 10, right: 50, bottom: 30, left: 40 )
    .dimension(Dimension) 
    .group(Group) 
    .elasticY(false)
    .elasticX(false)
    .x(d3.scale.linear().domain([-1, 10]))
    .y(d3.scale.linear().domain([0, 5]))
    .centerBar(true)
    .renderHorizontalGridLines(true)
    .renderVerticalGridLines(true)
    .brushOn(false);

最后，我还有一个问题是Alphabet_Type 不会有可预测的值。所以我需要通过 crossfilter.js 获取Alphabet_Type 的值并将这些值合并到域中。我该怎么做？

【参考方案1】：

两件事：

将dc.units.ordinal 作为参数传递给.xUnits()。 将序数比例函数传递给.x()。

这就是我的意思：

.x(d3.scale.ordinal().domain(["", "a", "b", "c"])) // Need empty val to offset first value
.xUnits(dc.units.ordinal) // Tell dc.js that we're using an ordinal x-axis

查看这个 JSFiddle：http://jsfiddle.net/reblace/tbamW/156/

由于某种原因，我无法让renderHorizontalGridLines() 或renderVerticalGridLines() 工作，但其余的都很好。

【讨论】：

感谢@reblace 的回答。它运作良好。我已经编辑了我的问题。请帮助我。因为我是 dc 新手，所以我不知道如何实施。

我得到了我添加的问题的答案。现在如何使用函数添加一个“”（空白字符串），就像你在 thje 域中添加的一样。

.xUnits() 部分是缺失的部分，这让我花了很多时间。谢谢，终于成功了。

.xUnits() 部分是缺失的部分，这让我花了很多时间。谢谢，终于成功了。确切地！！！！！！！！！！！！！！！！ .xUnits(dc.units.ordinal) // 告诉 Dc.js 我们正在使用序数 x 轴

在 dc.js 2.0 及更高版本中自动计算序数 x 尺度的域。

【参考方案2】：

添加

.x(d3.scale.ordinal().domain(data.map(function (d) return d.Alphabet_Type; )))

解决了问题。