Y軸上の一意のカウントとX軸上のカテゴリを持つ基本棒グラフを作成する方法を教えてください。

Question

X軸の「タイプ」、Y軸上の固有のカウントを持つ基本棒グラフを作成します。X軸にタイプを持つ例を見つけることはできません（チュートリアルでも）

次のコードがあります。

<div id='dc-bar-chart'></div>

.

これはデータ

です

var data = [{
    date: "2011-11-14T16:17:54Z",
    quantity: 2,
    total: 190,
    tip: 100,
    type: "tab"
}, {
    date: "2011-11-14T16:20:19Z",
    quantity: 2,
    total: NaN,
    tip: 100,
    type: "tab"
}, {
    date: "2011-11-14T16:28:54Z",
    quantity: 1,
    total: 300,
    tip: 200,
    type: "visa"
}, {
    date: "2011-11-14T16:30:43Z",
    quantity: 2,
    total: 90,
    tip: 0,
    type: "tab"
}, {
    date: "2011-11-14T16:48:46Z",
    quantity: 2,
    total: 90,
    tip: 0,
    type: "tab"
}, {
    date: "2011-11-14T16:53:41Z",
    quantity: 2,
    total: 90,
    tip: 0,
    type: "tab"
}, {
    date: "2011-11-14T16:54:06Z",
    quantity: 1,
    total: NaN,
    tip: null,
    type: "cash"
}, {
    date: "2011-11-14T17:02:03Z",
    quantity: 2,
    total: 90,
    tip: 0,
    type: "tab"
}, {
    date: "2011-11-14T17:07:21Z",
    quantity: 2,
    total: 90,
    tip: 0,
    type: "tab"
}, {
    date: "2011-11-14T17:22:59Z",
    quantity: 2,
    total: 90,
    tip: 0,
    type: "tab"
}, {
    date: "2011-11-14T17:25:45Z",
    quantity: 2,
    total: 200,
    tip: null,
    type: "cash"
}, {
    date: "2011-11-14T17:29:52Z",
    quantity: 1,
    total: 200,
    tip: 100,
    type: "visa"
}];

.

これは私が持っているコードです

ndx = new crossfilter(data)

var XDimension = ndx.dimension(function (d) {return d.type;});
var YDimension = XDimension.group().reduceSum(function (d) {return d.total;});

dc.barChart("#dc-bar-chart")
    .width(480).height(150)
    .dimension(XDimension)
    .group(YDimension)
    .centerBar(true)
    .gap(56) 
});
dc.renderAll();

.

Answer 1

ここにいくつかの問題があります。

最初に、あなたが集約しているデータにNANを持っているので、

のようなものにあなたのydimensionを変更する必要があります。

var YDimension = XDimension.group().reduceSum(function (d) {return isNaN(d.total) ? 0 : d.total;});

.

クロスフィルターを適切に合計させるために。

実際の答えは、Xスケールについてです。あなたは現在1つを含まないだけでなく、あなたが話しているのかは序数スケール。序数スケールは、通常は棒グラフの場合はスケールです。それらは離散的なドメインを持つスケールの種類です。この場合は、次のような序数スケールを追加してみることができます。

.x(d3.scale.ordinal().domain(["visa", "cash", "tab"]))

.

その代わりに序数スケールを使用します。 dc.jsを使用しているので、

も指定する必要があります。

.xUnits(dc.units.ordinal)

.

序数マークを使うことを知っています。

全体、私は

を使った

dc.barChart("#dc-bar-chart")
    .width(480).height(150)
    .x(d3.scale.ordinal().domain(["visa", "cash", "tab"]))
    .xUnits(dc.units.ordinal)
    .dimension(XDimension)
    .group(YDimension)
    .centerBar(false);

.

そしてそれは私の最後にうまくいった。 DC.JSバージョンによっては、ドメインを省略してDC.JSを自動的に把握できるようにしてください。その場合は、

を使うことができます

.x(d3.scale.ordinal())

.