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

Question

C3折线图如果多条线重叠，线点附近的标签也会重叠，这与预期不符，见 Plunker ，在第二点，我们只看到一个{{1 }}

我的解决方案是更改+7.3和data1标签文字data2和x属性的值。它可以工作，但不优雅，任何人都有其他想法，非常感谢。

y

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


})();

Answer 1

最后，我找到了一个使用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);
});

然而，这不是一个好方法，任何改进它的建议都将受到赞赏。