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

我正在使用

dc.js

绘制图表，这非常棒

我目前正在尝试为每个条形图创建带有目标线的条形图，类似于项目符号图，请参阅。我只需要目标行（+值）；我可以完美地创建堆叠的钢筋

我目前使用的是一个复合图，其中目标是一个

折线图

，插值设置为

步前

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

但是，这会创建丑陋的垂直线。有更好的方法吗

---

很抱歉回答我自己的问题：）我现在有这个（对dc.js的柱状图做了一些修改，因为它在计算柱状图宽度等方面确实有问题：）

目标基本上也是条形图，但条形图的底部比顶部低5像素，因此它成为一条线。“padding”（填充）设置会根据输入的像素数减少两侧条的宽度

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

---

这是一个非常酷的视觉效果，我认为你的思路是正确的。我悬赏是因为我想不出一个好的解决办法。我的第一个想法是使用renderlet删除垂直段，但我认为这不起作用，因为svg路径必须被分成多行。@Gordon我做了更多的工作，并删除了该行（因为它在ordinals（）轴上存在排序问题）。我打包了dc.js条形图以添加一些函数。有什么好办法可以贡献这个？太好了！我很快会审查这件事，并给你赏金。同时，如果你考虑向公关公司提交公关，我将非常感激！我可能需要一段时间来合并它（因为有一些相关的更改，上面链接了讨论），但是如果你做了一个PR，那么人们很容易找到它，现在就可以尝试了。请参阅PR#692。我相信还有很大的改进空间，但至少这是一个开始：）太好了。这应该更容易做到，但这是一个很好的开始。

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