Y 축의 고유 카운트와 X 축의 범주로 기본 표시 줄 차트를 만들 수 있습니까?

Question

X 축에 'type'이있는 기본 막대 차트와 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

여기에 몇 가지 문제가 있습니다.

첫째, 당신이 집계하는 데이터에 NANS를 가지고 있으므로 YDimension을

와 같은 것으로 변경해야합니다.

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

.

CrossFilter를 올바르게 합산하십시오.

실제 대답은 x 규모에 관한 것입니다. 당신은 현재 하나를 포함하고 있지는 않지만, 당신이 말하는 것과 같지는 것입니다 서수 척도 . 서수 비늘은 일반적으로 막대 차트에 대해 생각하는 저울입니다. 그들은 이산 도메인이있는 유형의 규모입니다. 이 경우 다음과 같이 서수 규모를 추가 할 수 있습니다 :

.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())

.