【问题标题】：c3js - having the X axis in the middle of the chartc3js - 在图表中间有 X 轴
【发布时间】：2015-09-06 20:19:34
【问题描述】：

是否可以将 X 轴放在图的中间？
当 Y 值为负值和正值时 - X 轴位于 0 值上
可以说类似于这张图片

【问题讨论】：

标签： javascript c3.js

【解决方案1】：

将 C3 x 轴定位在所需的 y 值处

罢工>

方法一

请注意，如果您有 .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();

chart 是您的 C3 图表对象

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

方法二

当数据发生变化时，方法 1 将不起作用 - 因为 c3 存储了转换（包括轴的转换）并在重绘时使用它们。所以它永远不会为新数据调用我们更新的getTranslate 位置，并且我们被一个动画困住了，该动画将比例定位在 original 数据集的 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/

【讨论】：

哇！这太棒了。我能再麻烦你一些吗（因为这对我来说有点黑匣子）。该图是具有 2 y 轴的折线图 - 我希望该线与左侧对齐 y 0（y 而不是 y2）您能否更改答案以适应这个？
删除之前的评论——我真正的问题——如果我要更改数据并调用 .load()，我应该怎么做？搞砸了……
@Boaz - 更新了小提琴。干杯!无论如何都要选择第二个选项 - 它更简单。我只保留第一个答案，因为我不想完全改变答案。
当你切换图例时这不起作用。有什么修复吗？