dc.js 中的条形图中的目标

Question

我正在使用dc.js 绘制图表，非常棒。

我目前正在尝试为每个条创建带有目标线的条形图，类似于子弹图，请参阅http://bl.ocks.org/mbostock/4061961。我只需要目标行（+值）；我可以完美地创建堆叠条。

我目前使用复合图表，其中目标是lineChart，插值设置为step-before。

 composite
        .width(768)
        .height(480)
        .x(d3.scale.linear().domain([0,20]))
        .yAxisLabel("The Y Axis")
        .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
        .renderHorizontalGridLines(true)
        .compose([
            dc.barChart(composite)
                .dimension(dim)
                .colors('red')
                .group(grp1, "Top Line"),
            dc.lineChart(composite)
                .dimension(dim)
                .colors('blue')
                .group(grp2, "Bottom Line")
                .interpolate("step-before")
            ])
        .brushOn(false)
        .render();

但是，这会产生难看的垂直线。有更好的方法吗？

Answer 1

很抱歉回答我自己的问题 :) 我目前有这个（对 dc.js 的条形图进行了一些修改，因为计算条形宽度等确实有问题:)

    composite
        .width(300)
        .height(480)
        .x(d3.scale.ordinal().domain(['01M','03M','06M','12M'] ))
        .xUnits(dc.units.ordinal)
        .compose([
            dc.barChart(composite)
            .dimension(dim)
            .group(perf , "CatA")
            .stack(local, "CatB")
            .stack(akzo , "CatC")
            .colors(d2acolors)  
            .gap(0)
            ,
            dc.barChart(composite)
            .dimension(dim)
            .padding(16)
            .group(perf , "Perf")
            .colors("black")
            .gap(0)
            ,
            dc.barChart(composite)
            .dimension(dim)
            .colors("black")
            .padding(8)
            .target(true)
            .gap(0)
            .group(dateGroup, "Target")
            .valueAccessor(function(p) {
                return targets[p.key];
            })


         ])

        .yAxisLabel("Number of vendors")
        .xAxisLabel("Inactive for")
        .legend(dc.legend().x(540).y(10))
        .colors(d2acolors)
        .render();

目标基本上也是条形图，但是条形的底部在顶部下方 5 px 处渲染，因此它变成了一条线。 'padding' 设置通过输入的像素数来减少两边的条的宽度。

我会尝试在某个地方发布我在 dc.js 的条形图中所做的更改。