DC JS：删除带有序号 x 轴的折线图的外部填充？

Question

我使用 DC JS 构建了一个带有顺序 x 轴的折线图。它有效，只是 x 轴上有一些我似乎无法摆脱的外部填充。我希望最左边和最右边的数据点与图表的边缘齐平，没有填充。希望我没有漏掉一些明显的东西。

我想我设置的 x 轴刻度不正确。给定这样的数据集：

var data = [
  { key: 'Monday', value: 3000000 },
  { key: 'Tuesday', value: 3100000 },
  { key: 'Wednesday', value: 3500000 },
  { key: 'Thursday', value: 3070000 },
  { key: 'Friday', value: 4500000 },
  { key: 'Saturday', value: 3003030 },
  { key: 'Sunday', value: 5010000 }
];

这是我在 x 轴刻度上所做的：

var ordinalScale = d3.scale.ordinal().domain(['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']).rangeRoundBands([0,chartWidth]);
chart.x(ordinalScale).xUnits(dc.units.ordinal);

我还查看了有关序数尺度的 D3 文档，但这还没有帮助。

这是一个屏幕截图（多余的填充标记为红色）： http://imgur.com/a/zmfF4

这是一个演示问题的有效 JS fiddle： https://jsfiddle.net/qvp4fpzy/4/

Answer 1

处理范围波段周围的 dc.js 和 d3.js 特征有点令人困惑。

dc.js 对 bar/line x 位置有自己的内置计算，但如果 x 尺度是有序的，它会自动选择 .rangeBands:

    if (_chart.isOrdinal()) {
        _x.rangeBands([0, _chart.xAxisLength()], _rangeBandPadding,
                      _chart._useOuterPadding() ? _outerRangeBandPadding : 0);
    } else // ...

source link

所以我认为您对 .rangeRoundBands 的调用没有任何效果。（dc.js 应该使用 rangeRoundBands 而不是 rangeBands 吗？也许吧，但这对这个问题没有影响。）

你想影响的是third parameter to rangeBands，而那是chart._outerRangeBandPadding()控制的。（忽略 chart._useOuterPadding() - 这是向后兼容的事情。）

所以你只需要

chart._outerRangeBandPadding(0);

Working fork of your fiddle.

DC JS：删除带有序号 x 轴的折线图的外部填充？

DC JS: remove outer padding for line charts with an ordinal scale x-axis?

charts

linechart

d3.js

crossfilter

dc.js