Как создать базовую гистограмму с уникальным счетчиком по оси y и категорию по оси x?

Question

Я хотел бы создать базовую гистограмму с «типом» по оси х и уникальным счетчиком по оси y. Я не могу найти пример с типом на оси х (даже не в учебнике)

У меня есть следующий код:

<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

У вас здесь несколько вопросов.

Во-первых, у вас есть в пренебрежимо малых данных, которые вы агрегационной, так что вам нужно изменить YDimension к чему-то вроде

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

получить Crossfilter подвести его правильно.

Фактический ответ, однако, касается вашей шкалы x. В настоящее время вы просто не включаете один, но похоже, что вы говорите о Ordinal Scale. Ординарные шкалы - это шкалы, которые вы обычно думаете для гистограмм; это тип масштаба, который имеет дискретный домен. В этом случае вы можете попытаться добавить порядковый масштаб следующим образом:

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