c3.js: 轴-y 标签重叠

Question

因为我的特殊要求，我在y轴上自定义更改了y轴的标签，见。

回答者解决了我的问题，但后来我又遇到了一个问题。我尝试了几种方法，但仍然没有成功。

问题：标签太长会重叠，看plnkr演示。

var chart = c3.generate({ 
  padding: {
    top: 10
  },
  data: {
      columns: [
          ['data', 30, 200, 100, 400, 150, 250]
      ]
  },
  axis: {
      y: {
          label: {
              text: 'Y Axis Label Something Else Blah! Blah! Blah!',
              position: 'inner-top'
          } 
      }
  }
});
d3.select(".c3-axis-y-label").attr("transform", "translate(26,-16)");

============================================= ==============================

// 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 Something Else Blah! Blah! Blah!',
                  position: 'inner-top'
              } 
          }
      }
  });
  
  d3.select(".c3-axis-y-label").attr("transform", "translate(26,-16)");
  
})();

/* Styles go here */

#chart {
  margin: 40px;
}

<!DOCTYPE html>
<html>
  <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>
</html>

有谁知道怎么解决的吗？

非常感谢。

Answer 1

首先，删除该轴中的 clip-path：

d3.select(".c3-axis-y").attr("clip-path", null)

然后，将 text-anchor 设置为 start:

d3.select(".c3-axis-y-label")
    .style("text-anchor", "start")
    .attr("transform", "translate(0,-16)");

这是您的代码，其中包含更改：

// 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 Something Else Blah! Blah! Blah!',
                  position: 'inner-top'
              } 
          }
      }
  });
  
  d3.select(".c3-axis-y").attr("clip-path", null)
  
  d3.select(".c3-axis-y-label")
  .style("text-anchor", "start")
  .attr("transform", "translate(0,-16)");
  
})();

/* Styles go here */

#chart {
  margin: 40px;
}

<!DOCTYPE html>
<html>
  <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>
</html>

c3.js: 轴-y 标签重叠

c3.js: axis-y label overlapped

d3.js

c3.js