Javascript C3JS-在图表中间有X轴

将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图表对象

---

小提琴-

方法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

回调中

---

小提琴-

---

---

哇！这太可怕了。我能再麻烦你一些吗（因为这对我来说有点黑箱操作）。该图是一个具有2个y轴的线形图-我希望该线与左侧y 0（y而不是y2）对齐。请您更改答案以适应此情况吗？删除前面的注释-我真正的问题-如果我更改数据并调用.load（），我应该如何操作？它搞砸了…@Boaz-updated fiddle。干杯不管怎样，还是选择第二个选项吧——它要简单得多。我只是保留了第一个答案，因为我不想完全改变答案。当你切换图例时，这不起作用。有办法吗？