Question

我正在尝试显示日期为xAxis的堆积条形图。它按运动类型显示运动次数。想法是在特定时间范围内显示的会话数。例如，对于最近4周，将显示每天的会话数，对于过去12周，将显示每周的会话数。

这些值正在被计算并很好地显示。问题是它们显示为1px宽的条，而不是自动计算的“宽”条宽。

如果有人对如何解决此类问题有想法...请帮助！

数据的结构如下。我只显示有关数据

const sessions_summary = [
  {
    activity_name: 'regular_biking',
    date_time: '2020-03-18T15:57:47.853Z',
    // ...
  },
  {
    activity_name: 'swimming',
    date_time: '2020-03-18T15:57:47.853Z'
  },
  {
    activity_name: 'running',
    date_time: '2020-03-19T15:57:47.853Z'
  },
  // ...
];

交叉过滤器：

const ndx = crossfilter(sessions_summary);
const Dimension = ndx.dimension(function(d) {
  return d3.timeDay(new Date(d.date_time));
});

缩放时间：

const today = new Date(new Date().toDateString());
const minDate = d3.timeDay(
  new Date(
    new Date().setDate(
      today.getDate() - parseFloat(timeranges[timerange_name]) // 7 or 30 or 90 or 180 or 360 : number of days, depends on the interval selected in Select Entry
    )
  )
);
let maxDate = d3.timeDay(today);
maxDate = d3.timeDay.offset(maxDate, 1);
const scaletime = d3.scaleTime().domain([minDate, maxDate]);
Chart.x(scaletime);

const interval = intervals[timerange_name]; //  d3.timeDay or d3.timeWeek or d3.timeMonth, depending on the choice made in Select Entry
Chart.xUnits(interval);

组：

const types = [...new Set(sessions_summary.map(session => session.type))];
Group = Dimension.group(function(k) {
  return interval(k);
}).reduce(
  function(p, v) {
    if (v.type in p.types) {
    p.types[v.type]++;
    } else {
    p.types[v.type] = 1;
    }
    return p;
  },
  function(p, v) {
    p.types[v.type]--;
    if (p.types[v.type] === 0) {
    delete p.types[v.type];
    }
    return p;
  },
  function() {
    return {
    types: {}
    };
  }
);
Chart.group(Group, types[0], sel_stack(types[0])).render();
for (let i = 1; i < types.length; i++) {
  Chart.stack(Group, types[i], sel_stack(types[i]));
}

条形图：

const Chart = dc.barChart('#sessions_chart');
Chart.width(968)
  .height(240)
  .elasticY(true)
  .margins({
    left: 40,
    top: 10,
    right: 20,
    bottom: 40
  })
  .gap(5)
  .centerBar(true)
  .round(d3.timeDay.round)
  .alwaysUseRounding(true)
  .xUnits(d3.timeDays)
  .brushOn(false)
  .renderHorizontalGridLines(true)
  .renderVerticalGridLines(false)
  .dimension(Dimension)
  .title(d => {
    return (
      'Date: ' +
      new Date(d.key).toDateString() +
      '\n' +
      'Sessions: ' +
      Object.keys(d.value.types)
    );
  });

Chart.legend(
  dc
    .legend()
    .x(40)
    .y(465)
    .gap(10)
    .horizontal(true)
    .autoItemWidth(true)
);
Chart.render();

完整代码可在JSFiddle上找到

预先感谢

[已解决]

问题是双重xUnits和错误使用d3.TimeDay而不是d3.TimeDays。

条形图显示的是线条（细条）而不是条[已解决]

0 个答案: