dc.js rowChart，条子从右到左

Question

整个问题都在标题里。对于rowChart库中的dc.js，如何使条形图从右到左而不是默认行为(这正好相反)？

默认行为：

​

​

我还创建了一个jsFiddle。

Answer 1

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

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

​

​

你的小提琴叉。

编辑:最好更改valueAccessor

.valueAccessor(kv => -kv.value)

这只留下了值，因此您不必更改label函数，它保留了最大到最小的排序：

​

​

至于正确地对齐标签，这并不像听起来那么容易，因为在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的宽度确定的位置，这个位置是同一个g中的同级元素，并在最后锚定它们。(也就是说，它是对的-使它们对齐。这可能会破坏RTL语言，但我怀疑标签在这些语言中已经被打破了。)

它还在每次重新绘制的开始设置位置，以擦除图表想要放置的位置。

​

修正小提琴。

当数据发生变化时，我怀疑仍然会有工件。为了正确地做到这一点，标签必须是动画的，以便始终匹配的酒吧宽度，因为它正在改变！否则，必须将它们移出父g，以便它们的位置是绝对的，而不受条宽的影响。