web-dev-qa-db-ja.com

棒グラフのx軸に順序尺度（ 'd3.scale.ordinal'）を使用する

私はこのようなデータ配列を持っています：

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の値をフェッチし、それらの値をドメインに組み込む必要があります。これどうやってするの？

javascriptd3.jsbar-chartdc.jscrossfilter
18
Arun

2つのこと：

  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() を動作させることができませんでしたが、残りは問題ありません。

34
reblace

追加する

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

問題を解決しました。

7
Arun