C3中X轴位置修改问题

Question

我想在用C3绘制的图形中从下往上修改x轴位置。视情况可能用到D3.

xAxis is top position photo

我指的是这个网站。 ->click here. refer site.

Answer 1

不知道 c3 api 中有什么方法可以做到这一点，但在 onrendered 函数中稍微修改一下 d3（以及一些填充）就可以完成这项工作

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ],
        types: {
            data1: 'bar',
        }
    },
    axis: {
        rotated: true,
    },
    padding: {
        top: 10,
    },
    onrendered: function () {
        var axis = d3.selectAll(".c3-axis-y");
        axis
            .attr("transform", "translate(0,0)")
            .selectAll(".tick line")
            .attr("transform", "translate(0,-6)")
        ;
        axis.selectAll(".tick text")
            .attr("transform", "translate(0,-25)")
        ;
    }
});

http://jsfiddle.net/vk6rdty1/