c3.js折线图数据标签文本重叠

c3.js Line Chart data label text overlaps

C3折线图如果多条线重叠,线点附近的标签也重叠,不是预期的,见Plunker,在第二点,我们只看到一个 +7.3.

我的解决方案是更改 data1data2 的标签文本 xy 属性的值。它可以工作,但不优雅,任何人都有其他想法,在此非常感谢。

 labels: {
          format: function(v, id, i, j) {
              if (i && j != undefined) {
                  return d3.format('+')(arrayOfDataIncrease[j][i]);
              }
              return '';
          }
      }

// Code goes here
(function(){
  
  var arrayOfDataIncrease = [
          [0, 7.3, 6.0, 43.2, 29.0],
          [0, 7.3, 3.8, 36.5, 24.3]
      ];
  
  var chart = c3.generate({
      size: {
          width: 400
      },
      padding: {
          top: 40
      },
      data: {
          columns: [
            ['data1', 0, 7.3,  13.3, 56.5, 85.5],
          ['data2', 0, 7.3, 11.1, 47.6, 71.9]
          ],
          colors: {
              'data1': '#fd8e43',
              'data2': '#64dd16'
          },
          labels: {
              format: function(v, id, i, j) {
                  if (i && j != undefined) {
                      return d3.format('+')(arrayOfDataIncrease[j][i]);
                  }
                  return '';
              }
          }
      },
      // https://github.com/c3js/c3/issues/1033
      legend: {
        show: true,
        position: 'inset',
        padding: 5,  // amount of padding to put between each legend element
        inset: {
          anchor: 'top-left',
          x: 20,
          y: -40,
          step: 1
        },
        item: {  // define custom height and width for the legend item tile
            tile: {
                width: 15,
                height: 15
            }
        }
      },
      grid: {
          y: {
              show: true
          }
      },
      axis: {
          x: {
              type: 'category',
              categories: ['', '2014', '2015', '2016', '2017'],
              padding: {left: -0.5, right: 0}
          },
          y: {
              tick: {
                  format: d3.format(',.1f')
              },
              padding: {top: 50, bottom: 0}
          }
      },
      tooltip: {
        show: false
      },
      onrendered: function() {
        // hide y scale line
       d3.selectAll("." + c3.chart.internal.fn.CLASS.axis +
         "." + c3.chart.internal.fn.CLASS.axisY +
         " .tick line")
         .style("stroke", "none");
         
         // hide x scale line  
      d3.selectAll("." + c3.chart.internal.fn.CLASS.axis +
         "." + c3.chart.internal.fn.CLASS.axisX +
         " .tick line")
         .style("stroke", "none");
      }
      
  });


})();
<!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 class="container"></div>
    <div id="chart"></div>
    <script src="script.js"></script>
  </body>
</html>

最后,我找到了使用 d3 的解决方法。

 d3.select(".c3-chart-text.c3-target.c3-target-data2 .c3-texts.c3-texts-data2")
        .selectAll('text')
        .each(function(d, i) {
          var x = +d3.select(this).attr("x");
          var y = +d3.select(this).attr("y");
          d3.select(this).attr("x", x + 8);
          d3.select(this).attr("y", y + 18);
});

但是,这不是一个好方法,如有任何改进建议,我们将不胜感激。