对齐棒中心点（DC.JS复合图） [英] Align points in centre of bars (DC.JS composite chart)

问题描述

我有一个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（个案数）
 .rightYAxisLabel（目标密度）
 .group（grp）
 .compose （[oneWayBar，oneWayLine]）; 
  

解决方案

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

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

似乎一个解决方法是分配 ._ rangeBandPadding 1）复合图。虽然如github线程中提到的打破条尺寸，所以添加 .gap（1）和 .centerBar（true）到条形图得到一切看起来不错。

I have a dc.js composite chart that has an ordinal bar chart one and a line chart. The bar chart values are on the left y-axis and the line chart values are on the right y-axis.

Is it possible to align the data points for the line in the centre of the bars (directly above the tick-marks)?

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

解决方案

Looks like this is a known issue.

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

Seems like a workaround is to assign ._rangeBandPadding(1) the composite chart. Though as mentioned in the github thread that breaks the bar sizes, so adding .gap(1) and .centerBar(true) to the bar chart got everything looking nice.

这篇关于对齐棒中心点（DC.JS复合图）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！