javascript - 如何在 dc.js 的行图中创建目标线

Question

我正在使用行图来显示推销员按商品列出的销售总额。

已经像谷歌的许多帖子一样尝试了复合图表，但没有成功，但没有一个示例使用行图。

我需要像图片一样，创建红线来代表每件商品的销售值(value)目标，但我不知道该怎么做，你们能帮我吗？谢谢!

实际上这是我绘制行图的代码

spenderRowChart = dc.rowChart("#chart-row-spenders");        

spenderRowChart
    .width(450).height(200)
    .dimension(itemDim)
    .group(totalItemGroup)
    .elasticX(true);

Answer 1

谢谢，由于花了很长时间才得到答案，我已经开发了一个解决方案，但是，真的谢谢你，它非常好，因为它几乎是相同的想法，所以我认为在这里分享代码也很好.

不同之处在于我的代码中，我使用其他逻辑来清除笔划，并使用其他图表的过滤器值使其动态化。

    .renderlet(function(chart) {
        dc.events.trigger(function() {
            filter1 = yearRingChart.filters();
            filter2 = spenderRowChart.filters();
        });
    })

    .on('pretransition', function(chart) {
        if (aux_path.length > 0){
            for (i = 0; i < aux_path.length; i++){
                aux_path[i].remove();
            }
        };

        aux_data = JSON.parse(JSON.stringify(data2));
        aux_data = aux_data.filter(venda => filter1.indexOf(venda.Nome) > -1);

        meta_subgrupo = [];
        aux_data.forEach(function(o) {
            var existing = meta_subgrupo.filter(function(i) { return i.SubGrupo === o.SubGrupo })[0];
            if (!existing)
                meta_subgrupo.push(o);
            else
                existing.Meta += o.Meta;
        });
        
        if (filter1.length > 0) {
            for (i = 0; (i < Object.keys(subGrupos).length); i++){                 
                var x_vert = meta_subgrupo[i].Meta;
                var extra_data = [
                    {x: chart.x()(x_vert), y: 0},
                    {x: chart.x()(x_vert), y: chart.effectiveHeight()}
                ];
                var line = d3.line()
                    .x(function(d) { return d.x; })
                    .y(function(d) { return d.y; })
                    .curve(d3.curveLinear);
                var chartBody = chart.select('g');
                var path = chartBody.selectAll('path.extra').data([extra_data]);
                path = path.enter()
                        .append('path')
                        .attr('class', 'oeExtra')
                        .attr('stroke', subGruposColors[i].Color)
                        .attr('id', 'ids')
                        .attr("stroke-width", 2)
                        .style("stroke-dasharray", ("10,3"))
                    .merge(path)
                path.attr('d', line);
                aux_path.push(path);
            }  
        }
})

这就是它的样子