c3.js:axis-y标签重叠

时间:2017-07-18 11:17:02

标签: d3.js c3.js

由于我的特殊要求,我自定义在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)");

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



// 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>
&#13;
&#13;
&#13;

有谁知道如何解决它?

非常感谢。

1 个答案:

答案 0 :(得分: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;
&#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;
&#13;
&#13;