在条形图中使用有序刻度（'d3.scale.ordinal'）作为x轴-Java 学习之路

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

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

我在用：

dc.js
crossfilter.js
d3.js

我想创建一个 bar chart ：

具有字母名称的x轴，和
具有字母表出现次数的y轴 .

Question: 如何在x轴上绘制带有 ordinal scale 的条形图？

我的代码：

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 的值并将这些值合并到域中 . 我怎样才能做到这一点？

2 回答

34
两件事情：
- 将dc.units.ordinal作为参数传递给.xUnits() .
- 将 ordinal scale 函数传递给.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()，但其余的都很好 .
回复于 2024-05-01T13:01:10+08:00

添加

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

解决了这个问题 .

回复于 2024-05-01T13:01:10+08:00

在条形图中使用有序刻度（'d3.scale.ordinal'）作为x轴

2 回答

相关问题