c3js - X轴位于图表中间

Question

是否可以将X轴放在图形的中间？
当Y值为负值和正值时 - X轴为0值 让我们说类似于这个图像

Answer 1

将C3 x轴定位在所需y值

<击>

<击>

方法1

<击> 请注意，如果您有.load()，此方法将无法运行 - 请参阅方法2。 <击>

<击>

您可以覆盖图表的getTranslate功能来执行此操作，如此

// get the original translate function
var originalTranslate = chart.internal.getTranslate;
chart.internal.getTranslate = function (target) {
    // if we are drawing the x axis
    if (target === 'x')
        // use the y scale to get the y position
        return "translate(" + 0 + "," + this.y(0) + ")"
    else
        // otherwise just call the original function
        return originalTranslate.apply(this, [ target ]);
}
// redraw
chart.flush();

其中图表是您的C3图表对象

小提琴 - http://jsfiddle.net/3zpyu0yx/

<击>

方法2

方法1在数据更改时无法工作 - 因为c3存储转换（包括轴的转换）并在重绘时使用它们。所以它永远不会为新数据调用我们更新的getTranslate位置，我们会停留一个动画，将比例定位在原始数据集的0位置。

解决此问题的一种方法是等待转换完成，然后手动转换我们的轴。或者更好的是我们可以更新x轴的过渡，如o

// select the x axis
d3.select(chart.element).select('.' + c3.chart.internal.fn.CLASS.axisX).transition()
    // and translate it to the y = 0 position
    .attr('transform', "translate(" + 0 + "," + chart.internal.y(0) + ")")

其中chart是C3图表对象。

您需要更新图表轴时调用此方法。对于.load()，这将在done回调中。

小提琴 - http://jsfiddle.net/1hrd9g3k/