21

Вопрос по dc.js, d3.js, crossfilter, javascript – Правильно отобразить ширину корзины в barChart, используя dc.js и crossfilter.js

создание гистограммы с использованием библиотеки JavaScript Dimensional Chartingdc.js, который основан на d3 и crossfilter.

Все, что я хочу сделать, это отобразить гистограмму с указанным количеством бинов, это должно быть легко с помощьюbarChart функция.

У меня есть массив под названиемdata который содержит значения с плавающей точкой от 0 до 90000, и я просто хочу отобразить распределение с помощью гистограммы с 10 бинами.

Я использую следующий код для создания гистограммы ниже:

  var cf = crossfilter(data);
  var dim = cf.dimension(function(d){ return d[attribute.name]; });

  var n_bins = 10;
  var xExtent = d3.extent(data, function(d) { return d[attribute.name]; });
  var binWidth = (xExtent[1] - xExtent[0]) / n_bins;
  grp = dim.group(function(d){return Math.floor(d / binWidth) * binWidth;});
  chart = dc.barChart("#" + id_name);
  chart.width(200)
    .height(180)
    .margins({top: 15, right: 10, bottom: 20, left: 40})
    .dimension(dim)
    .group(grp)
    .round(Math.floor)
    .centerBar(false)
    .x(d3.scale.linear().domain(xExtent).range([0,n_bins]))
    .elasticY(true)
    .xAxis()
    .ticks(4);

Это недействительно выглядит правильно: каждый бар действительно тощий! Мне нужна нормально выглядящая гистограмма, где столбцы толстые и почти соприкасаются друг с другом, возможно, с несколькими пикселями отступов между столбцами. Любая идея, что яя делаю неправильно?

2ответа

3

предложение, данное пользователем2129903 использоватьchart.xUnits() указать кастомxUnits функция действительно путь. Я'Я хотел бы добавить к этому пример и немного объяснения, как выбрать возвращаемое значение этой пользовательской функции.

Док говорит:

Ожидается, что эта функция вернет массив Javascript всех точек данных на оси x или количество точек на оси.

То есть, предполагая, что вы хотите создать гистограмму, вы можете либо напрямую указать количество бинов, либо рассчитать его по желаемому размеру бинов и вернуть его из этой функции. Вы должны указать это, когда числовые ключи вашей группировки не являются последовательными, равноотстоящими целыми числами.

Вот пример:



    
    
    
    


    

Обратите внимание, что в этом примере он также может работать, чтобы получить количество корзин или корзин значения ключа из самого объекта группы, например, вот так

// number of bins
chart.xUnits(function(){return x_grouped.all().length;});
// bins' key values
chart.xUnits(function(){return x_grouped.all().map(function(d) {return d.key;});});

Это, однако, не удастся (т. Е. Приведет к неправильной ширине стержня), когда есть пустые лотки.

Для справки:

29

Гистограммы в dc.js используютфункция xUnits чтобы автоматически рассчитать ширину столбцов в гистограмме на основе диапазона вашей оси X. Если вы хотите установить ширину в статическое значение, вы можете использовать пользовательскую функцию xUnits, например:

chart.xUnits(function(){return 10;});

Это должно дать вам более подходящую ширину.

RelatedQuestions