dc.js гистограмма с порядковыми осями

Я делаю простую гистограмму, получая сумму дохода за год. Ниже приведен фрагмент кода построения гистограммы с использованием dc.jsdc.js гистограмма с порядковыми осями

//INITIALIZE CROSSFILTER AND RELATED DIMENSIONS/AGGREGATES 
var data = crossfilter([ 
    {revenue: 1487946,year: 2016}, 
    {revenue: 2612,year: 2016}, 
    {revenue: 2908,year: 2015}, 
    {revenue: 1648171,year: 2015 }]); 

var dimension = data.dimension(function(d) {return d.year;}); 
var group = dimension.group().reduceSum(function(d) {return d.revenue;}); 

// MAKE A DC BAR CHART 
dc.barChart("#bar-chart") 
    .dimension(dimension) 
    .group(group) 
    .x(d3.scale.ordinal().domain(dimension)) // Need the empty val to offset the first value 
    .xUnits(dc.units.ordinal) // Tell Dc.js that we're using an ordinal x axis 
    .brushOn(false) 
    .centerBar(false) 
    .gap(70); 

console.log(dc.version); 
dc.renderAll();

Ее следует отметить, что год отображается в виде порядкового для простоты.

С версии dc.js - 1.7.5, выход не был ясен:

С версией dc.js - 2.x (бета) выход был гораздо лучше:

Его невозможно использовать dc.js 2.x в настоящее время из-за другие конфликты. Любые мысли о создании диаграммы лучше с помощью dc.js 1.7.5?

Это JS Fiddle, чтобы играть! Заранее спасибо.

источник

2016-02-12 Sethu Sabarish

Добавлены комментарии в следующем скриптлете:

dc.barChart("#bar-chart") 
    .width(300) //give it a width 
    .margins({top: 10, right: 10, bottom: 20, left: 100})//give it margin left of 100 so that the y axis ticks dont cut off 
    .dimension(dimension) 
    .group(group) 
    .x(d3.scale.ordinal().domain(dimension)) // Need the empty val to offset the first value 
    .xUnits(dc.units.ordinal) // Tell Dc.js that we're using an ordinal x axis 
    .brushOn(false) 
    .centerBar(false) 
    .gap(7);//give it a gap of 7 instead of 70

рабочего код here

источник

2016-02-12 09:17:45 Cyril

Спасибо! Я тоже это понял. Но разве ось X не немного компенсирует это? В любом случае мы можем это исправить? –

Я думаю, что это основное поведение 'xUnits (dc.units.ordinal)' – Cyril

Но разве мы не видим глюка здесь? Он не должен компенсироваться. Это не компенсировалось, когда я попытался использовать dc.js 2.x. Вы тоже можете попробовать! Именно поэтому, я надеюсь на некоторое обходное решение. –

Временного ответ: Избегайте порядковые оси

Это может быть возможен глюком с использованием dc.js 1.7. 5. На данный момент мне удалось отобразить графики, обработав год как линейный масштаб и соответствующим образом обработав тики.

Позволяет открыть этот вопрос в случае, если кто-то найдет лучший ответ!

источник

2016-02-13 09:00:46

dc.js гистограмма с порядковыми осями

ответ

Смежные вопросы