javascript - c3js - 在图表中间有 X 轴

Question

X轴可以放在图的中间吗？
当 Y 值同时为负值和正值时 - 并且 X 轴位于 0 值
让我们说类似于这张图片

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

---

fiddle - http://jsfiddle.net/3zpyu0yx/

<罢工>

方法二

方法 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) + ")")

其中图表是 C3 图表对象。

当您需要图表轴更新时调用它。对于 .load() , 那将在 done 内回调。

---

fiddle - http://jsfiddle.net/1hrd9g3k/

---