Question

由于我的特殊要求，我自定义在y轴上更改y轴的标签，请参阅here。

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

问题： 如果标签太长，它会重叠，请参阅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)");

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

＆＃13;

// 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)");
  
})();

＆＃13;

/* Styles go here */

#chart {
  margin: 40px;
}

＆＃13;

<!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>

＆＃13;

有谁知道如何解决它？

非常感谢。

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)");

以下是包含更改的代码：

＆＃13;

// 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)");
  
})();

＆＃13;

/* Styles go here */

#chart {
  margin: 40px;
}

＆＃13;

<!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>

＆＃13;

c3.js：axis-y标签重叠

1 个答案: