对齐条形中心的点（DC.JS 复合图表）答案

【问题标题】：Align points in centre of bars (DC.JS composite chart)对齐条形中心的点（DC.JS 复合图表）
【发布时间】：2015-05-24 17:35:14
【问题描述】：

我有一个 dc.js 复合图表，其中包含一个顺序条形图和一个折线图。条形图值位于左侧 y 轴，折线图值位于右侧 y 轴上。

是否可以将数据点对齐条形中心（直接在刻度线上方）？

var oneWayComposite = dc.compositeChart('#chart');


var oneWayBar = dc.barChart(oneWayComposite)
        .dimension(featureDim)
        .barPadding(1)
        .group(grp)
        // .centerBar(true)
        .valueAccessor(function(p) {return p.value.count; });


var oneWayLine = dc.lineChart(oneWayComposite)
        .dimension(featureDim)
        .group(grp)
        .colors('#000000')
        .renderArea(false)
        // .interpolate('basis')
        .useRightYAxis(true)
        .valueAccessor(function(p) {return p.value.density; });

oneWayComposite.width(width)
    .margins(mrgn)
    .height(height)
    .x(d3.scale.ordinal())
    .xUnits(dc.units.ordinal)
    .yAxisLabel("Count of Cases")
    .rightYAxisLabel("Target Density")
    .group(grp)
    .compose([oneWayBar,oneWayLine]);

【问题讨论】：

标签： d3.js charts dc.js

【解决方案1】：

看起来这是一个已知问题。

https://github.com/dc-js/dc.js/issues/662

似乎一种解决方法是分配._rangeBandPadding(1) 复合图表。虽然如 github 线程中提到的那样打破了条形大小，但在条形图中添加 .gap(1) 和 .centerBar(true) 让一切看起来都不错。

【讨论】：