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

Using an ordinal scale ('d3.scale.ordinal') for the x-axis in a bar chart

本文关键字：d3 ordinal scale 条形图      更新时间：2023-09-26

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

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

我正在使用：

  • 直流.js
  • 交叉过滤器.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不会有可预测的值。因此，我需要通过交叉过滤器获取Alphabet_Type的值.js并将这些值合并到域中。我该怎么做？

两件事：

  1. 将dc.units.ordinal作为参数传递给.xUnits() 。
  2. 将序数刻度函数传递给.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()工作，但其余的都很好。

添加

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

解决了问题。

相关文章：