dcjs动态缩放以适合值范围

elasticX 是一个非常简单的功能，几乎可以执行您的代码，尽管它根据数据是正数还是负数将最小值或最大值锁定为零：

        var extent = d3.extent(_rowData, _chart.cappedValueAccessor);
        if (extent[0] > 0) {
            extent[0] = 0;
        }
        if (extent[1] < 0) {
            extent[1] = 0;
        }

（calculateAxisScale源）

在每次渲染和重绘之前，都会（间接）调用此代码。

这是一些通用建议，用于何时elasticX或elasticY不完全按照您的要求进行操作。我从未见过失败！（这是在诸如dc.js这样的古怪代码库中说的。）

首先，禁用elasticX。然后创建一个计算X域并对其进行设置的函数：

function custom_elastic(chart) {
  var max = chart.dimension().top[1][0].value;
  var min = chart.dimension().top(10)[9].value;
  chart.x().domain([min,max]);
}

为了普遍起见，我已经在图表上对其进行了参数化。

现在我们可以在preRender和preRedraw事件上调用此函数。这些事件在触发时将通过图表：

chart.on('preRender', custom_elastic)
     .on('preRedraw', custom_elastic);

那应该做到的！

顺便说一句，您可能不想设置刻度范围-它是由图表自动设置的，并且比起您要设置的要复杂一些，因为它考虑了边距。

调试最小和最大

看着你的小提琴，我意识到我没有再看你如何计算最小和最大。

我也没有注意到您的范围从-100开始。

良好的第一步，将其记录下来；它报告

min: 0.81, max: 0.82

这是不正确的。前十名从0.96到1。

问题是维度的键是id，因此返回的行的.top()字母顺序相反（“最大”字符串）。

再次，您在正确的道路上

console.log(Group.top(Infinity))

是! 该小组将按值列出前10名。

var top10 = thischart.group().top(10);
var max = top10[0].value;
var min = top10[9].value;

真好！

小提琴

但是，等等，看起来条形图在图表的左侧延伸了吗？

用renderlet破坏行图以从左边缘开始绘制条形

好的，现在很清楚，行图不支持此功能。这是一种将条形调整到左侧边缘的技巧：

chart.on('renderlet', function(chart) {
    var transform = chart.select('g.row rect').attr('transform');
    var tx = +transform.split('(')[1].split(',')[0];
    chart.selectAll('g.row rect')
        .attr('transform', null)
        .attr('width', function(d) {
            return +d3.select(this).attr('width') + tx;
        })
    chart.selectAll('g.row text.row')
        .attr('transform', null);    
})

所有行rect将被一个较大的负数抵消，这是我们首先在中获取的tx。然后，我们transform从矩形和文本中都删除，并增加到tx矩形行的宽度。

小提琴

大！但是最后一个酒吧在哪里？好吧，我们采用了最小值和最大值的前十个值，因此第十个小节是最小值。

您必须找出最适合自己的方法，但是我发现查看前20个值会使前10个值保持良好状态：

var N = 20;
var topN = thischart.group().top(N);
var max = topN[0].value;
var min = topN[N-1].value;

最后的小提琴

该技巧不适用于内置过渡，因此我在此图表中将其关闭：

chart.transitionDuration(0)

破解该部分将需要做更多的工作，并且最好在图表本身中进行修复。