C3中X轴位置修改的问题

【问题标题】：Problems with X axis position modification in C3C3中X轴位置修改的问题
【发布时间】：2018-02-17 01:46:17
【问题描述】：

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

xAxis is top position photo

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

【问题讨论】：

到目前为止您尝试过什么？添加您的代码
var chart = c3.generate({ data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10 , 40, 15, 25] ], 类型: { data1: 'bar', } }, 轴: { 旋转: true } });
上面链接的代码完全一样。我想不出比这更多的东西了。我不知道怎么做。 @RealCheeseLord

标签： javascript d3.js c3.js

【解决方案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/

【讨论】：

您的代码很有帮助。这正是我发现的。