C3.js将折线图Y轴的标签位置更改为Y轴的中心答案

【问题标题】：C3.js change label position of Line Chart Y axis to center up of Y axisC3.js将折线图Y轴的标签位置更改为Y轴的中心
【发布时间】：2017-07-17 10:14:56
【问题描述】：

我需要在Y轴上更改Y轴的标签位置，目前的六个位置选项不能满足我的场景，我也尝试用d3自定义它但仍然没有运气。

我创建了一个plnkr 演示，并在github 中提交了一个问题。

  var chart = c3.generate({ 
  data: {
      columns: [
          ['data', 30, 200, 100, 400, 150, 250]
      ]
  },
  axis: {
      y: {
          label: {
              text: 'Y Axis Label',
              position: 'outer-top'
          } 
      }
   }
 });

有人知道怎么做吗？

非常感谢。

【问题讨论】：

标签： d3.js c3.js

【解决方案1】：

和你说的不同，你可以用 D3 自定义它。只需选择标签（按类别）并设置transform：

d3.select(".c3-axis-y-label").attr("transform", "translate(25,30)")

这里是演示：

// Code goes here
(function() {

  var chart = c3.generate({
    padding: {
      top: 10
    },
    data: {
      columns: [
        ['data', 30, 200, 100, 400, 150, 250]
      ]
    },
    axis: {
      y: {
        label: {
          text: 'Y Axis Label',
          position: 'outer-top'
        }
      }
    }
  });

  d3.select(".c3-axis-y-label").attr("transform", "translate(25,30)")


})();

<head>
  <link rel="stylesheet" href="https://unpkg.com/c3@0.4.14/c3.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://unpkg.com/d3@3.5.6/d3.js"></script>
  <script src="https://unpkg.com/c3@0.4.14/c3.js"></script>
</head>

<body>
  <div id="chart"></div>
  <script src="script.js"></script>
</body>

【讨论】：