Question

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

默认行为：

我还创建了一个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内的同级元素g的宽度确定的位置，并将它们固定在最后。（即它正确地对齐它们。这可能会破坏RTL语言，但我怀疑这些语言中的标签已经被破坏了。）

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

Revised fiddle.

我怀疑数据更改时仍会有工件。为了做到这一点，必须对标签进行动画处理，以便在更改时始终匹配条形宽度！否则，他们必须移出父g，以便他们的位置是绝对的，不受条宽度的影响。

dc.js rowChart，条形图从右到左

1 个答案: