How to make columns wide (not pencil-thin) on dc BarChart with time x-axis

问题

I have a barchart set-up as follows:

function makeGraphs(recordsJson, factorText) {

// Clean data
var records = jQuery.parseJSON(recordsJson);

let parseDate = d3.timeParse("%Y-%m-%d");
records.forEach(function(d) {
    d.date = parseDate(d.date);
    d.factor = d.factor == true ? 1 : 0;
});

// Create a Crossfilter instance
var ndx = crossfilter(records);

// Define Dimensions
var dateDim = ndx.dimension(d => d.date);

// Group Data
var dateGroup = dateDim.group();
var factorGroup = dateDim.group().reduceSum(dc.pluck('factor'));
var all = ndx.groupAll();

// Define values (to be used in charts)
var minDate = dateDim.bottom(1)[0]["date"];
var maxDate = dateDim.top(1)[0]["date"];

// Chart
const timeChart = new dc.CompositeChart("#time_chart");

timeChart
    .height(300)
    .x(d3.scaleTime().domain([minDate,maxDate]))
    .yAxisLabel("Number of Lines")
    .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
    .renderHorizontalGridLines(true)
    .compose([
        new dc.LineChart(timeChart)
            .dimension(dateDim)
            .colors('blue')
            .group(dateGroup, "Total")
            .curve(d3.curveLinear),
        new dc.BarChart(timeChart)
            .dimension(dateDim)
            .colors('red')
            .centerBar(true)
            .gap(1)
            .alwaysUseRounding(true)
            .group(factorGroup, factorText)
            .xUnits(d3.timeDays)
        ])
    .brushOn(false)
    .render();

The barchart is always displayed with pencil-thin columns, representing correctly the count of 'factor' items in that date. This occurs no matter the size of day range I apply. I have tried .xUnits(d3.timeWeeks) to see if it can be made to display better, to no avail (actually, it still displays daily totals, suggesting I need to construct an aggregate function). However, I really need daily counts.

回答1:

As advised by Gordon, a CompositeChart needs to have its .xUnit property defined in the main chart section, not under one of its sub-chart types:

timeChart
  .height(300)
  .x(d3.scaleTime().domain([minDate,maxDate]))
  .yAxisLabel("Number of Lines")
  .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
  .renderHorizontalGridLines(true)
  .xUnits(d3.timeDays)
  .compose([
    new dc.LineChart(timeChart)
      .dimension(dateDim)
      .colors('blue')
      .group(dateGroup, "Total")
      .curve(d3.curveLinear),
    new dc.BarChart(timeChart)
      .dimension(dateDim)
      .colors('red')
      .centerBar(true)
      .gap(1)
      .alwaysUseRounding(true)
      .group(factorGroup, factorText)
    ])
.brushOn(false)
.render();

The bar-chart component then displays with a proper width.

来源：https://stackoverflow.com/questions/62783313/how-to-make-columns-wide-not-pencil-thin-on-dc-barchart-with-time-x-axis

标签

dc.js