C3.js 如果我更改标题的大小，图表标题会重叠

Question

当我改变折线图标题的大小时，它重叠了，x 和 y 属性不起作用。但是根据这个pull request，应该可以。

我发现是因为它在图表的 SVG 中。而且SVG的大小是通过配置控制的，改变图表的大小也解决不了

// Code goes here
(function(){
  
  var chart = c3.generate({ 
      title: {
        text: 'My Line Chart',
        y: 100
      },
      data: {
          columns: [
              ['data', 30, 200, 100, 400, 150, 250]
          ]
      },
      legend: {
          position: 'inset'
      }, 
      grid: {
        y: {
            show: true
        }
      },
      axis: {
          y: {
              label: {
                  text: 'Y Axis Label',
                  position: 'outer-top'
              } 
          }
      }
  });
  
  d3.select('#chart .c3-title')
    .style('font-size', '4em')


})();

/* 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

只需在顶部添加一个填充...

padding: {
  top: 20
}

... 并将文本的 dominant-baseline 设置为 central:

.style("dominant-baseline", "central")

或者，将其翻译下来。

这是进行了更改的代码：

// Code goes here
(function(){
  
  var chart = c3.generate({
      padding: {
      top: 20
    },
      title: {
        text: 'My Line Chart',
        y: 100
      },
      data: {
          columns: [
              ['data', 30, 200, 100, 400, 150, 250]
          ]
      },
      legend: {
          position: 'inset'
      }, 
      grid: {
        y: {
            show: true
        }
      },
      axis: {
          y: {
              label: {
                  text: 'Y Axis Label',
                  position: 'outer-top'
              } 
          }
      }
  });
  
  d3.select('#chart .c3-title')
    .style('font-size', '4em')
    .style("dominant-baseline", "central")


})();

/* 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 如果我更改标题的大小，图表标题会重叠

C3.js chart title overlapped if I change the size of title

d3.js

c3.js