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

Question

我正在使用行图来显示销售员按项目分类的总销售额。

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

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

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

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

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

Answer 1

显然，您需要目标数据的来源，它可以是全局 map 或数据中的字段。

我创建了 an example它从全局中提取数据，但如果您的组减少提供了一个名为 target 的字段，它也会从数据中提取数据。

然后，它向每一行添加一个新的 path 元素。方便的是，这些行已经是 SVG g group elements , 所以放在那里的任何东西都已经偏移到行 rect 的左上角。

我们唯一缺少的坐标是矩形的高度，我们可以通过从现有条形之一读取它来获得它:

    var height = chart.select('g.row rect').attr('height');

然后我们选择 g 并使用通用更新模式为每个 path.target 添加一个(如果没有的话)。我们将其设置为红色，仅当我们有该行的数据时才可见，并将其从 X 0 开始，以便它像行矩形一样从左侧开始动画:

    var target = chart.selectAll('g.row')
        .selectAll('path.target').data(function(d) { return [d]; });
    target = target.enter().append('path')
        .attr('class', 'target')
        .attr('stroke', 'red')
        .attr('visibility', function(d) {
            return (d.value.target !== undefined || _targets[d.key] !== undefined) ? 'visible' : 'hidden';
        })
        .attr('d', function(d) {
            return 'M0,0 v' + height;
        }).merge(target);

最后的 .merge(target) 将这个选择合并到主选择中。

现在我们可以将所有目标线设置为动画:

    target.transition().duration(chart.transitionDuration())
        .attr('visibility', function(d) {
            return (d.value.target !== undefined || _targets[d.key] !== undefined) ? 'visible' : 'hidden';
        })
        .attr('d', function(d) {
            return 'M' + (chart.x()(d.value.target || _targets[d.key] || 0)+0.5) + ',0 v' + height;
        });

该示例没有显示，但这也将允许目标在目标发生变化或比例发生变化时动态移动。同样，如果添加/删除数据，目标也可能变得可见或不可见。