dc.js 条形图从右到左

Question

整个问题都在标题中。对于 dc.js 库中的 rowChart 如何使条形图从右向左移动而不是相反的默认行为？

默认行为：

我还创建了一个jsFiddle。

Answer 1

如果绘制负值，零轴将在右侧，条形图将向左增长。

speedSumGroup = runDimension.group().reduceSum(function(d) {
    return -d.Speed * d.Run / 1000;
});

Fork of your fiddle.

编辑：最好更改 valueAccessor:

.valueAccessor(kv => -kv.value)

这会单独保留值，因此您不必更改标签函数，它会保留从大到小的顺序：

至于右对齐标签，这并不像听起来那么容易，因为在 SVG 中，所有位置都是从右上角开始测量的。要完美地做到这一点需要对图书馆做出贡献（如果你愿意的话；），但如果你不介意在条形动画后显示标签，你可以通过观察图表上的事件来做到这一点：

var first = true;
chart.on('pretransition', function(chart) {
    if(first)
            chart.selectAll('text.row')
                .attr('visibility', 'hidden');
    else
            chart.selectAll('text.row')
            .attr('x', function(d) {
                return +d3.select(this.parentNode)
                  .select('rect').attr('width')-10;
            })
            .attr('text-anchor', 'end')

    first = false;
});
chart.on('renderlet', function(chart) {
    chart.selectAll('text.row')
        .attr('x', function(d) {
            return +d3.select(this.parentNode)
              .select('rect').attr('width')-10;
        })
        .attr('text-anchor', 'end')
        .attr('visibility', 'visible');
});

这隐藏了第一次对条形图进行动画处理，然后当它们完成时，它会将它们移动到根据 rect 的宽度确定的位置，该元素是同一 [=15= 中的同级元素]，并将它们锚定在最后。（即它右对齐它们。这可能会破坏 RTL 语言，但我怀疑标签已经在这些语言中破坏了。）

它还设置了每次后续重绘开始时的位置，以擦除图表要放置它们的位置。

Revised fiddle.

我怀疑数据变化时仍然会有伪影。为了正确地做到这一点，标签必须是动画的，以便在变化时始终匹配条形宽度！否则它们必须从父级 g 中移出，这样它们的位置是绝对的并且不受条形宽度的影响。

dc.js 条形图从右到左

dc.js rowChart with bars going from right to left

crossfilter

dc.js