在条形图中为x轴使用ordinal scale（'d3.scale.ordinal'） [英] Using an ordinal scale ('d3.scale.ordinal') for the x-axis in a bar chart

问题描述

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

I have a data array like this:

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

我正在使用：

• dc.js


• crossfilter.js


• d3.js

我要用以下方法创建条形图：

• 轴具有字母表名称，


• y轴具有字母表的出现次数。

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

Question: How can I plot a bar chart with an ordinal scale on the x-axis?

我的代码：

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 的值，并将这些值合并到域中。

Finally, I have another problem which is that Alphabet_Type is not going to have predictable values. So I need to fetch the values for Alphabet_Type via crossfilter.js and incorporate those values into the domain. How can I do this?

推荐答案

有两件事：

1. 通过 dc.units.ordinal 作为 .xUnits（） 。


2. 将序数函数传递给 .x（） 。

1. Pass dc.units.ordinal as the parameter to .xUnits().
2. Pass an ordinal scale function to .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/

See this JSFiddle: http://jsfiddle.net/reblace/tbamW/156/

由于某些原因，我无法获取 renderHorizo​​ntalGridLines（） 或 renderVerticalGridLines（） 工作， 。

For some reason, I couldn't get renderHorizontalGridLines() or renderVerticalGridLines() to work, but the rest is good.

这篇关于在条形图中为x轴使用ordinal scale（'d3.scale.ordinal'）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！