如何在带有时间 x 轴的 dc BarChart 上使列变宽（不是铅笔细）

Question

我有一个条形图设置如下：

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

条形图始终以铅笔细柱显示，正确表示该日期 'factor' 项的计数。无论我申请的日期范围有多大，都会发生这种情况。我试过.xUnits(d3.timeWeeks)看能不能让它显示的更好看，没用（其实还是显示每天的总计，提示我需要构造一个聚合函数）。但是，我真的需要每日计数。

Answer 1

根据 Gordon 的建议，CompositeChart 需要在主图表部分定义其 .xUnit 属性，而不是在其子图表类型之一下：

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

然后条形图组件以适当的宽度显示。

如何在带有时间 x 轴的 dc BarChart 上使列变宽（不是铅笔细）

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

dc.js