C3js：如何隐藏y轴上的刻度线？ Y轴标签被切断

Question

如何隐藏y轴上的刻度？

我目前通过编辑tick.format来实现它，正如在此JSFiddle http://jsfiddle.net/DanielApt/bq17Lp02/1/

中可以看到的那样

我对此解决方案不满意，因为y轴标签正在被切断

那么如何在不切断y轴标签的情况下隐藏刻度？

提前感谢您的帮助！

Answer 1

1）尝试将axis.y.tick.count设置为1，这样除了顶部和底部之外不会显示任何刻度。

2）或者尝试使用CSS来获得除了顶部和底部之外的所有中间刻度线： -

.c3-axis-y .tick {
   display: none;
}

如果轴标签定位是个问题，请尝试将其放置在其他位置，例如： -

axis: {
    x: {
        label: {
            text: 'X Label',
            position: 'outer-center'
            // inner-right : default
            // inner-center
            // inner-left
            // outer-right
            // outer-center
            // outer-left
        }
    },

以下是工作代码： - http://jsfiddle.net/chetanbh/24jkmvL5/

参考网址：http://c3js.org/samples/axes_label_position.html

Answer 2

最后，我结合使用Chetan的答案和一些进一步的工作：

我用以下方法隐藏了蜱：

.c3-axis-y .tick {
   display: none;
}

我设置了刻度格式：

axis.y.tick.format = function(){return 'fy'; }
//return characters with both ascenders and descenders

请参阅此JS Fiddle http://jsfiddle.net/DanielApt/etuwo8mz/1/了解解决方案。

Answer 3

如果有人仍然需要它，我会把它放在onrendered回调中以避免影响所有图表：

onrendered: function() {
      d3.select("#myChartContainer").selectAll(".c3-axis-x .tick line").style("display", "none");
}